/*
Qwest Business - Referral Program
Author: MarketingLab
Author URI: http://www.mymarketinglab.com
version: 1.0
*/

/* RESET 
_______________________________________________________________________________________________________________________________ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}

/* remember to define focus styles! */
:focus {outline:0;}
body {line-height:1; color:#333; background:#999 url(../img/bg-body.gif) repeat-x; font-family:Arial, Helvetica, sans-serif;}
ol, ul {list-style:none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}

strong {font-weight:bold;}


/* GLOBAL 
_______________________________________________________________________________________________________________________________ */
/* TYPOGRAPHY */
h1 {font-weight:bold; font-size:1.5em; color:#333; margin-bottom:6px;}
h2 {}
h3 {font-weight:bold; font-size:1.16em; color:#333;}
h4 {}
h5 {}
h6 {font-weight:bold; margin-bottom:6px;}

p {font-size:.9em; line-height:1.2em;}

a:link {color:#CC6600; font-size:1.0em; text-decoration:underline;}
a:visited {color:#CC6600; font-size:1.0em; text-decoration:underline;}
a:hover {color:#CC6600; font-size:1.0em; text-decoration:underline;}
a:active {color:#CC6600; font-size:1.0em; text-decoration:underline;}

small {font-size:.75em;}

.error {margin:0; padding:4px 12px; color:#F00; font-size:.75em; text-align:center;}
	.error a:link, .error a:visited, .error a:hover, .error a:active {color:#F00; text-decoration:underline;}
.important {color:#CC6600; font-size:11px;}

/* COLORS */
.green {color:#C1D72E;}
.orange {color:#CC6600;}

/* TABLES */
td {padding:6px 6px 12px 6px; vertical-align:top;}

/* FORMS */
.form-text-area {padding:4px; font-family:Arial, Helvetica, sans-serif; font-size:1.1em;}
.form-text-field {height:16px; padding:4px; font-family:Arial, Helvetica, sans-serif; font-size:1.1em;}
.form-button {margin:4px; padding:8px; color:#FFF; background:#333; border:none; cursor:pointer;}
	.form-button a:hover {background:#666;}

/* POSITIONING */
.spacing {padding-top:12px;}

.left {float:left;}
.right {float:right;}
.clear {clear:both;}

.alignleft {text-align:left;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}




/* LAYOUT
_______________________________________________________________________________________________________________________________ */
#layout {width:100%; height:100%; background:url(../img/bg-layout.jpg) left top no-repeat;}
#layout-main {width:830px; height:auto; margin:0 auto;}
#layout-header {padding-top:24px;}
	#header-nav {width:auto; height:25px; margin:12px 0 0 0;}
#layout-content {background:#FFF; border:4px solid #000; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;}
#layout-footer {width:100%; margin:36px auto; text-align:center;}
	
/* NAVIGATION 
_______________________________________________________________________________________ */
#nav-main {width:auto; height:auto; float:right;}
ul.nav-main {position:relative; width:685px; height:25px; list-style-type:none; font-size:14px; text-align:center; line-height:170%;}
ul.nav-main a {width:auto; height:25px; display:block; overflow:hidden; color:#FFF; text-decoration:none;}			   
	li.nav-main-button {position:relative; top:0px; left:0; width:100px; height:25px; float:left; background:url(../img/navigation/nav-button.gif) no-repeat 0 0;}
	li.nav-main-button-lg {position:relative; top:0px; left:0; width:140px; height:25px; float:left; background:url(../img/navigation/nav-button.gif) no-repeat 0 0;}
	
	li.nav-main-button a:hover {background:url(../img/navigation/nav-button.gif) no-repeat 0 -25px;}
	li.nav-main-button-lg a:hover {background:url(../img/navigation/nav-button.gif) no-repeat 0 -25px;}
	
	li.nav-main-corner-lt {position:relative; width:auto; height:25px; float:left;}
	li.nav-main-corner-rt {position:relative; width:auto; height:25px; display:inline; float:left;}
	
	
/* CONTENT
_______________________________________________________________________________________ */
.content-single-column {width:auto; height:auto; padding:12px 36px;}
	.content-logo {width:491px; height:135px; margin:0 auto; padding:4px 0 40px 0;}
	.content-single-column .intro {padding:0 0 12px 0;}
	.content-single-column .button {margin:12px 0;}
	.content-single-column .brackets {width:172px; height:64px; float:right; margin:6px 0 0 0; padding:12px 36px; background:url(../img/brackets.gif) no-repeat;}
	
	.content-welcome, .content-legal {padding:12px;}
		.content-welcome p, .content-legal p {margin-bottom:12px;}
		
	.content-legal .table-indent-1 {margin-left:48px;}
	.content-legal .table-indent-2 {margin-left:68px;}
	
	.form-box-sm {width:500px; height:auto; margin:0 auto 24px auto;padding:12px; background:#CCC; border:1px solid #999; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
		.form-box-sm table {margin:0 auto;}
		.form-box-sm p {margin:0;}
	
	.form-box-lg {width:100%; height:auto; position:relative; margin:0 auto 24px auto; padding:12px 0; background:#CCC; border:1px solid #999; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
		.referral-form {padding:0 12px 6px 12px;}

/* TABS */
.referral-tabs {margin:24px 0; clear:both;}
	ul.tabNavigation {list-style:none; margin:0 0 0 6px; padding:0;}
	ul.tabNavigation li {display:inline;}
	ul.tabNavigation li a:link {padding:3px 5px; background-color:#333; color: #FFF; text-decoration:none; padding-top:7px; border-top-left-radius:5px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; border-top-right-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;}
	ul.tabNavigation li a.selected {background-color:#333; color:#FFF; padding-top:7px;}
	ul.tabNavigation li a:hover {background-color:#333; color:#FFF; padding-top:10px;}
	ul.tabNavigation li a:focus {outline:0;}

	div.referral-tabs > div {padding:5px; margin-top:3px; border:3px solid #333; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
	div.referral-tabs > div h2 {margin-top:0;}

	#first {background-color: #f00;}
	#second {background-color: #0f0;}
	#third {background-color: #00f;}
	.waste {min-height: 1000px;}

/* FAQ */		
	.list-faq {margin:12px 12px 36px 24px;}
		.list-faq li {padding-bottom:12px;}
	.question {padding-top:24px; border-top:1px solid #333;}
	.answer {padding-bottom:24px;}
		.answer-indent {padding-bottom:6px;}
	.indent {margin-left:48px;}
		.indent-last {margin-left:48px; padding-bottom:24px;}

	
/* FOOTER
_______________________________________________________________________________________ */
#layout-footer p {color:#000; font-size:.8em;}
#layout-footer a:link, #layout-footer a:visited, #layout-footer a:hover, #layout-footer a:active {color:#000; text-decoration:none;}

/* DISCLAIMER
_______________________________________________________________________________________ */
#layout-disclaimer p {color:#000; font-size:.8em;}
#layout-disclaimer a:link, #layout-disclaimer a:visited, #layout-disclaimer a:hover, #layout-disclaimer a:active {color:#000; text-decoration:none;}

/* EFFECTS
_______________________________*/

/* FADE THIS */
.fadeThis {position:relative; width:458px; height:101px; display:block; float:left; background:url(../img/button-lg-referral.gif) 0 0 no-repeat;}
.fadeThis * {display:none;}
.fadeThis span.hover {position:absolute; width:458px; height:101px; top:0; left:0; display:block; float:left; background:url(../img/button-lg-referral-hover.gif) 0 0 no-repeat;}

.fadeThis2 {position:relative; width:458px; height:101px; display:block; float:left; background:url(../img/button-lg-about.gif) 0 0 no-repeat;}
.fadeThis2 * {display:none;}
.fadeThis2 span.hover {position:absolute; width:458px; height:101px; top:0; left:0; display:block; float:left; background:url(../img/button-lg-about-hover.gif) 0 0 no-repeat;}