/* 

Click It or Ticket
screen css

*/


/***** reset styles *****/


* {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:normal;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
text-decoration:none;
}

:focus {
outline:0;
}

ol, ul {
list-style:none;
}

table {
border-collapse:separate;
border-spacing:0;
}


/***** body *****/


body, html {
text-align:center;
font:12px/1.3em "Arial",sans-serif;
color:#fff;
}

body {
min-height:1260px;
background:#000 url(/images/page-background.jpg) center top no-repeat;
}

body#speak-out {
background:#000;
}

a:hover {
text-decoration:underline;
}


/***** container *****/


#page {
margin:10px auto;
width:820px;
}

#main-container {
margin:0 0 15px;
min-height:1260px;
position:relative;
float:left;
text-align:left;
background:transparent url(/images/paper-background.png) center top no-repeat;
}


/***** header *****/


h1 {
position:absolute;
top:35px;
left:155px;
width:630px;
height:57px;
background:transparent url(/images/title-click-it-or-ticket.png) no-repeat;
z-index:5;
}


/***** container *****/


.container {
position:relative;
float:left;
}


/***** quiz *****/


#quiz {
top:81px;
left:110px;
width:665px;
height:440px;
}

ul.tabs {
display:none;
}

#introduction {
position:relative;
z-index:10;
width:665px;
height:440px;
}

#which-of-your-friends {
position: relative;
z-index:11;
top:-300px;
left:370px;
}

#introduction p a.next {
position: absolute;
top:433px;
left:4px;
width:510px;
height:36px;
background:transparent url(/images/btn-quiz.png) no-repeat;
}

#introduction p a.next:hover {
background-position:left bottom;
}

#introduction p a.virtual-valentine {
position:absolute;
bottom:60px;
right:5px;
width:87px;
height:20px;
background:transparent url(/images/btn-valentine.png) no-repeat;
}

#introduction p a.virtual-valentine:hover {
background-position:left bottom;
}

#introduction p a.virtual-valentine-2 {
position:absolute;
top:40px;
left:0;
width:400px;
height:315px;
}

#introduction p a.win-stuff {
position:absolute;
bottom:104px;
right:5px;
width:108px;
height:16px;
z-index: 50;
background:transparent url(/images/btn-prizes.png) no-repeat;
}

#introduction p a.win-stuff:hover {
background-position:left bottom;
}

#prizes p {
margin:0 0 12px 40px;
}

#prizes p strong {
font-weight:bold;
font-size:125%;
color:#50B854;
}

#sponsors li a {
position:absolute;
display:block;
height:70px;
top:308px;
}

li.gibson a {
width:95px;
right:250px;
}

li.state-farm a {
width:70px;
right:175px;
}

li.whataburger a {
width:80px;
right:90px;
}

li.buckle a {
width:104px;
right:-15px;
}

.question {
margin:0 0 0 50px;
}

fieldset {
float:left;
margin:104px 0 0;
}

.question p strong {
color:#e9c91e;
font-size:22px;
font-weight:bold;
line-height:1.1em;
}

.answers {
float:left;
margin:20px 0 0 10px;
}

.answers div {
float:left;
width:275px;
clear:left;
margin:0 0 10px;
}

.answers label {
width:255px;
float:left;
line-height:1.2em;
font-size:14px;
margin:-15px 0 0 22px;
}

.feedback {
width:250px;
float:left;
clear:left;
margin:0 0 0 10px;
font-size:13px;
}

.feedback p.incorrect strong {
color:#f00;
padding:7px 0 0 5px;
font-size:20px;
}

.feedback p.correct a {
display:block;
width:193px;
height:87px;
margin:7px 0 0;
background:transparent url(/images/quiz-correct.png) no-repeat;
}

.feedback p.correct a:hover {
background-position:left bottom;
}

.video {
position:absolute;
top:170px;
right:-35px;
float:left;
width:325px;
height:242px;
padding:25px 0 0 18px;
background:transparent url(/images/quiz-video-box.png) no-repeat;
}

#final {
margin:115px 0 0 100px;
}

#final h4 {
color:#50b854;
font-size:22px;
font-weight:bold;
margin:0 0 15px;
}

#final p.sign-up {
font-size:18px;
font-weight:bold;
margin:10px 0 5px;
}

#contest a {
color:#E9C91E;
font-size:13px;
padding:0 100px 0 0;
}

#final form {
width:440px;
height:220px;
padding:30px;
font-size:13px;
background:transparent url(/images/final-video-box.png) no-repeat;
}

