/* ---------------------------------------------------------- Tracy Anderson CSS Managed by: Blue State Digital Last Update: January 2010 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 ---------------------------------------------------------- */ /* font families */ body {font-family: Arial, Helvetica, sans-serif;} /* font sizes */ .blog-entry-home .date {font-size: 10px;} body, #signup-text {font-size: 12px;} #home-signup p {font-size: 14px;} .base h3, .page-header, body#bsd #main-content h1, .blog-cont-header h2, .side-textual h3 {font-size: 16px;} .blog-entry-home h3, .side-textual .right h4 {font-size: 18px;} .base h2, .blog-entry h2 {font-size: 22px;} .base h1 {font-size: 30px;} /* font colors */ #footer, .side-textual h3 {color: #fff;} a {color: #993300;} #footer a {color: #ad5c33;} /* light brown */ .base h1, .base h2, .base h3, .page-header {color: #813300;} /* medium brown */ .blog-post-entry-meta {color: #666;} #signup-text {color: #333;} /* charcoal*/ .side-textual .right h4 a {color: #000;} #quickSignUp input{color: #9d6e4e;} /* light brown */ /* misc */ .base h1, .base h2, .base h3, .page-header, .blog-entry h2, .blog-cont-header h2, .blog-entry-home h3, .side-textual h3, .side-textual .right h4 {font-weight: bold;} .blog-post-entry-meta {font-style: italic;} .base h1 {margin: 0 0 15px 0;} .base h2, .blog-entry h2 {margin: 0 0 10px 0;} .base h3 {margin: 0 0 5px 0;} .page-header, body#bsd #main-content h1, #home-signup p, #signup-text, .blog-cont-header h2, .side-textual h3 {text-transform: uppercase;} .base p, p.blog-post-entry-summary {line-height: 18px; margin: 0 0 15px 0;} .base a:hover, .base h2 a, .base h3 a, .blog-cont-header h2 a, .blog-entry-home h3 a, .side-textual .right h4 a {text-decoration: none;} #signup-text, .blog-entry-home p.summary {line-height: 20px;} .side-textual .right p {line-height: 16px;} .side-textual .right h4 {line-height: 18px;} blockquote { margin: 30px; font-style:italic; background: rgba(199,156,113,0.2); padding:30px; } .base ul, .base ol {margin: 0 0 15px 10px;} .base ul {} .base ol { } .base ul li {list-style: inside disc; margin: 0 0 5px 0;} .base ol li {list-style: inside decimal;} .base li ol { } .base li ul { } /* 03 =LAYOUT ---------------------------------------------------------- */ html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} html {background: #000 url(/page/-/temp/images/bg-tile.jpg) center top repeat-y;} body {background: url(/page/-/temp/images/bg.jpg) center top no-repeat;} #container {width: 940px; margin: 0 auto;} /* header */ #header {position: relative; height: 128px; width: 940px; margin: 0 0 21px 0;} #logo a {background: url(/page/-/temp/images/logo-v2.jpg); display: block; height: 19px; width: 440px; text-indent: -900em; outline: none; position: absolute; top: 38px; left: -7px;} #join-us {position: absolute; right: 0; top: 0; background: url(/page/-/temp/images/join-us-bg.jpg); height: 32px; width: 438px;} #join-us legend {display: none;} #join-us input {background: none; border: 0;} #quickSignUp {position: relative;} #quickEmail {position: absolute; left: 77px; top: 11px; width: 185px;} #quickZip {position: absolute; left: 279px; top: 11px; width: 75px;} #quickSubmit {position: absolute; border: 0; text-indent: -900em; width: 75px; height: 32px; right: 0; top: 0; background: none; cursor: pointer;} /* nav */ #nav {position: absolute; width: 940px; height: 27px; overflow: hidden; top: 94px; background: url(/page/-/temp/images/nav.png); text-indent: -900em;} #nav ul {overflow: hidden;} #nav li {float: left;} #nav li a {display: block; height: 27px; margin: 0 0 0 1px;} #nav li a:hover {background-image: url(/page/-/temp/images/nav-hover.png); } #nav #nav-home a {width: 95px; margin: 0;} #nav-about-method a {width: 181px; } #nav-about-method a:hover {background-position: -96px 0;} #nav-about-tracy a {width: 139px;} #nav-about-tracy a:hover {background-position: -278px 0;} #nav-studios a {width: 102px;} #nav-studios a:hover {background-position: -418px 0;} #nav-blog a {width: 81px;} #nav-blog a:hover {background-position: -521px 0;} #nav-videos a {width: 94px;} #nav-videos a:hover {background-position: -603px 0;} #nav-store a {width: 86px;} #nav-store a:hover {background-position: -698px 0;} #nav-client-login a {width: 155px;} #nav-client-login a:hover {background-position: -785px 0;} /* content */ body.two-col #content {overflow: hidden; background: #fff url(/page/-/temp/images/interior-bg.png) 0 0 repeat-y;} body.one-col #content {background: #fff;} body#home.one-col #content {background: none;} .page-header, body#bsd #main-content h1 {background: #f8f2ed; padding: 18px; margin: 0 0 15px 0;} body.two-col #main {float: left; width: 660px;} body.one-col #main {} #main-content {padding: 0 20px 20px 20px;} #sidebar {float: right;} /* sidebar */ #sidebar {padding: 10px 0 0 0; width: 280px; text-align: center;} .sidebar-content-block {margin: 0 0 10px 0;} /* footer */ #footer {background: #000; padding: 15px;} #footer p {width: 940px; margin: 0 auto; text-align: center;} /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home-signup-cont {background: #fff /*url(/page/-/temp/images/ta-situp-home-signup.jpg) no-repeat 500px 0*/; height: 338px; padding: 22px 0 0 22px; margin: 0 0 7px 0; position: relative;} #home-signup {background: #e2cdb8; height: 65px; width: 412px; padding: 15px; -moz-border-radius: 2px; -webkit-border-radius: 2px;} #home-signup legend {text-indent: -900em;} #home-signup p {text-align: center;} #home-signup input {border: 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; font-size: 15px; padding: 5px ; margin: 0 10px 0 0;} #home-signup-email {width: 208px;} #home-signup-zip {width: 85px;} #home-signup-submit {border: 0; background: #813300 url(/page/-/temp/images/sign-up-homg.png) 0 1px; color: #fff; height: 28px; width: 71px; text-indent: -900em;} #intro-video {position: absolute; right: 25px; top: 50px;} #signup-text {margin: 20px 0; width: 412px;} a#buy-dvds-home {margin: 0 40px 0 0;} #coverflow {margin: 0 0 3px 0;} #home-content {} #blog-cont-home {background: #fff;} #home-content .left {width: 570px;} .blog-cont-header {background: #f8f2ed; padding: 10px; margin: 0 0 15px 0;} .feed-icon-small {background: url(/page/-/temp/images/rss-icon-brown.jpg) no-repeat; padding: 0 0 5px 25px;} .blog-cont-header h2 {background: #f8f2ed; width: 200px;} #home-content .blog-cont-header .left {background: #f8f2ed; width: 250px;} #blog-entry-cont-home {padding: 0 15px;} .blog-entry-home {margin: 0 0 30px 0; overflow: hidden; border-bottom: 1px solid #eee; padding: 0 0 30px 0;} #home-content .blog-entry-home .left {width: 104px;} #home-content .blog-entry-home .right {width: 425px;} .blog-entry-home h3 {margin: -5px 0 5px 0;} .blog-entry-home .date {margin: 0 0 3px 0;} .blog-entry-home p.summary {margin: 0 0 5px 0;} #home-sidebar.right {width: 364px;} .home-side-content-block {margin: 0 0 5px 0;} #home-sidebar .side-textual .left {width: 108px; background: none;} #home-sidebar .side-textual .right {width: 215px;} .side-textual h3 {background: #ba8a5e; padding: 10px;} .side-textual .clearfix {background: #c79c71; padding: 15px;} .side-textual .right h4 {margin: 0 0 5px 0;} #soc-net-home.home-side-content-block {margin: 10px 0 0 0;} #soc-net-home.side-textual h3, #soc-net-interior.side-textual h3 {background: none; margin: 0 0 7px 0; padding: 0;} #soc-net-interior div {margin: 0 0 0 10px;} #soc-net-interior.side-textual h3 {text-align: left; margin: 0 0 7px 10px;} /* 05 =SUBPAGES ---------------------------------------------------------- */ /* blog */ .blog-entry {overflow: hidden; margin: 0 0 30px 0; border-bottom: 1px solid #ccc; padding: 0 0 30px 0;} .blog-entry .left {width: 150px;} .blog-entry .image-holder {background: green; height: 150px; width: 150px;} .blog-entry .right {width: 450px;} .blog-entry.onecol .right {width: 100%;} .blog-post-entry-meta {margin: 0 0 4px 0;} #main-video-player { margin:0 auto 15px auto; width:550px; } #vid-meta { margin:10px 0; background: rgba(199,156,113,0.2); 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 rgba(199, 156, 113, 0.2); padding:10px; width:540px; } #vid-list { margin:0 auto 10px auto; width:550px; } .main-vid-entry { float:right; margin:0 8px; width:121px;} /* 06 =FRAMEWORK ---------------------------------------------------------- */ body#bsd #main-content h1 {margin-left: -20px; margin-right: -20px;} /* 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;}