/* -------------------------------------------------------------------------------------- + + Steven Ripple Associates + + = CVGM Layout + -------------------------------------------------------------------------------------- */ /* = IMPORTING STUFF AND SETTING DEFAULT STYLES -------------------------------------------------------------------------------------- */ @import url("reset.css"); /* = LAYOUT -------------------------------------------------------------------------------------- */ html{ background: #161616 url(../../pages/pictures/background-2.jpg) top right no-repeat; background-attachment:fixed;} body{ background: url('../images/content-bg.png') top left no-repeat; background-attachment:fixed; overflow: hidden; } #wrapper{ width: 860px; padding: 0 20px; position: relative; } #bg-images{ display: none;} a:link { color: #c1ffb9; font-size: large; background-color: transparent; } a:visited { color: #ff8dff; font-size: large; background-color: transparent; } /* = HEADER ---------------- */ ul#header{ list-style: none; position: relative; width: 990px; height: 145px; } ul#header li{ float: left; display: block; margin-right: 19px; border-left: 1px solid #313232; width: 252px; padding-left: 10px; color: #fff; position: relative; height: 133px; padding-top: 12px; } ul#header li h2{ font-size: 14px; color: #fff; text-transform: uppercase; margin: 0 0 8px; line-height: 22px;} ul#header li p, ul#header li cite, ul#header li hours{ font-size: 12px; margin: 0; padding: 0; } ul#header li cite, ul#header li hours{ font-style: normal; } ul#header li hours{ margin-bottom: 10px;} ul#header li a.link, a#goto-contact { background:#d70101; color: #fff; display: inline-block; font-size: 11px; line-height: 11px; padding: 4px 8px; text-decoration: none; position: absolute; bottom: 0; font-weight: bold; left: 10px;} ul#header li a.link:hover, a#goto-contact:hover{ background:#fff; color: #d70101;} ul#header li ul{ list-style: none;} ul#header li ul li{ border-left: none; width: auto; padding: 0; margin: 0;} ul#header li.contact{ font-weight: bold; width: 125px; } ul#header li.comments{ width: 367px;} ul#header li.twitter{ width: 242px;} ul#header li.logo{ width: 84px; border-left: none; padding-left: 0; margin-top: -12px;} ul#header li.logo h1 a{ position:fixed; display:block; width: 144px; height: 145px; background: url('../images/logo.png') no-repeat; text-indent: -9999px; z-index: 980;} /* + Twitter implementation */ div#tweet{ display: block;} div#tweet a{ color: #a4a6a6; display: inline !important; white-space:normal;} div#tweet a:hover{ color: #fff;} ul.tweet_list li{ display: block; float: none; width: 100% !important; overflow: hidden;} /* + Slider nav */ ul#comments li{ height: 105px; background: transparent !important;} ul#comments li cite{ height: 80px; overflow: hidden; display: block;} ul#comments li p{ bottom: 2px; position: absolute;} a#prev, a#next{ display: block; position: absolute; background: url('../images/slider-arrows.png') no-repeat; position: absolute; bottom: 4px; width: 15px; height: 14px; text-indent: -9999px; z-index: 990;} a#prev{ right: 5px; background-position: top right;} a#prev:hover{ background-position: bottom right;} a#next{ right: 25px; background-position: top left;} a#next:hover{ background-position: bottom left;} /* = CONTENT ---------------- */ #content{ padding: 80px 0 60px 20px; } #content h2{ position: relative; padding-top: 10px; display: block; cursor: pointer; } #content h2.music{ width: 200px;} #content h2.music a{ width:200px; background: url('../images/music.png') top left no-repeat;} #content h2.specialevents{ width: 500px;} #content h2.specialevents a{ width:500px; background: url('../images/specialevents.png') top left no-repeat;} #content h2.other{ width:634px;} #content h2.other a{ width:634px; background: url('../images/other.png') top left no-repeat;} #content h2.forourvendors{ width:600px;} #content h2.forourvendors a{ width:600px; background: url('../images/forourvendors.png') top left no-repeat;} #content h2.customers{ width:443px;} #content h2.customers a{ width:443px; background: url('../images/customers.png') top left no-repeat;} #content h2 a{ color: #fff; font-size: 64px; text-decoration: none; font-weight: normal; margin: 0; padding: 0; line-height: 64px; text-indent: -9999px; height: 60px; display: block;} #content h2 span.desc{ display: none; color: #fff; font-size: 15px; font-weight: bold !important;} #content h2 a.selected{ display: none; color: #d70101; background-position: bottom left;} #content h2 a.hovered{ display: none; color: #ccc;} #content h2.ui-state-active a, #content h2.ui-state-hover a{ display: none;} #content h2.ui-state-hover a.hovered{ display: block;} #content h2.ui-state-active a.hovered{ display: none;} #content h2.ui-state-active a.selected{ display: block;} #content h2.ui-state-hover span.desc, #content h2.ui-state-active span.desc{ display: block; color: #fff; font-size: 15px; line-height: 15px; position: absolute; left: 0; top: 30px; cursor: pointer;} /* + Accordions content */ #content div{ padding: 0 35px 0 10px; background: url('../images/separator.png') bottom right no-repeat; position: relative; width: 800px;} #content div h3{ font-size: 15px; color: #999;} #content div p, #content ul li{ color: #e0e0e0;} #content div a.close-acc{ position: absolute; right: 10px; bottom: 1px; background: url('../images/close-bg.png') top left no-repeat; display: block; width: 70px; height: 45px; text-indent: -9999px; cursor: pointer;} #content div a.close-acc span{ background: url('../images/close-arrow.png') no-repeat; display: block; width: 70px; height: 45px;} #content div{ overflow: hidden;} #content div.full h3, #content div.full ul{ width: 430px !important; padding-left: 20px;} #content div.full ul{ padding-bottom: 15px; margin-left: 13px;} ul.twoCols{ list-style: none; height: 220px; overflow: hidden;} ul.twoCols li{ display: block; position: absolute;} ul.twoCols li.first{ width: 420px; padding-left: 20px;} ul.twoCols li.last{ width: 320px; padding-left: 30px; left: 470px;} ul#twoCols li a.link, a#newsletter { background:#d70101; color: #fff; display: inline-block; font-size: 11px; line-height: 11px; padding: 4px 8px; text-decoration: none; position: absolute; bottom: 0; font-weight: bold; left: 30px;} ul#twoCols li a.link:hover, a#newsletter:hover{ background:#fff; color: #d70101;} ul.twoCols li ul{ list-style: none;} ul.twoCols li ul li{ width: 100%; clear: both; padding-left: 0; padding-left: 16px; background: url('../images/certificate.gif') 0px 3px no-repeat; margin-bottom: 8px; position: relative; left: auto;} /* = FOOTER ---------------- */ #footer{ background: url('../images/footer-bg.png') top left repeat-x; clear: both; display: block; padding: 15px 0px; position: relative;width: 100%;} #footer h3{ margin-left: 20px; color: #7d8080; font-size: 11px; line-height: 20px; font-weight: normal; margin-bottom: 8px;} #footer h3 a:link {font-size: large;} #footer h3 a:visited {font-size: large;} /* + Partners tabs */ ul#tabs{} ul#tabs li{ display: inline-block; line-height: 12px; height: 12px; background: url('../images/tab-arrows.png') right 2px no-repeat; margin-right: 12px;} ul#tabs li.ui-state-active{ background-position: bottom right;} ul#tabs li a{ color: #282929; font-weight:bold; text-decoration: none; padding-right: 14px;} ul#tabs li.ui-state-active a{ color: #d70101 !important;} ul#tabs li.ui-state-active a:hover{ text-decoration: line-through;} .ui-tabs-panel{ display: block !important; } .ui-tabs-hide { display: none !important; } div#partners{ margin-left: 20px; width: 460px;} div#partners div{ padding-top: 10px;} div#partners div a{ float: left; margin-right: 15px;} div#partners div a img{border: 1px solid #ccc;} div#partners div a:hover img{ border-color: #d70101;} div#partners p{ margin: 0; padding: 0; font-size: 11.22px; color: #282929;} /* + Contact form */ #contact{} #contact a:link {color: #009900; font-size: small;} #contact a:visited {color: #87d287; font-size: small;} #contact a:hover {color: #333333;} #contact a:focus {color: #333333;} #contact a:active {color: #009900;} #contact h3{ padding: 0; margin: 0;} #contact h3 a{ display: block; position: absolute; right: 0; margin: 0; border-left: 1px solid #dadada; height: 100%; top: 0; font-size: 17px; color: #282929; font-weight: bold; text-decoration: none; width: 574px; padding: 0 20px; background: transparent url('../images/contact-arrows.png') -20px 50% no-repeat;} #contact h3 a:hover{ color: #d70101; background: #fff url('../images/contact-arrows.png') -20px 50% no-repeat;} #contact h3 a.active{ background: #fff url('../images/contact-arrows.png') -270px 50% no-repeat;} div#popup{ background: #fff; position: absolute; right: 0; bottom: 77px; border-bottom: 1px solid #dadada; width: 574px; padding: 20px;} ul.cols{ list-style: none;} ul.cols li{ width: 272px; float: left; display: block; height: 325px;} ul.cols li.first{ padding-right: 14px; border-right: 1px dotted #cccccc;} ul.cols li.last{ padding-left: 15px;} ul.cols li h2{ font-size: 15px; line-height: 15px;} ul.cols li ul.addr{ padding-bottom: 10px;} ul.cols li ul.addr li{ font-size: 11px; float: left; height: auto; display: block; margin: 0; padding: 0; border: none;} ul.cols li ul.addr li.first{ width: 106px !important;} ul.cols li ul.addr li.last{ width: 156px !important; padding-left: 8px;} div#gmaps{ background: url('../images/gmaps.png') bottom left no-repeat; width: 266px; height: 196px; padding: 5px; overflow: hidden;} div#gmaps:hover{ background-position: top left;} div#gmaps iframe div#copyright{ display: none !important;} div#popup form{ position: relative;} div.input-holder{ background: url('../images/form-input.png') top left no-repeat; position: relative; width: 272px; height: 30px; margin-bottom: 10px; } div#popup form div.input-holder label, div.message-holder label{ display: inline; color: #000; font-weight:bold;} div#popup form div.input-holder label{ position: relative; top: 6px; left: 10px; } div#popup form div.input-holder input{ background: transparent; border: none; height: 14px; line-height: 14px; position: absolute; right: 10px; display: block; top: 8px; color: #000; font-weight:bold;} div.message-holder{ background: url('../images/form-textarea.png') top left no-repeat; display: block; width: 272px; height: 161px;} div#popup form div.message-holder label{ top: 10px; left: 10px; position: relative;} div#popup form div.message-holder textarea{ width: 254px; height: 120px; border: 0; background: transparent; padding: 9px;} div.input-holder.focus, div.message-holder.focus{ background-position: bottom left;} div#feedback{ position: absolute; bottom: -3px;} #feedback p { font-size: 11px; margin: 0;} .error, .notice, .success {padding: 0 0.8em; height: 26px; line-height: 26px; margin-bottom:1em;border:2px solid #ddd;} .error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;} .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;} .success {background:#E6EFC2;color:#264409;border-color:#C6D880;} div#popup form button{ text-transform: uppercase; background: #d70101; font-size: 12px; font-weight: bold; padding: 3px 10px; margin-top: 10px; border: 0; color: #fff; width: 60px; text-align: center; border: 1px solid #d70101; cursor: pointer;} div#popup form button:hover, div#popup form button.hover{ color: #d70101 !important; background: #fff;} a#popup-hide{ position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; display: block; background: url('../images/popup-close.png') top right no-repeat; text-indent: -9999px;} a#popup-hide:hover{ background-position: bottom left;} h2#copyright{ background: #ccc; height: 26px; line-height: 26px; text-align: center; font-weight: normal; font-size: 10px; color: #666; padding: 0; margin: 0; width: 100%; z-index: 10; position: relative;} h2#copyright a{ color: #666; text-decoration: none;}