/*--------------------------------------------------*/ /* !BACKGROUND AND GENERAL LAYOUT */ /*--------------------------------------------------*/ #fankitBG { background: url(../_images/fankit_images/fankit-blue-bg.png); width: 849px; height: 561px; position: absolute; left: 104px; top: 140px; } #fankitBG span { display: none; } .title { color: #004680; font-size: 1.4em; } .licenseNote { color: white; font-size: 1.2em; line-height: 1.5em; font-weight: 100; width: 620px; padding: 15px 0; right: 100px; position: absolute; } .licenseNote a { color: #ff0000; } .licenseNote a:hover { color: #ff9000; } #backToFanKit_btn { width: 145px; height: 65px; bottom: -65px; left: 65px; background: url(../_images/fankit_images/backToFanKit-btn.png) no-repeat; position: absolute; display: block; } #backToFanKit_btn:hover { background-position: 0 -65px; } #backToFanKit_btn span { display: none; } /*--------------------------------------------------*/ /* !WIDGET PLACEMENT STYLE */ /*--------------------------------------------------*/ #content { position: relative; display: block; height: auto; width: 962px; padding: 0; margin: 20px 0 0 50px; float: left; } #content p { font: bold 1.25em Geneva; color:black; width: 400px; height: auto; padding: 40px; } #fankit { margin: -20px 0 0 50px; background: url(../_images/fankit_images/fankit-callout.png); width: 448px; height: 328px; float: left; display: inline; position: absolute; } #clickHere_btn { width: 108px; height: 42px; bottom: 60px; left: 260px; background: url(../_images/fankit_images/clickHere-btn.png) no-repeat; position: absolute; display: block; } #clickHere_btn:hover { background-position: 0 -42px; } #clickHere_btn span { display: none; } #waldoMakers { right: 80px; top: -40px; width: 352px; height: 360px; float: left; background: url(../_images/fankit_images/waldoMakers-callout.png) no-repeat; display: inline; position: absolute; } #waldoMakers_clickHere_btn { width: 109px; height: 34px; bottom: 100px; right: 75px; background: url(../_images/fankit_images/waldoMakers-clickHere-btn.png) no-repeat; position: absolute; display: block; } #waldoMakers_clickHere_btn:hover{ background-position: 0 -34px; } #waldoMakers_clickHere_btn span { display: none; } #downloadKit { margin: 295px 0 0 100px; width: 279px; height: 231px; float: left; position: absolute; background: url(../_images/fankit_images/downloadKit-callout.png); } #downloadKit_btn { width: 171px; height: 77px; bottom: 35px; left: 50px; background: url(../_images/fankit_images/downloadKit-btn.png) no-repeat; position: absolute; display: block; } #downloadKit_btn:hover { background-position: 0 -77px; } #downloadKit_btn span { display: none; } #browseKit { top: 240px; right: 125px; width: 365px; height: 300px; float: left; position: absolute; background: url(../_images/fankit_images/browseKit-callout.png) no-repeat; display: inline; } #browseKit_btn { width: 189px; height: 75px; bottom: 35px; left: 105px; background: url(../_images/fankit_images/browseKit-btn.png) no-repeat; position: absolute; display: block; } #browseKit_btn:hover { background-position: 0 -75px; } #browseKit_btn span { display: none; } #wizardImage { left: 380px; bottom: 60px; position: absolute; } #wendaImage { right: 90px; bottom: 125px; position: absolute; } /*--------------------------------------------------*/ /* !HOW TO PAGE STYLE */ /*--------------------------------------------------*/ #backToFanKit_btn { top: 440px; left: 65px; position: absolute; } #content2 { background: url(../_images/fankit_images/pattern_bg_large.png) no-repeat; width: 703px; height: 441px; top: 220px; left: 158px; position: absolute; } .prev { width: 97px; height: 28px; bottom: 25px; right: 20px; background: url(../_images/fankit_images/prev.png) no-repeat; position: absolute; display: block; } .prev:hover { background-position: 0 -29px; } .prev span { display: none; } .next { width: 63px; height: 29px; bottom: 25px; right: 20px; background: url(../_images/fankit_images/next.png) no-repeat; position: absolute; display: block; } .next:hover { background-position: 0 -29px; } .next span { display: none; } /*--------------------------------------------------*/ /* !IE7 MARGIN FIX */ /*--------------------------------------------------*/ *:first-child+html #comingSoon { margin: -20px 0 0 -650px; width: 260px; height: 215px; float: left; display: block; position: absolute; } *:first-child+html #avatarCreator { margin: -90px 0 0 -30px; width: 385px; height: 310px; float: left; position: relative; } *:first-child+html #viewPhotos_button { margin: 215px 0 0 25px; width: 140px; height: 47px; position: absolute; } *:first-child+html #enterNow_button { margin: 230px 0 0 175px; width: 120px; height: 30px; position: absolute; } /*--------------------------------------------------*/ /* !SLIDER STYLE */ /*--------------------------------------------------*/ * { margin: 0; padding: 0 } /* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ p { text-align: left; margin: 15px 0 } p, ul { font-size: 13px; line-height: 1.4em } p a, li a { color: #39c; text-decoration: none } p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% } p#cross-links, p#valid { text-align: center } p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px } /* Styles for users who has Javascript turnt off */ .noSupport { color: #f0a400; font-size: 1.2em; line-height: 1.4em; text-align: left; width: 150px; top: 65px; left: 80px; position: absolute; } noscript a { color: #f0a400; text-decoration: underline } noscript ol { position: absolute; width: 125px; top: 210px; left: 100px; } noscript ol li { padding-bottom: 10px; font-size: 1.1em; } a:focus { outline: none; } img { border: 0 } h3 { margin: 0 0 5px -4px; padding-bottom: 3px; text-align: left } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin: 20px 0; position: relative; width: 610px; margin: 65px 0 0 245px; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 100%; height: 380px; background: #fff; overflow: scroll} .csw .loading {margin: 200px 0 300px 0; text-align: center} .stripViewer { position: relative; overflow: hidden;/* This is the viewing window */ /*border: 5px solid #39c; /* this is the border. should have the same value for the links */ margin: auto; width: 610px;/* Also specified in .stripViewer .panelContainer .panel below */ height: 380px; clear: both; background: url(../_images/fankit_images/pattern-bg.png); } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float:left; height: 100%; position: relative; width: 610px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px 20px; } .stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin-left: -195px; position: absolute; } .stripNav ul { /* The auto-generated set of links */ list-style: none; width: 175px; } .stripNav ul li { float: none; width: 10px; margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */ } .stripNav a { /* The nav links */ font-size: 10px; font-weight: bold; text-align: center; line-height: 32px; background: #c6e3ff; color: #000; text-decoration: none; display: block; padding: 0 15px; } .stripNav li a { /* Generic "CSS image replacement" */ display: block; height: 60px; text-indent: -9999px; position: relative; width: 175px; } /* The below class names are auto-generated by the JavaScript */ .stripNav li.tab1 a { background: url(../_images/fankit_images/waldoAndFriends-btn.png) top center no-repeat; width: 175px; } .stripNav li.tab2 a { background: url(../_images/fankit_images/travelLogTools-btn.png) top center no-repeat; width: 175px; } .stripNav li.tab3 a { background: url(../_images/fankit_images/getStriped-btn.png) top center no-repeat; width: 175px; } .stripNav li.tab4 a { background: url(../_images/fankit_images/profilePatterns-btn.png) top center no-repeat; width: 175px; } .stripNav li.tab5 a { background: url(../_images/fankit_images/manOfLiterature-btn.png) top center no-repeat; width: 175px; } .stripNav li.tab6 a { background: url(../_images/fankit_images/roadGear-btn.png) top center no-repeat; width: 175px; } .stripNav li a:hover, .stripNav li a:active, .stripNav li a:focus { /* Restore focus styling that we removed when we removed outlines */ background-position: top center; } /* It is neccessary to repeat the image paths here */ .stripNav li.tab1 a.current { background: url(../_images/fankit_images/waldoAndFriends-btn.png) bottom center no-repeat; } .stripNav li.tab2 a.current { background: url(../_images/fankit_images/travelLogTools-btn.png) bottom center no-repeat; } .stripNav li.tab3 a.current { background: url(../_images/fankit_images/getStriped-btn.png) bottom center no-repeat; } .stripNav li.tab4 a.current { background: url(../_images/fankit_images/profilePatterns-btn.png) bottom center no-repeat; } .stripNav li.tab5 a.current { background: url(../_images/fankit_images/manOfLiterature-btn.png) bottom center no-repeat; } .stripNav li.tab6 a.current { background: url(../_images/fankit_images/roadGear-btn.png) bottom center no-repeat; } .stripNav a:hover { background: #9cf; } .stripNav a.current { background: #39c; color: #fff; } .stripNavL, .stripNavR { /* The left and right arrows */ position: absolute; top: 345px; text-indent: -9000em; } .stripNavL a { display: block; height: 28px; width: 90px; } .stripNavR a { display: block; height: 28px; width: 63px; } .stripNavL { right: 85px; z-index: 1000; } .stripNavR { right: 10px; z-index: 1000; } .stripNavL { background: url("../_images/fankit_images/prev.png") no-repeat; width: 97px; height: 28px; } .stripNavR { background: url("../_images/fankit_images/next.png") no-repeat; width: 63px; height: 28px; } .stripNavL:hover { background-position:0 -29px; } .stripNavR:hover { background-position:0 -29px; }