#final p {
margin:5px 0 0 5px;
}

#final .your-score {
font-size:14px;
margin:0 0 4px;
}

#final .your-score strong {
padding:0 4px;
color:#f00;
font-size:16px;
}

#final .average-score {
font-size:12px;
}

#final table td {
padding:5px;
}

#final table td input {
padding:3px 4px;
color:#666;
}

#final table td.radio {
padding:8px 0;
}

#final table td.radio label {
float:left;
padding:0 10px 0 5px;
}

#final .submit {
font-size:16px;
margin:10px 0 0 5px;
}

#final .submit a {
color:#28c1ec;
}

#final .rules {
font-size:11px;
margin:8px 0 0 5px;
}

#final .rules a {
color:#999;
}

span.ui-radio {
display:block;
float:left;
width:13px;
height:13px;
background:url(/images/icon-quiz-radio.png) no-repeat;
}

span.ui-helper-hidden {
display:none;
}

span.ui-radio-state-hover {
background-position:0 -40px;
}

span.ui-radio-state-checked-disabled-hover,span.ui-radio-state-checked-disabled,span.ui-radio-state-checked, span.ui-radio-state-checked-hover {
background-position:0 -78px;
}

label.ui-radio-state-checked, label.ui-radio-state-checked:hover {
color:#f00;
}


/***** speak out *****/


#speak-out {
top:115px;
left:125px;
width:363px;
background:transparent url(/images/container-speak-out-footer.png) bottom no-repeat;
}

#speak-out .inner {
padding:75px 75px 10px 30px;
margin:0 0 31px;
background:transparent url(/images/container-speak-out2.png) no-repeat;
}

#seatbelt-love {
position: relative;
z-index:11;
top:-20px;
left:-20px;
margin-bottom: -20px;
}

#speak-out .excerpt {
padding:0 0 12px;
}

#speak-out h3 {
color:#50b854;
font-size:110%;
font-weight:bold;
margin:0 0 5px;
}

#speak-out p {
line-height:1.4em;
}

#speak-out p a {
color:#28c1ec;
margin:0 0 0 2px;
}

#speak-out p.submit {
font-weight:bold;
}

#speak-out p.submit strong {
font-weight:bold;
}

#actions a {
position:absolute;
display:block;
width:30px;
height:28px;
top:170px;
right:50px;
background:transparent url(/images/speak-out-arrows.png) no-repeat;
z-index:10;
cursor:pointer;
}

#actions a.prevPage:hover {
background-position:0 -40px;
}

#actions a.nextPage {
top:210px;
background-position:0 -120px;
}

#actions a.nextPage:hover {
background-position:0 -80px;
}

div.scrollable { 
position:relative; 
overflow:hidden; 
width:250px; 
height:240px; 
margin:10px 0 10px 0;
} 
 
div.scrollable div.items { 
position:absolute;  
height:20000em; 
}


/***** djs *****/


#djs {
top:98px;
left:62px;
width:382px;
background:transparent url(/images/container-dj-footer.png) bottom no-repeat;
}

#djs .inner {
padding:85px 35px 15px 135px;
margin:0 0 25px;
background:transparent url(/images/container-dj.png) no-repeat;
}

#djs li {
margin:0 0 6px;
}

#djs strong a {
color:#e9c91e;
font-weight:bold;
}

#djs a {
color:#28c1ec;
margin:0 5px 0 0;
}


/***** rollover convincer *****/


#rollover-convincer {
top:65px;
left:60px;
width:340px;
height:218px;
z-index:15;
background:transparent url(/images/rollover-convincer.png) no-repeat;
}

#rollover-convincer p a {
display:block;
width:340px;
height:218px;
background:transparent url(/images/rollover-convincer-link.png) no-repeat;
}

#rollover-convincer p a:hover {
background-position:left bottom;
}


/***** get connected *****/


#get-connected {
position:relative;
clear:both;
top:30px;
left:160px;
width:431px;
height:140px;
background:transparent url(/images/container-get-connected.png) no-repeat;
z-index:20;
}

#get-connected ul {
margin:86px 0 0;
}

#get-connected ul li, #get-connected ul li a {
float:left;
clear:left;
}

#get-connected ul li#connect-1, #get-connected ul li#connect-1 a {
width:431px;
height:30px;
}

#get-connected ul li#connect-1 a {
margin:0 0 6px;
background:transparent url(/images/get-connected-national-highway.png) no-repeat;
}

#get-connected ul li#connect-1 a:hover {
background-position:left -29px;
}

