/*================================================== M A I N S T Y L E S * Last Updated : 2009/06/16 * Author : www.ultrasupernew.com ==================================================*/ @import 'lib/reset.css'; @import 'lib/utilities.css'; @import 'replaced.css'; /*================================================== L A Y O U T Basic page layout ==================================================*/ body {background: #6a6e75 url(/images/a5-cabriolet/bg-footer.png) repeat-y 50% 0;; font: 10px/160% Arial, Helvetica, sans-serif; color: #000000; } body { font-family: Verdana, Helvetica,"ヒラギノ角ゴ Pro W3","メイリオ", "ＭＳ ゴシック", Osaka, sans-serif !important; } #page { } #header {background: #adb1b7 url(/images/main/background.jpg) center top; } #header div.header-inner {text-align: left; width:960px; margin:0 auto; background: url(/images/main/audi-logo.gif) no-repeat right 68px;} #content {} #content div.content-inner {text-align: left; width:960px; margin:0 auto;} #content div#col-right {float:right; width:640px; margin-top:40px; position: relative;} #content div#col-left {float:left; width:300px; margin-top:40px;} #footer{text-align: center;} #footer div.footer-inner{text-align: left; width:960px; margin:0 auto;} /*================================================== C O M M O N E L E M E N T S Main HTML elements ==================================================*/ ul.live-messages li {margin: 40px;} /*================================================== Header elements ==================================================*/ div#header {height:220px;} #header div.header-inner {position:relative;} div#header h1 {text-indent:-999em; width:391px; height:103px; background: url(/images/a5-cabriolet/a5-live-logo.png) no-repeat 0 0; float:left; margin-top:68px;} div#header div#car-image {position:absolute; top:0; left:348px; background: red; width:562px; height:260px; z-index: 999; background: url(/images/a5-cabriolet/a5-car.png) no-repeat 0 0;} .a5sb div#header h1 {text-indent:-999em; width:391px; height:103px; background: url(/images/a5-sb/a5-live-logo.png) no-repeat 0 0; float:left; margin-top:68px;} .a5sb div#header div#car-image {position:absolute; top:0; left:348px; background: red; width:562px; height:260px; z-index: 999; background: url(/images/a5-sb/a5-car.png) no-repeat 0 0;} /*================================================== Contents elements #1 ==================================================*/ div#link-details {position:relative;} div#link-details a {position:absolute; display:block; width:160px; height:20px; background: url(/images/a5-cabriolet/link-specs.gif) no-repeat 0 0; left:0; top:0; text-indent:-999em;} div#link-details a:hover {background: url(/images/a5-cabriolet/link-specs2.gif) no-repeat 0 0;} div#content {background: #9da3ab url(/images/a5-cabriolet/bg-body.png) repeat-y 50% 0;} div#video-block div#video-holder {display:inline; float:left; width:640px; margin-top:50px; background: url(/images/a5-cabriolet/video-bg.gif) repeat-y 50% 0; height:321px;} div#video-block div#video-holder div.video-stream {width:300px; height:280px; display:inline; float:left; margin:0 20px 0 10px;} div#video-block div#video-holder div.video-stream div.stream-holder {margin-top:0;} div#video-block div#video-holder div.video-tvcm div.movie-holder {position:absolute; top:13px;} div#video-block div#video-holder div.video-tvcm {width:300px; height:280px; float:left; position:relative;} .a5sb div#video-block div#video-holder div.video-tvcm {top: 15px;} div#video-block div#site-meta-data {display:inline; float:right; width:310px; height:200px; margin-top:50px;} div#video-block div#site-meta-data div.block {padding-bottom:20px; margin-bottom:20px;} div#video-block div#site-meta-data div#meta-descri {background: url(/images/a5-cabriolet/separator.gif) no-repeat 0 bottom;} div#video-block div#site-meta-data div.block p {font-size:1.2em; line-height:1.4em;} div#video-block div#site-meta-data div#meta-more div.block {float:left; width:50%;} /*================================================== Contents elements #2 ==================================================*/ div#live-text {} div#live-text div#live-feed {float:left; width:630px; margin-top:20px;position:relative;} div#live-text div#live-feed {} div#live-text div#live-feed h2 {float:left; width:200px;} div#live-text div#live-feed ul.pagination {float:right; width:70px; text-align:right; height:20px;} div#live-text div#live-feed ul.pagination li {display:inline;} div#live-text div#live-feed ul.pagination li a {float:left; height:20px; width:20px; margin-right:5px;} div#live-text div#live-feed ul.pagination li a span {display:none;} div#live-text div#live-feed ul.pagination li.page-up a {background: url(/images/a5-cabriolet/btn-up-on.gif) no-repeat 0 0;} div#live-text div#live-feed ul.pagination li.page-down a {background: url(/images/a5-cabriolet/btn-down-on.gif) no-repeat 0 0;} div#live-text div#live-feed div.mask {position:absolute; z-index: 1500; height:100px; background: url(/images/a5-cabriolet/mask.png) no-repeat 0 0; width:100%; bottom:20px;} div#liveMessagesPaneContainer {overflow: hidden; width: 630px; height: 550px; position: relative; } div#liveMessagesPaneContainer div.live-messages-container {position: absolute;} div#liveMessagesPaneContainer div.live-message {width: 630px; background: url(/images/a5-cabriolet/separator2.gif) no-repeat 50% bottom; padding:10px 0;} div#liveMessagesPaneContainer div.live-message p.message-time {float:left; width:70px;} div#liveMessagesPaneContainer div.live-message p.message-time span.hour-container {display:block; background: url(/images/a5-cabriolet/bg-date.gif) no-repeat 0 0; width:60px; height:24px; margin-left:10px; font-size:1.8em; font-weight: bold; text-align:center; color:#a7abb1; padding-top:6px;} div#liveMessagesPaneContainer div.live-message p.message-links {float:right; width:70px;} div#liveMessagesPaneContainer div.live-message div.message-content {margin:0 90px 0 90px; display:block; font-size:1.2em; line-height: 1.4em;} div#bottom-marger {height:20px;} div#live-text div#live-faq {float:right; width:310px; margin-top:20px;} div#live-text div#live-faq p {font-size:1.2em; line-height: 1.4em; margin-bottom:10px;} div.live-messages-container-adm div.live-message {width: 630px; background: url(/images/a5-cabriolet/separator2.gif) no-repeat 50% bottom; padding:10px 0;} div.live-messages-container-adm p.p-links {float:right; width:70px;} div.live-messages-container-adm div.live-message p.message-time {float:right; width:70px;} div.live-messages-container-adm div.live-message p.message-time span.hour-container {display:block; background: url(/images/a5-cabriolet/bg-date.gif) no-repeat 0 0; width:60px; height:24px; margin-left:10px; font-size:1.8em; font-weight: bold; text-align:center; color:#a7abb1; padding-top:6px;} div.live-messages-container-adm div.live-message {} /* ff hack */ @-moz-document url-prefix() { div#video-block div#video-holder div.video-stream div.stream-holder, div#video-block div#video-holder div.video-tvcm div.movie-holder { margin-top:-15px; } } /*================================================== footer ==================================================*/ div#footer{text-align: center;} div#footer div.footer-inner{text-align: left; padding:20px 0;} div#footer div.footer-inner p {color:#fff; font-size:1.2em; line-height: 1.4em;} div#footer div.footer-inner p.links {float:left;} div#footer div.footer-inner p.copyright {float:right;} div#footer a {color:#fff; text-decoration: none;} div#footer a:hover {text-decoration: underline;} /* message part */ form#addFormElement {margin-bottom:20px;} form#addFormElement label {display:block; margin:0 10px 10px 10px; font-size:1.2em; font-weight: bold; color:#fff;} form#addFormElement textarea { width:600px;height:60px; border:0; margin:0 0 0 10px; font-family: Arial, Helvetica, sans-serif; font-size:1.2em; line-height: 1.4em; border:3px solid #5d6269; padding:10px;} form#addFormElement div.submit {text-align:right; margin-top:10px;} form#addFormElement div.submit input {padding:3px 5px; font-size:1.4em; font-weight:bold;} /*================================================== THIS CAN BE DELETED, JUST FOR DEV ==================================================*/ .live-message p {display: block; float: left;} .live-message p.message-time {width: 40px;} .live-message p.message-content {width: 240px;} .live-message p.message-links {width: 40px;} /*================================================== countdown ==================================================*/ #countdown #header {background: 0; width:940px; margin: 0 auto;} #countdown #header h1{background: transparent url(/images/a5-cabriolet/countdown-logo.png) no-repeat 50% 0; width:940px; height:60px; margin: 0 auto; margin-top:60px;} #countdown div#content { background: 0; /*position:absolute; top: 50%; left: 50%;*/ width:900px; height:500px; /*margin-top: -250px; /*set to a negative number 1/2 of your height*/ /*margin-left: -450px; /*set to a negative number 1/2 of your width*/ text-align:center; margin: 0px auto; } h2#coming-soon {text-indent:-999em; height:18px; background: transparent url(/images/a5-sb/coming-soon.png) no-repeat 0 0; margin:-100px 230px 20px 230px;} #countdown div#content p {font-size: 1.4em; line-height: 1.4em; text-align:left; margin:0 250px 10px 250px;} #countdown ul#links {margin:20px 250px 10px 250px;} #countdown ul#links li{display:inline;} #countdown ul#links li img{display:inline; float:left; margin-right:10px; width:100px; height:101px;} #countdown ul#links li.qr img{width:170px;}