/* ========================================================================= */ /* Fonts */ /* ========================================================================= */ @font-face { font-family: 'LillyRegular'; src: url('../fonts/Lilly__.eot'); src: local('Lilly Regular'), local('Lilly'), url('../fonts/Lilly__.ttf') format('truetype'); } /* ========================================================================= */ /* UNIVERSAL STYLES */ /* ========================================================================= */ * { margin: 0; padding: 0; } html, body { font: normal 12px/150% 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; color: #808080; background: #6EB6FD url(../images/bg.jpg) no-repeat 50% 0; } /* ========================================================================= */ /* LAYOUT STYLES */ /* ========================================================================= */ #wrapper { background: url(../images/bg_stars.png) repeat-x 50% 0; } #wrapper-inner { margin: 0 auto; width: 990px; overflow: hidden; } #contact { text-align: right; float: right; margin: 35px 15px 0 0; } #banner { background: url(../images/banner/rotate.php) no-repeat 0 0; clear: both; padding: 20px 485px 0 40px; height: 355px; position: relative; } #content-sub { float: left; background: url(../images/bg_sidebar.gif) no-repeat 50% 0; width: 232px; margin: 3px 0 0 15px; padding: 0; } #content-sub-inner { float: left; background: url(../images/bg_sidebar.gif) no-repeat 50% 100%; width: 232px; height: 10px; margin: 0; padding: 10px 0 0 0; } #content-main { float: right; width: 721px; } #about { background: url(../images/bg_box-bottom.png) no-repeat 50% 100%; padding: 0 0 30px 0; } #products { background: url(../images/bg_box-bottom.png) no-repeat 50% 100%; padding: 0 0 30px 0; margin: 15px 0 0 0; min-height: 390px; } #footer { width: 100%; background: #5D9CDA url(../images/bg_footer.gif) repeat-x 0 0; } #footer-inner { width: 990px; margin: 0 auto; overflow: hidden; padding-bottom: 40px; } #twitter { background: url(../images/bg_twitter.gif) no-repeat 0 0; width: 581px; height: 199px; float: right; position: relative; } #info { float: left; margin: 100px 0 0 0; } /* ========================================================================= */ /* ELEMENT STYLES */ /* ========================================================================= */ h1 { float: left; text-indent: -9000px;} h2 { margin: 10px 0; font: normal 20px/170% 'LillyRegular', Helvetica, Arial, sans-serif; } h3 { font-size: 18px; line-height: 150%; margin: 20px 0; font-weight: normal; } h4 { font-size: 12px; margin: 20px 0 10px 0; text-transform: uppercase; color: #2c4c6a; } p { margin: 10px 0 20px 0; } ul { margin: 20px; } ol { margin: 20px 20px 20px 25px; } a { color: #6EB6FD; text-decoration: none; } a:hover { text-decoration: underline; } a:focus { border: none; outline: none; } blockquote { margin: 20px 20px 0 20px; } cite { margin: 0 20px 20px 20px; } /* = ELEMENT STYLES: Classes and ID's ====================================== */ h1.logo { float: left; margin: 0 0 0 15px; text-indent: -9000px; background: url(../images/logo.png) no-repeat 0 0; width: 475px; height: 149px; } h1.sale { background: url(../images/ribbon_winter.png) no-repeat 0 0; width: 472px; height: 111px; margin: 0 0 0 -40px; position: absolute; bottom: 30px; } #contact p { color: #daedff; font-size: 10px; margin: 0; line-height: 150%; } #contact p strong { color: #fff; } #contact p.phone { font-size: 24px; color: #fff; text-shadow: #305578 0 1px 0; } #contact p a { color: #fff; text-decoration: underline; } #contact p a:hover { text-decoration: none; } #banner h2 { color: #6EB6FD; } #banner p { font-size: 18px; color: #9a9a9a; line-height: 150%; margin: 0; } #about h1 { background: url(../images/bg_about.jpg) no-repeat 50% 0; height: 103px; width: 100%; } #about h3 { margin: 0 100px 15px 50px; } #about p { margin: 0 100px 15px 50px; } #products h1 { background: url(../images/bg_our-products.jpg) no-repeat 50% 0; height: 103px; width: 100%; } #products h3 { margin: 0 100px 15px 50px; } #products p { margin: 0 0 15px 40px; } ul.tabs { float: left; list-style: none; border-right: 1px solid #ddd; margin: 0 0 0 30px; } ul.tabs li a { display: block; width: 132px; color: #000; padding: 5px 0 10px 15px; font-size: 13px;} ul.tabs li.active a, ul.tabs li a:hover { background: url(../images/btn_ribbon.gif) no-repeat 0 0; color: #fff; text-decoration: none; } .tab_container { float: left; width: 450px; } #content-sub h2 { color: #2c4c6a; font-size: 18px; margin-left: 15px; } #content-sub h4 { margin-left: 15px; } #content-sub ul { color: #4c8ecc; font-size: 11px; line-height: 140%; margin: 10px 20px 0 35px; } ul#twitter_update_list { margin: 0; list-style: none; } ul#twitter_update_list li { text-align: center; margin: 60px 200px 0 40px; font: normal 13px/150% 'LillyRegular', Helvetica, Arial, sans-serif; color: #5D9CDA; } ul#twitter_update_list li a { text-decoration: underline; } ul#twitter_update_list li a:hover { text-decoration: none; } ul#twitter_update_list li a.tweet-time { font: normal 10px/150% 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; color: #aaa; display: block; margin: 10px 0 0 0; text-decoration: none; } ul#twitter_update_list li a:hover.tweet-time { color: #6EB6FD; } a.button { display: block; width: 313px; background: url(../images/button.gif) no-repeat 0 0; font: normal 22px/64px 'LillyRegular', Helvetica, Arial, sans-serif; color: #fff; padding: 0 0 0 20px; text-shadow: #000 0 1px 0; } a:hover.button { text-decoration: none; color: #A9D6FF; background: url(../images/button.gif) no-repeat 0 100%; } p.copyright { clear: both; font-size: 10px; color: #A9D6FF; } a.twitter-follow { position: absolute; margin: 0; color: #fff; text-shadow: #5E755D 0 1px 0; bottom: 12px; right: 10px; } a.twitter-follow:hover { text-decoration: none; color: #EEF4ED; } a.twitter-follow img { border: none; vertical-align: -3px;} /* ========================================================================= */ /* NAV STYLES */ /* ========================================================================= */ /* ========================================================================= */ /* FORM STYLES */ /* ========================================================================= */ form ul { margin: 0; padding: 0; } form li { list-style: none; } form li ul { margin: 0; } label.description { display: block; font-weight: bold; } label.choice { padding-left: 5px; } input.text { width: 300px; } input.checkbox { } input.radio { } textarea { width: 300px; height: 100px; font: normal 12px/150% Helvetica, Arial, sans-serif; } select { width: 300px; }