#get-connected ul li#connect-2, #get-connected ul li#connect-2 a {
width:245px;
height:22px;
}

#get-connected ul li#connect-2 a {
background:transparent url(/images/get-connected-teens-in-drivers-seat.png) no-repeat;
}

#get-connected ul li#connect-2 a:hover {
background-position:left bottom;
}


/***** 5-0 says *****/


#five-0-says {
margin:-5px 0 20px 100px;
width:700px;
height:140px;
color:#ee182c;
background:transparent url(/images/container-5-0-says.png) no-repeat;
}

#five-0-says ul {
float:left;
margin:83px 0 0 195px;
}

ul.marquee {
/* required styles */
display:block;
position:relative;
overflow:hidden;

/* optional styles for appearance */
width:335px;
height:22px; /* height should be included to reserve visual space for the marquee */

}

ul.marquee li {
/* required styles */
position:absolute;
top:-999em;
left:0;
display:block;
white-space:nowrap; /* keep all text on a single line */

/* optional styles for appearance */
padding:3px 5px;
}


/***** ecard *****/


#ecard-contestants {

}

#ecard-contestants .container {
position:relative;
float:none;
width:852px;
margin:10px auto;
background:transparent url(/images/container-ecard.png) no-repeat;
}

#video-ecard {
margin:368px 0 115px 40px;
}

#ecard-contestants h3 {
font-weight:bold;
color:#000;
margin:10px 0;
}

.form table {
margin:5px auto;
width:600px;
background:transparent url(/images/table-background.png) repeat;
padding:5px;
}

.form table tr td, .form table tr th {
text-align:left;
padding:3px;
}

.form table tr th {
font-weight:bold;
}

.form table tr td input {
padding:3px 4px;
color:#666;
}

#ecard-contestants p.btn-submit input {
font-size:16px;
margin:15px 0 0;
padding:4px 7px;
color:#000;
background-color:#fff;
}

#ecard-contestants p.btn-submit input:hover {
color:#f00;
}

#ecard-contestants span.ui-radio, #ecard-contestants label {
float:left;
}

#ecard-contestants label {
margin:0 10px 0 3px;
}

#ecard-contestants #errorExplanation {
width:600px;
padding:8px 0;
margin:5px auto;
background-color:#fff;
color:#f00;
}

#ecard-contestants #errorExplanation p {
font-weight:bold;
margin:0 0 5px;
}

#thanks h3 {
font-size:150%;
}

#thanks a {
color:#FBF019;
font-weight:bold;
padding:2px 5px;
background-color:#000;
}


/***** misc *****/


.nowrap {
white-space:nowrap;
}


/***** hide *****/


.hide, hr, h1 span, #menu, h2, .question h4, #introduction h4, #introduction p a span, #rollover-convincer span, #get-connected h3, #get-connected span, #footer, .ui-helper-hidden-accessible, #fancy_title, .feedback p.correct strong, .continue, #win-stuff h3, #win-stuff a span, #prizes ul, #prizes p, #actions a span, .valentine-message {
position:absolute;
top:0px;
left:-999px;
width:1px;
height:1px;
overflow:hidden;
}


/***** speak out *****/


#story {
color:#fff;
padding:20px 30px;
background:#000;
}

#story h1 {
display:none;
}

#story h2 {
color:#e9c91e;
font-size:18px;
font-weight:bold;
line-height:1.2em;
position:static;
width:auto;
height:auto;
overflow:auto;
}

#story #content {
margin:20px 0;
}

#story #content {
margin:13px 0;
line-height:1.5em;
}

#story .location {
color:#ccc;
}

#story form {
margin:20px 0 0;
text-align:left;
}

#story input.text-input, #story textarea {
padding:4px;
color:#666;
width:450px;
}

#story label {
display:block;
margin:14px 0 2px;
}

#story .submit input {
font-size:16px;
margin:15px 0 0;
background:none;
color:#28c1ec;
}

#story .submit input:hover {
color:#f00;
}

.thanks {
margin:50px 0 0;
}

html, body {
	height: 100%;
}

div#fancy_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: none;
	z-index: 30;
}

* html div#fancy_overlay {
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

div#fancy_wrap {
	text-align: left;
}

div#fancy_loading {
	position: absolute;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: none;
	overflow: hidden;
	background: transparent;
	z-index: 100;
}

div#fancy_loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 480px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_progress.png') no-repeat;
}

div#fancy_loading_overlay {
	position: absolute;
	background-color: #000;
	z-index: 30;
}

