/* ----------------------------------------------- Spin Page Spin Core Page Style Sheet Author: Craig Lucas OUTLINE - Reset Styles - Page Layout Styles - Library and Generic Classes -- Headers -- Footers -- Links -- Advertisement -- Pagination -- Floated Elements - Page Header Styles -- Site Navigation Styling -- Login/Logout Widget -- Sitewide Search - Most Popular - Connect with Spin - Page Footer Styles - Self Clearing Floats QUICK TEST ----------------------------------------------- */ /* ===Reset Styles=== ----------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ background:transparent none repeat scroll 0 0; border:0 none; font-size:100%; margin:0; outline-color:-moz-use-text-color; outline-style:none; outline-width:0; padding:0; vertical-align:baseline;} body {line-height:1;} ol, ul {list-style-image:none; list-style-position:outside; list-style-type:none; } blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:none;} :focus {outline-color:-moz-use-text-color; outline-style:none; outline-width:0;} ins {text-decoration:none;} del {text-decoration:line-through;} table {border-collapse:collapse; border-spacing:0;} body {background-color:#CCCCCC;} a {color:#0060B6;} /* ===Page Layout Styles=== ----------------------------------------------- */ body {background: transparent url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/bg/hp-bg.gif") top left repeat;} #page {margin:0 auto; width:975px;} #pageWrap {background-color:#ccc; padding:1px;} #pageContent {background-color:#fff;} body.layout-2col #pageContent {float:left; padding: 0px 0 30px 0; background-color:#fff;} body.layout-2col #contentWrap {margin-top: 25px; background:transparent url(http://media.jetpackdigital.com/showcase/43/www.spin.com//../gfx/bg/two-column-divider.gif) repeat-y scroll 4px 0; float:left;} body.layout-2col #mainContent {float:left; width:652px;} body.layout-2col #secondaryContent {float:left; width:321px;} body.layout-2col #commenting, body.layout-2col #pageFooter { padding-left:12px; padding-right:12px; } body.layout-2col #secondaryContentWrap {margin:0 14px 0 10px;} body.layout-2col .node {margin:0 17px 0 12px;} /* ===Library and Generic classes=== ----------------------------------------------- */ /* ===Headers=== */ h1 {} h2 {} h3 {} h4 {} h5 {} h6 {} .header {position:relative;} /* ===Footers=== */ .footer {position:relative; clear:both;} /* ===Links=== */ a {cursor:pointer; text-decoration:none;} a:hover {text-decoration:underline;} a, p, strong {font-family: verdana,helvetica,arial,sans-serif; font-size:12px;} /* ===Advertisement Styling=== */ #pageHeader .advertisement {border-bottom:none;} .advertisement h3 {display:none;} #top-ad-block {width:728px; height:90px;} .banner-slot {margin-bottom:12px;} #secondaryContent .ad-300x250 {} /* === Pagination === */ .pagination {float:right;} .pagination li {margin:0 2px 0 3px;} /* === Floated Elements === */ /* Class of row should be applied to the parent container of floated elements for floats to be cleared properly. This technique also reduces the need for redundant CSS. */ .row {display:block; margin:8px auto; position:relative; } .row ul, .row ul li, .rows ul, .rows ul li {display:block; float:left;} span.img, .rows .img {float:left; margin-right:11px;} span .hed, .rows .hed {display:block;} /* === Font Treatments === */ a, p, span, div, dt, dd, em, i, strong, b, cite, td, li, h1, h2, h3, h4, h5, h6 { font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 19px; } /* ===Page Header Styles=== ----------------------------------------------- */ #pageHeader {position:relative; background-color:#eeeff1;} body.sidebar-right #pageHeader {border-bottom:none;} #pageHeaderWrap {padding:12px 0 14px 14px;} /* ===Spin Subscribe Promo=== */ #subscribe-promo {width:212px; height:90px; position:absolute; top:13px; right:13px;} #subscribe-promo ul {position:relative; width:212px; height:90px; display:block; background: url(http://media.jetpackdigital.com/showcase/43/www.spin.com/sites/spin.com/files/monthly-cover.jpg') top left no-repeat;} #subscribe-promo ul li {position:absolute; left:91px; height:13px;} #subscribe-promo ul li a {position:relative; text-indent: -999em; display:block;} #subscribe-promo ul li.subscribe {top:6px; width:69px;} #subscribe-promo ul li.service {top:28px; width:116px;} #subscribe-promo ul li.gifts {top:47px; width:70px;} #subscribe-promo ul li.buy-now {top:68px; width:92px;} /* ===Site Navigation Styling=== */ div#branding {position:relative; height:68px;} div#site-logo {float:left; width: 140px; margin-right:8px;} div#site-logo a{position:relative; display:block; text-indent:-999em; background-position: -206px 0; width:139px; height:68px;} #nav-primary {float:left; display:block; margin-top:7px; width:805px;} #nav-primary ul {float:left;width:805px;} #nav-primary ul li {float:left; padding-bottom:5px;} #nav-primary ul li a:hover span {background-color:#000; padding:5px;} #nav-primary ul li a{ display:block; text-indent: -999em; position:relative; background-image: url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/nav/global-nav-spin25.png"); background-repeat: no-repeat; background-position: 0 -1px; height:29px; } #nav-primary ul li#nav-home a {height:30px; background-position: 0 1px;} #nav-primary ul li#nav-home{width:68px;} #nav-primary ul li#nav-mag{width:118px;} #nav-primary ul li#nav-reviews{width:103px;} #nav-primary ul li#nav-news{width:75px;} #nav-primary ul li#nav-photos{width:96px;} #nav-primary ul li#nav-videos{width:88px;} #nav-primary ul li#nav-live{width:60px;} #nav-primary ul li#nav-subscribe{width:125px;} #nav-primary ul li#nav-spin25 {width:94px; height:30px;} #nav-primary ul li#nav-shop{width:65px;} #nav-primary ul li#nav-home a{background-position: 0 1px;} #nav-primary ul li#nav-mag a{background-position: -68px 0;} #nav-primary ul li#nav-reviews a{background-position: -186px 0;} #nav-primary ul li#nav-news a{background-position: -289px 0;} #nav-primary ul li#nav-photos a{background-position: -364px 0;} #nav-primary ul li#nav-videos a{background-position: -460px 0;} #nav-primary ul li#nav-live a{background-position: -548px 0;} #nav-primary ul li#nav-subscribe a {background-position: -608px 0;} #nav-primary ul li#nav-spin25 a {background-position: -615px 0; height:30px;} #nav-primary ul li#nav-shop a{background-position: -715px 0;} /* -733 for subscribe */ #nav-primary ul li#nav-home a:hover, .page-home #nav-primary ul li#nav-home a {background-position: 0 -31px;} #nav-primary ul li#nav-mag a:hover, .page-magazine #nav-primary ul li#nav-mag a {background-position: -68px -32px;} #nav-primary ul li#nav-reviews a:hover, .node-type-review #nav-primary ul li#nav-reviews a, .page-reviews #nav-primary ul li#nav-reviews a {background-position: -186px -32px;} #nav-primary ul li#nav-news a:hover, .article-pg #nav-primary ul li#nav-news a, .page-blog #nav-primary ul li#nav-news a {background-position: -289px -32px;} #nav-primary ul li#nav-photos a:hover, .page-gallery #nav-primary ul li#nav-photos a {background-position: -364px -32px;} #nav-primary ul li#nav-videos a:hover, .page-videos #nav-primary ul li#nav-videos a {background-position: -460px -32px;} #nav-primary ul li#nav-live a:hover, .page-live #nav-primary ul li#nav-live a {background-position: -548px -32px;} #nav-primary ul li#nav-subscribe a:hover {background-position: -608px -32px;} #nav-primary ul li#nav-spin25 a:hover, .node-type-spin25 #nav-primary ul li#nav-spin25 a {background-position: -615px -31px;} #nav-primary ul li#nav-shop a:hover {background-position: -715px -32px;} .article-pg #nav-news a:after, .node-type-review #nav-reviews a:after, .page-home #nav-home a:after , .page-magazine #nav-mag a:after , .page-reviews #nav-reviews a:after , .page-blog #nav-news a:after , .page-gallery #nav-photos a:after , .page-videos #nav-videos a:after , .page-live #nav-live a:after { content:"\00a0"; display:block; /* reduce the damage in FF3.0 */ position:absolute; bottom:-8px; /* value = - border-top-width - border-bottom-width */ left:10px; /* value = (:before left) + (:before border-left) - (:after border-left) */ width:0; height:0; border:4px solid transparent; border-top-color:#000; } #nav-secondary {clear:both; position:absolute; top:40px; left: 153px; width:801px;} #nav-secondary ul.main {width:801px;} /* ===Login/Logout Widget=== */ #user-login{margin-right:22px;} #user-login .row {margin:4px auto;} #user-login .row span {float:left;} #user-login .widget {position:relative; z-index:2;} #user-login .widget .head { color:#333; font-size:11px; } #user-login .widget .head .controls a{background-color:#fff; border:1px solid #ccc; padding: 2px 5px; font-size:11px; color:#000;} #user-login .content { background: #fff; /* url(http://media.jetpackdigital.com/showcase/43/www.spin.com//'../gfx/bg/login-drop.gif') #fff no-repeat 0px 0;*/ border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; display:none; height:105px; left:0px; position:absolute; width:403px; z-index:1000; } #user-login .logged-in .content { background: #fff url(http://media.jetpackdigital.com/showcase/43/www.spin.com//'../gfx/bg/login-drop.gif') #fff no-repeat 16px 0; border:1px solid #999; left: 0; padding: 0 10px; position:absolute; top:23px; width:93px; height:63px; } #user-login .logged-in .content ul li {float:none;} #user-login .logged-in .content ul li {margin-bottom:3px;} #user-login .logged-in .content ul li a {font-size:11px;} #user-login .logged-out .content {top:19px;} div#user-login .collapsed .head .controls a, div#user-login .collapsed .content {border-color:#000;} #user-login form {float:left; margin-left:5px; text-align:left;} #user-login form p {float:left; height:60px;} #user-login form label {font-size:11px; color:#333; font-weight:normal;} #user-login #edit-name, #user-login #edit-pass {width:146px; height:21px; border:1px solid #999;} #user-login #username {width:166px;} #user-login #username #remember-me {display:inline;} #user-login #password {width:154px;} #user-login #password a {} #user-login #submit {width:60px;} li#digital-magazine a {font-weight:bold; font-size: 11px; text-transform:uppercase; color:#0060b6; padding-left:18px; display:block; line-height:15px; background-position: 0 -69px; margin-right:22px;} li#digital-magazine a:hover {background-position:0 -94px; color:#999;} li#subscribe a {font-weight:bold; font-size: 11px; text-transform:uppercase; color:#0060b6; padding-left:18px; display:block; line-height:15px; background-position: 0 -69px; margin-right:22px;} li#subscribe a:hover {background-position:0 -94px; color:#999;} #spin-social strong {float:left; padding-right:6px; position: relative; top:-2px; font-size:11px; color:#565656; font-weight:bold; text-transform:uppercase; color#565656;} #spin-social a {height:16px; width:16px; margin-right:4px; float:left; text-indent:-999em;} #spin-social a.twit-pg {background-position: -153px -34px;} #spin-social a.fb-pg {background-position: -136px -34px;} #spin-social a.yt-pg {background-position: -170px -34px;} #spin-social a.foursq-pg {background-position: -199px -34px;;} /* ===Sitewide Search=== */ #site-search {position:relative; top:-6px; width:270px; float:right;} #site-search .txt-input-wrap {float:left;} #site-search .txt-input-wrap input, #site-search #query-input {background-color:#fff; border:1px solid #999999; color:#666666; float:left; height:22px; margin-right:8px; padding: 2px 0 0 3px; width:215px;} #site-search .submit {float:left; width:38px;} #site-search .submit input#edit-submit, #site-search button{float:left; background: transparent url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/nav/btn_go.png") top right no-repeat; border:none; cursor:pointer; display:block; height:32px; margin: -3px 0 0 0; position:relative; overflow:hidden; text-indent:-999em; width:38px;} /* ===Most Popular=== ----------------------------------------------- */ #sect-most-popular {width:300px;} #sect-most-popular .header {margin-bottom:14px; padding:13px 0 0 0;} #sect-most-popular .header h1{display:block; border-bottom:none; padding-bottom:0;} #sect-most-popular .view-content ul li {float:left; padding:6px 0 5px;} .section .jqueryviews_wrapper ul.jqueryviews_tabs {border-top:1px solid #000000; margin:8px auto; padding-left:5px; width:195px;} .section .jqueryviews_wrapper ul.jqueryviews_tabs li {float:left; position:relative; padding:0 0 3px; border-bottom:none;} .section .jqueryviews_wrapper ul.jqueryviews_tabs li a {} .section .jqueryviews_wrapper ul.jqueryviews_tabs li a span {font-size:11px; font-weight:bold; line-height:18px; text-transform:uppercase; border-color:#000000; border-style:solid; border-width:0 0 1px 1px; display:block; color:#000; padding:5px 10px;} .section .jqueryviews_wrapper ul.jqueryviews_tabs li.last a span {border-right:1px solid #000000;} .section .jqueryviews_wrapper ul.jqueryviews_tabs li.active a span {background-color:#E11E25; border-color:red; border-width:0 1px 1px; color:#fff;} #sect-most-popular .jqueryviews {float:left;} .section .jqueryviews_wrapper .jqueryviews_tabs li.active a:after { content:"\00a0"; display:block; /* reduce the damage in FF3.0 */ position:absolute; bottom:-7px; /* value = - border-top-width - border-bottom-width */ left:8px; /* value = (:before left) + (:before border-left) - (:after border-left) */ width:0; height:0; border:6px solid transparent; border-top-color:#E11E25; } .ratings {width:127px; position:relative; height:8px; clear:left;} .rating {width:84px; background: url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/icons/rating-circles.jpg") top left no-repeat; position:relative} .rating span {position:relative; top: -8px; left:90px; color:#565656; font: normal 10px arial;} .ratings .r1 {background-position: -75px 0;} .ratings .r2 {background-position: -67px 0;} .ratings .r3 {background-position: -58px 0;} .ratings .r4 {background-position: -50px 0;} .ratings .r5 {background-position: -41px 0;} .ratings .r6 {background-position: -34px 0;} .ratings .r7 {background-position: -26px 0;} .ratings .r8 {background-position: -17px 0;} .ratings .r9 {background-position: -9px 0;} .ratings .r10{background-position: 0 0;} /* ===Connect with Spin=== ----------------------------------------------- */ #sect-most-popular .view-content ul li strong {display:none;} #sect-most-popular .ratings {clear:none; margin:8px 0 0 98px;} #sect-connect-with-spin {} #sect-connect-with-spin .header {display:block; text-align:left;} #sect-connect-with-spin h1 {display:block; width:119px; margin:0 0 0 63px; text-transform:capitalize; letter-spacing:0px;} #sect-connect-with-spin h1 em {width:60px; height:31px; position:absolute; text-indent:-999em; float:right; background: url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/sprite-global.png") -345px 0 no-repeat; top:6px; left:184px;} #sect-connect-with-spin ul {width:256px; height:60px; margin:0 auto;} #sect-connect-with-spin .connect li {float:left; width:26px; height:26px; padding: 5px 6px; border:1px solid #ccc; margin-right:14px;} #sect-connect-with-spin .icon {display:block; background: url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/sprite-global.png") 0 -36px no-repeat; width:26px; height:26px;} #sect-connect-with-spin a:hover {text-decoration:none;} #sect-connect-with-spin .facebook .icon {background-position: 0 -34px;} #sect-connect-with-spin .twitter .icon {background-position: -28px -34px;} #sect-connect-with-spin .myspace .icon {background-position: -56px -34px;} #sect-connect-with-spin .rss .icon {background-position: -83px -34px;} #sect-connect-with-spin .iphone .icon {background-position: -109px -34px;} #sect-connect-with-spin .connect .iphone {margin-right:0;} #sect-connect-with-spin .fb a {left:-6px;} #sect-connect-with-spin .twitter a {left:1px;} #sect-connect-with-spin .myspace a{left:-5px;} #sect-connect-with-spin .rss a {left:2px;} #sect-connect-with-spin .iphone a {left:-10px;} #sect-connect-with-spin ul li span a {font-size:9px; white-space:nowrap; position:relative; top:2px;} #sect-connect-with-spin .footer {background: url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/bg/2px-wide-e5e5e5-vert-stripes.gif") top left repeat; padding: 12px 9px 10px 8px } #sect-connect-with-spin .footer h2 {font-weight: bold; font-size: 13px; color:#333; text-transform:uppercase; margin-bottom:11px;} #sect-connect-with-spin label {display:block; margin-bottom:5px; font-size: 11px; color:#333;} #sect-connect-with-spin .footer ul {float:left; width:282px;} #sect-connect-with-spin .footer div.mc-field-group {float:left; margin-bottom:0; margin-top:0;} #sect-connect-with-spin .footer div.mc-field-group input {border:1px solid #000;} #sect-connect-with-spin .footer ul li input {border:1px solid #e1e1e1;} #sect-connect-with-spin #edit-email-wrapper {width:114px; margin-right:10px;} #sect-connect-with-spin #edit-zip-wrapper {width:85px; margin-right:7px;} #sect-connect-with-spin #edit-zip-wrapper label {margin-bottom:6px;} #sect-connect-with-spin .submit-field {width:61px; position:relative; top:25px;} #sect-connect-with-spin #mce-EMAIL {width:112px;} #sect-connect-with-spin #mc-embedded-subscribe {background: url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/btn/sign_up.gif") top left no-repeat; width:63px; height:20px; text-indent:-999em; border:none; position:relative; top:24px; cursor:pointer;} .mce_inline_error, #mce-responses div {font-size:10px; padding-top:5px; float:left; line-height:15px;} #sect-connect-with-spin #mce-MMERGE3 {width:83px;} /* ===Page Footer Styles=== ----------------------------------------------- */ body.advertorial_one_column-pg #pageFooter {width:974px;} #pageFooter { clear:both; background-color:#fff; border-top:5px solid #000; /*margin-bottom:20px;*/ padding:27px 0 15px; } #footer-navigation ul li { margin:0 0 0 7px; list-style:none; float:left; padding:0; } #footer-navigation {clear:both;} #footer-navigation ul li a { display:block; float:left; position:relative; padding: 0 5px 0 0; text-transform:uppercase; line-height:11px; font-size:11px; border-right: 1px solid #a0a0a0; color: #0060B6; } #footer-navigation ul li a:hover {text-decoration:underline;} #footer-navigation ul li a#menu-spin-home { position:relative; text-indent: -999em; background: transparent url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/sprite-global.png") -345px 0 no-repeat; width:60px; height:31px; top: -9px; padding-left:0; margin-left:20px; border-right:none; } #footer-navigation ul li a#menu-privacy-policy {border-right:none;} #footer-info { clear:both; color:#666666; font-family: verdana,helvetica,arial,sans-serif; font-size:11px; padding:10px; text-align:left; } #footer-info ul li {display:inline; float:left; margin:0 8px;} #footer-info ul li#digital-magazine a, #footer-info ul li#spin-earth a { position:relative; text-indent: -999em; display:block; } /*GLOBAL SPRITES ANY GLOBAL ICONS OR GRAPHICS THAT APPEAR ON EVERY PAGE USE THIS SPRITE AND CSS*/ #site-logo a, #digital-magazine a, #subscribe a, #spin-social a, #site-search .submit input#edit-submit { background-image: url(http://media.jetpackdigital.com/showcase/43/www.spin.com//"../gfx/sprite-global.png"); background-repeat:none; background-color:transparent; background-position: 0 0; position:relative; } /* FLOAT FIXING */ .clearFix, .section:after, .node #sidebar:after, .row:after, .rows:after, .header:after, .footer:after, .nodeHeader:after, .nodeContent .mainImg, #pageContent:after, #pageFooter:after, #primary:after, .tabNavControls:after, .nodeContent .mainImage:after, #secondaryContent .modBlock:after, #secondaryContent .modBlock ul:after, #secondaryContent .view ul li.first:after, #most-popular-nodes ul li:after{ clear:both; content:"."; display:block; height:0; visibility:hidden; }