/* ---------------------------------------------------------- Tracy Anderson CSS Managed by: Blue State Digital Last Update: May 2009 TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { list-style: none; } caption, th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr,acronym { border: 0; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ body { font-family: Arial, Helvetica, sans-serif; } #footer {font-size: 10px;} #nav, .column-cont p {font-size: 11px;} body {font-size: 12px;} #home-intro, #home-top .right p, .home-pink-li a, #home-bottom p {font-size: 13px;} .base h4, .base blockquote, #home-top .left {font-size: 14px;} .home-column-bottom, #sidebar h2, h3.section-head, .home-blog-entry h3 {font-size: 15px;} .base h3 {font-size: 16px;} .base h2, .blog-entry h2, h2#press-head-home a, h2#home-intro, #home-press-sc h2 a {font-size: 18px;} #home-bottom-headings, .home-column-head h2, .base h1, .interior h1 {font-size: 18px;} #nav a:hover {color: #B4CC27;} #home-top .right p, #purchase-dvds-head a, .home-column-head h2, .base h1, .base h2, .base h3, .base h4, .interior h1, h3.section-head, .home-column-head h2 a, h2#home-intro, #home-press-sc h2 a {color: #FF8BDF} /* pink */ #home-intro, .column-cont p, .home-blog-entry h3 a, .home-blog-entry p, .base, body {color: #3F3F3F;} /* gray */ #blog-head a, .home-column-bottom, .home-column-bottom h2 a, #sidebar h2 a, h2#press-head-home a {color: #CCD00A;} /* green-yellow */ .home-pink-li a, .home-column-bottom a, .home-blog-entry h3 span, .home-blog-entry p a, #footer, #footer a, .base a, .base blockquote, .blog-entry a {color: #6CC6B8;} /* teal */ .blog-post-entry-meta {color: #999;} .dark-text {color: #666; font-weight: bold;} #home-intro span, .home-blog-entry h3 a, body.interior h1 {text-transform: uppercase;} #home-intro {line-height: 20px;} .column-cont p, .home-blog-entry p {line-height: 18px;} #home-top .left p {line-height: 21px;} #home-bottom-headings a, .home-pink-li a, .home-column-bottom a, .home-blog-entry h3 a, #sidebar h2 a, .blog-entry h2 a, h2#press-head-home a, .home-column-head h2 a, #home-press-sc h2 a {text-decoration: none;} .base h1, .interior h1 { margin: 0 0 22px 0; } .base h2 { margin: 0 0 18px 0; } .base h3 { margin: 0 0 14px 0; } .base h4 { margin: 0 0 12px 0; } .base p { margin: 0 0 10px 0; line-height: 20px; } a { } a:hover { } #nav a {color: #6DC7B8;} #nav a {text-decoration: none;} .base blockquote { margin: 15px 15px; } .base blockquote p {line-height: 24px;} .base ul, ol { margin: 15px 15px; } .base ul { } .base ol { } .base ol li {list-style-type: decimal;} .base ul li, .base ol li { list-style-type: disc; margin: 0 0 10px 15px; list-style-position: outside;} .base li ol { } .base li ul { } .base img {border: 1px solid #6dc7b8; padding: 5px; margin: 10px;} /* 03 =LAYOUT ---------------------------------------------------------- */ html, body {background: #fff;} .container {width: 940px; margin: 0 auto;} .content {position: relative; margin: 0 0 20px 0;} #footer {margin: 0 0 30px 0;} body.interior .content {padding: 0 0 0 0;} body.one-col .content {background: none!important;} /* header */ .header {height: 172px; position: relative; margin: 40px 0 0 0;} #logo {position: absolute; text-indent: -900em; height: 100px; width: 378px; background: url(/page/-/images/logo.jpg); left: 130px;} #logo a {display: block; height: 100px; width: 378px;} body.interior #logo {left: 0;} .quick-sign-up {position: absolute; right: 0; background: url(/page/-/images/signup-bg.jpg); height: 49px; width: 398px;} #quick-sign-up {position: relative; height: 49px; width: 398px;} #quick-sign-up legend {text-indent: -900em;} #quick-sign-up input {color: #929497; font-size: 10px; text-transform: lowercase; position: absolute; border: 0;} #quick-email {top: 27px; left: 70px; width: 160px;} #quick-zip {top: 27px; left: 240px; width: 82px;} #quick-submit {background: none; border: none; text-indent: -900em; height: 30px; width: 68px; position: absolute; top: 19px; right: 0;} /* nav */ #nav {position: absolute; top: 125px; width: 100%; height: 50px;} #nav-inner-cont {position: relative; height: 39px;} #nav-inner-cont ul {border-top: 1px solid #6dc7b8; border-left: 1px solid #6dc7b8; position: absolute; top: 0; left: 250px; z-index: 5;} #nav li {float: left; text-transform: uppercase;} #nav li {border-right: 1px solid #6DC7B8; padding: 12px 20px;} #nav-bottom-line {border-bottom: 1px solid #6DC7B8; width: 100%; position: absolute; bottom: 0;} body.interior .content {background: url(/page/-/images/content-bg-interior.png) repeat-y;} #main {float: left; width: 600px; padding: 20px 35px 0 0;} body.one-col #main {float: none; width: 904px; border: none!important;} body#home li#nav-home, body#fitness li#nav-fitness, body#lifestyle li#nav-lifestyle, body#blog li#nav-blog, body#blog-entry li#nav-blog, body#video li#nav-video, body#shop li#nav-shop, body.p12 #nav-about-ta, body.p28 #nav-studios {border-bottom: 1px solid #fff;} body#home li#nav-home a, body#fitness li#nav-fitness a, body#lifestyle li#nav-lifestyle a, body#blog li#nav-blog a, body#blog-entry li#nav-blog a, body#video li#nav-video a, body#shop li#nav-shop a, body.p12 #nav-about-ta a, body.p28 #nav-studios a {color: #CCD00A;} @media screen and (-webkit-min-device-pixel-ratio:0) { #nav li {padding: 12px 20px 13px 20px;} } /* sidebar */ #sidebar {float: right; width: 264px; padding: 60px 0 0 0;} .side-content-block {border-top: 1px solid #6dc7b8; margin: 0 0 24px 0; padding: 24px 0 24px 0;} #sidebar h2 {margin: 0 0 20px 0;} #sidebar a {color: #6CC6B8;} .top-vid-thmb-cont {position: relative; margin: 0 0 6px 0;} .top-vid-thmb-cont img {} .top-vid-thmb-cont a {position: absolute; display: block; top: 0; height: 185px; width: 265px; background: url(/page/-/images/youtube-play-button.png) no-repeat center center; text-indent: -900em;} .top-large-video h3 a {font-size: 16px; text-decoration: none; margin: 0 0 0 0;} .top-large-video h3 {margin: 0 0 5px 0;} .top-large-video p {margin: 0 0 10px 0;} /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home-top {padding: 60px 0 45px 150px;} #home-top .left {float: left; width: 390px; margin: -22px 100px 0 0;} #home-top .right {float: left; width: 220px;} #home-intro {} #home-top .right p {border-bottom: 1px solid #6DC7B8; padding: 0 0 22px 0; margin: 0 0 22px 0;} #home-top .left p {line-height: 26px;} #tracy-image {height: 643px; width: 200px; background: url(/page/-/images/tracy-v2.png) no-repeat; position: absolute; top: -185px; left: -50px;} #home-bottom-headings {border-bottom: 1px solid #6DC7B8; padding: 0 0 13px 150px;} #purchase-dvds-head {float: left; margin: 0 335px 0 0;} #blog-head {float: left;} #home-bottom .left {float: left; width: 624px; padding: 6px 6px 0 0; border-right: 1px solid #6DC7B8;} #home-bottom #home-side {float: right; padding: 6px 0 0 0; width: 290px;} #cover-flow-cont {height: 227px; width: 484px; background: url(/page/-/images/home-dvd-bg.jpg) no-repeat; margin: 0 0 30px 0; padding: 10px 0 0 140px;} .home-column-head {margin: 0 0 25px 0;} .home-column-head img {float: left; margin: 0 10px 0 0;} .home-column-head h2 {float: left; margin: 48px 0 0 0;} .column-cont .left {float: left; width: 290px!important; padding: 0 20px 0 0!important;} .column-cont .right {float: right; width: 280px; padding: 0; margin: 0 10px 0 0;} .column-cont p {margin: 0 0 22px 0;} .home-pink-li li {background: url(/page/-/images/list-item-pink.png) no-repeat left center; padding: 0 0 0 20px; margin: 0 0 10px 0;} .home-column-bottom {border-top: 1px solid #6DC7B8; margin: 30px 0 0 0; padding: 15px 0 0 0;} .home-column-bottom h2 {margin: 0 0 18px 0;} #home-twitter h2 {background: url(/page/-/images/twitter-bird.png) no-repeat 130px 0; padding: 22px 0 0 0;} #home-twitter p {margin: 0 0 1px 0;} .tweet-home {margin: 0 0 15px 0;} .home-blog-entry {margin: 0 0 30px 0; padding: 0 0 30px 0;} .bottom-border {border-bottom: 1px solid #6DC7B8;} .home-blog-entry.last {border: none;} .home-blog-thumb {margin: 0 0 36px 0;} .home-blog-entry h3 {margin: 0 0 5px 0;} h2#press-head-home {margin: 0 0 25px 0;} #home-press-sc {border-top: 1px solid #6DC7B8; margin: 30px 0 0 0; padding: 25px 0 0 0;} #home-press-sc .home-blog-entry {padding: 0;} #home-press-sc h2 {margin: 0 0 15px 0;} /* 05 =SUBPAGES ---------------------------------------------------------- */ .int-img-no-bdr {border: none!important;} /* blog */ .blog-entry {overflow: hidden; margin: 0 0 30px 0; border-bottom: 1px solid #eee; padding: 0 0 30px 0;} .blog-entry .left {width: 150px;} .blog-entry .image-holder {background: green; height: 150px; width: 150px;} .blog-entry .right {width: 430px;} .blog-entry.onecol .right {width: 100%;} .blog-post-entry-meta {margin: 0 0 4px 0;} .blog-entry h2 {margin: 0 0 2px 0;} .blog-post-entry-meta {margin: 0 0 10px 0;} .blog-entry p {line-height: 18px;} .blog-post-entry-summary {margin: 0 0 10px 0;} .blog-entry.featured {background: #ffe6f8; padding: 10px;} /* video */ #main-video-player { margin:0 auto 15px auto; width:550px; } #vid-meta { margin:10px 0; background: #EAF7F4; padding:10px; width:540px; } p#summary { font-weight:bold; } #vid-list { margin:0 auto 10px auto; width:550px; } #vid-list span.more { font-weight:bold; } #video-player { margin:0 auto; width:550px; } #vid-summary { margin:20px auto; width: 550px; background:none repeat scroll 0 0 #EAF7F4; padding:10px; width:540px; } #vid-list { margin:0 auto 10px auto; width:550px; } .main-vid-entry { float:left; width:150px; margin:0 30px 5px 0; } .main-vid-entry p { padding:0 0 0 10px; } /* fitness */ .template-top-cont {margin: 0 0 15px 0;} .template-top-cont .left {} .template-top-cont .right {width: 435px;} .template-top-cont .right p {line-height: 18px;} /* press */ h3.section-head {margin: 0 0 10px 0; text-transform: uppercase;} /* SHARED */ .interior-intro {position: relative; padding: 15px; margin: 0 0 65px 0;} .interior-intro p {position: relative; z-index: 20; line-height: 26px; color: #2c2c2c;} .tracy-sig-small {background: url(/page/-/images/tracy-sig-small.png); height: 40px; width: 141px; position: absolute; bottom: -40px; right: 30px;} .top-quote {background: url(/page/-/images/top-quotes.png); height: 57px; width: 60px; position: absolute; z-index: 0; top: 0; left: 0;} .bottom-quote {background: url(/page/-/images/bottom-quotes.png); height: 57px; width: 60px; position: absolute; z-index: 0; bottom: 0; right: 0;} /* Studios and Studio Login */ .studio-description { font-size: 16px; color: #6EC8B9; } .studios { width: 280px; float: left; margin: 15px 0 10px 15px; font-size: 14px; color: #433c3c; display: inline; } .studios h2 { font-size: 14px; font-weight: bold; margin: 4px 0; padding: 0; } .studio-header { float: left; width: 608px; height: 20px; background-color: #f3e9e9; margin: 15px 0; padding: 6px 0 0 6px; display: inline; } .studio-header h3 { font-size: 14px; font-weight: bold; color: #c91111; } .studio-img { float: left; width: 618px; display: inline; } .studio-img img { margin: 0; padding: 0; border: solid 2px #e1d6d6; } .studio-img ul { margin: 0; } .studio-img ul li { float: left; width: 194px; height: 164px; list-style-type: none; margin: 8px 8px 0 0; padding: 0; display: inline; } .studios-login { width: 260px; float: left; margin: 15px 0 10px 25px; font-size: 14px; color: #433c3c; } .studios-login h2 a { font-size: 18px; margin: 6px 0; padding: 0; display: block; text-decoration: none; } .studios-login h2 a:hover { display: block; text-decoration: none; } .studios-login img { border: solid 4px #E1D6D6; padding: 0; margin: 0; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ /* signup pages */ .fieldset {margin: 0 0 6px 0;} option {padding: 0 10px 0 0; dispaly: none;} input {padding: 2px;} label.field {padding: 0 0 10px 0!important; margin: 0 0 10px 0!important;} .label {margin: 0 0 10px 0;} .input label {padding: 0 0 0 4px!important;} .input input {margin: 0 0 10px 0!important;} .selectParentAdjuster {margin: 0 0 16px 0;} /* 07 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;} .left {float: left;} .right {float: right;}