div#fancy_loading_icon {
	position: absolute;
	background: url('/javascripts/jquery.fancybox/fancy_loading.gif') no-repeat;
	z-index: 35;
	width: 16px;
	height: 16px;
}

div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 18px 18px 33px 18px;
    margin: 0;
    overflow: hidden;
    background: transparent;
    display: none;
}

div#fancy_inner {
	position: relative;
	width:100%;
	height:100%;
	border: 1px solid #fff;
	background: #000;
}

div#fancy_content {
	margin: 0;
	z-index: 100;
	position: absolute;
}

div#fancy_div {
	background: #000;
	color: #FFF;
	height: 100%;
	width: 100%;
	z-index: 100;
}

img#fancy_img {
	position: absolute;
	top: 0;
	left: 0;
	border:0; 
	padding: 0; 
	margin: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
}

div#fancy_close {
	position: absolute;
	top: -12px;
	right: -15px;
	height: 30px;
	width: 30px;
	background: url('/javascripts/jquery.fancybox/fancy_closebox.png') top left no-repeat;
	cursor: pointer;
	z-index: 181;
	display: none;
}

#fancy_frame {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
}

#fancy_ajax {
	width: 100%;
	height: 100%;
	overflow: auto;
}

a#fancy_left, a#fancy_right {
	position: absolute; 
	bottom: 0px; 
	height: 100%; 
	width: 35%; 
	cursor: pointer;
	z-index: 111; 
	display: none;
	background-image: url(data:image/gif;base64,AAAA);
	outline: none;
}

a#fancy_left {
	left: 0px; 
}

a#fancy_right {
	right: 0px; 
}

span.fancy_ico {
	position: absolute; 
	top: 50%;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	z-index: 112; 
	cursor: pointer;
	display: block;
}

span#fancy_left_ico {
	left: -9999px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_left.png') no-repeat;
}

span#fancy_right_ico {
	right: -9999px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_right.png') no-repeat;
}

a#fancy_left:hover {
  visibility: visible;
}

a#fancy_right:hover {
  visibility: visible;
}

a#fancy_left:hover span {
	left: 20px; 
}

a#fancy_right:hover span {
	right: 20px; 
}

.fancy_bigIframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

div#fancy_bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 70;
	border: 0;
	padding: 0;
	margin: 0;
}
	
div.fancy_bg {
	position: absolute;
	display: block;
	z-index: 70;
	border: 0;
	padding: 0;
	margin: 0;
}

div.fancy_bg_n {
	top: -18px;
	width: 100%;
	height: 18px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_shadow_n.png') repeat-x;
}

div.fancy_bg_ne {
	top: -18px;
	right: -13px;
	width: 13px;
	height: 18px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_shadow_ne.png') no-repeat;
}

div.fancy_bg_e {
	right: -13px;
	height: 100%;
	width: 13px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_shadow_e.png') repeat-y;
}

div.fancy_bg_se {
	bottom: -18px;
	right: -13px;
	width: 13px;
	height: 18px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_shadow_se.png') no-repeat;
}

div.fancy_bg_s {
	bottom: -18px;
	width: 100%;
	height: 18px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_shadow_s.png') repeat-x;
}

div.fancy_bg_sw {
	bottom: -18px;
	left: -13px;
	width: 13px;
	height: 18px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_shadow_sw.png') no-repeat;
}

div.fancy_bg_w {
	left: -13px;
	height: 100%;
	width: 13px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_shadow_w.png') repeat-y;
}

div.fancy_bg_nw {
	top: -18px;
	left: -13px;
	width: 13px;
	height: 18px;
	background: transparent url('/javascripts/jquery.fancybox/fancy_shadow_nw.png') no-repeat;
}

div#fancy_title {
	position: absolute;
	bottom: -33px;
	left: 0;
	width: 100%;
	z-index: 100;
	display: none;
}

div#fancy_title div {
	color: #FFF;
	font: bold 12px Arial;
	padding-bottom: 3px;
}

div#fancy_title table {
	margin: 0 auto;
}

div#fancy_title table td {
	padding: 0;
	vertical-align: middle;
}

td#fancy_title_left {
	height: 32px;
	width: 15px;
	background: transparent url(fancy_title_left.png) repeat-x;
}

td#fancy_title_main {
	height: 32px;
	background: transparent url(fancy_title_main.png) repeat-x;
}

td#fancy_title_right {
	height: 32px;
	width: 15px;
	background: transparent url(fancy_title_right.png) repeat-x;
}