﻿/* CSS - Scottish Provident - High Wire */
/* Copyright LEWIS Creative Consultants 2009 */
/* Global Styles */

/*////////////////////////////////////*/
/* ---- =RESET --*/

* { font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; }
img { overflow: hidden; display: block; }
ul { list-style: none; }
ol { list-style-position: inside; }
object, embed { visibility: visible !important; display: block; }

/*////////////////////////////////////*/
/* ---- =GLOBALS --*/

body { font: normal normal normal 0.69em Arial, Helvetica, sans-serif; color: #666; background: #D0C8BB url(../Images/bgBodyGold.jpg) repeat-x scroll left top; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; line-height: 1.4em; color: #89764C; font-weight: normal; }
h1 { font-size: 2.8em; }
h2 { font-size: 1.6em; color: #999; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.3em; font-weight: bold; }
p { margin-bottom: 15px; line-height: 1.4em; }
p.tiny { font-size: 1.1em !important; }
.contentMidLeftFloat { float: left; }
.contentMidLeft ul { margin: 30px 0px 30px 0px; padding-left: 30px; }
.contentMidLeft ul li { margin-bottom: 8px; padding-left: 15px; background: transparent url(../Images/bgBullet.gif) no-repeat scroll left 4px; }
strong { font-weight: bold; }
small { font-size: 0.8em; }
input, textarea, select { padding: 4px; font-family: Arial, Helvetica, sans-serif; border: solid 1px #ccc; color: #666; background: #fff url(../Images/bgInput.gif) repeat-x scroll left top; font-size: 1.0em; }
textarea, select { background: #fff; }
input:hover, input:active, input:focus, textarea:hover, textarea:active, textarea:focus, select:hover, select:active, select:focus { border-color: #001D68; color: #001D68; }
a, a:hover, a:visited, a:active, a:focus { color: #A39161; text-decoration: none; font-weight: bold; }
a:hover { cursor: pointer !important; }

.contentMidLeft a { text-decoration: underline !important; }
.contentMidRight a { font-weight: bold; color: #4F4F4F !important; }

/*////////////////////////////////////*/
/* ---- =CLASSES --*/

/* universal clearfix hack */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.clear { clear: both; overflow: hidden; height: 0px; margin-top: -1px; }
.hide { position: absolute; left: -9999em; }
.dn { display: none; }
.seperator { margin: 15px 0px 15px 0px; background: transparent url(../Images/dividerGold2.gif) repeat-x scroll left center; }
.seperatorGrey { background-image: url(../Images/dividerGold.gif) !important; }
.imgLeft { margin: 0px 10px 10px 0px; float: left; }
.plum { color: #4D2E3D !important; }
.navy { color: #001D68 !important; }
.errorMessage { color: #FF0000 !important; margin: 0 0 30px 100px; }
.plumBold { font-weight: bold !important; color: #4D2E3D !important; font-size: 2.4em !important; }
.navyBold { font-weight: bold !important; color: #001D68 !important; margin-bottom: 10px !important; }
.mt0 { margin-top: 0px !important; }
.mr0 { margin-right: 0px !important; }
.mb0 { margin-bottom: 0px !important; }
.mb05 { margin-bottom: 5px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb40 { margin-bottom: 40px !important; }
.big { font-size: 1.3em; }
p.block { overflow: auto; }
.winner { margin-top: 15px; }
.winner p { font-size: 0.8em; }

.pb0 { padding-bottom: 0 !important; }
.bn { background: none !important; }

.rabbit { padding-bottom: 645px !important; background: transparent url(../Images/bgRabbit.png) no-repeat scroll center bottom !important; }

/*////////////////////////////////////*/
/* ---- =LAYOUT --*/
.outer { padding-bottom: 70px; float: left; width: 100%; height: 100%; background: transparent url(../Images/bgCastle.png) repeat-x scroll left bottom; position: relative; z-index: 1; }
.inner { float: left; width: 100%; height: 100%; background: transparent url(../Images/bgBirds.png) no-repeat scroll center 400px; position: relative; z-index: 2; }
.wrapper { margin: 0 auto; width: 800px; }
.header { float: left; width: 800px; position: relative; }
.logo { position: absolute; top: 35px; right: -80px; z-index: 9; }
.header h1 { margin-top: 137px; float: left; width: 800px; height: 130px; background: transparent url(../Images/bgH1Gold.gif) no-repeat scroll left top; text-indent: -9999em; }
.content { margin-top: 20px; float: left; width: 800px; position: relative; z-index: 3; }
.contentTop { float: left; display: block; width: 800px; height: 5px; background: transparent url(../Images/bgContentTop.png) no-repeat scroll left top; overflow: hidden; }
.contentBottom { float: left; display: block; width: 800px; height: 5px; background: transparent url(../Images/bgContentBottom.png) no-repeat scroll left top; overflow: hidden; }
.contentMid { padding: 40px 40px 0 40px; float: left; width: 720px; background: #fff; }

.contentMidRight { margin: 0px 0px 30px 40px; float: right; width: 220px; background: #DED7C3 url(../Images/bgRightTopGold.jpg) no-repeat scroll left top; }

.contentMidRightMid { padding: 20px; float: left; width: 180px; background: url(../Images/bgRightBotGold.jpg) no-repeat scroll left bottom; color: #4F4F4F; }

.contentMidRightMid p.heading { font-size: 1.7em; color: #89764C; }
.contentMidLeft ul { margin: 30px 0px 30px 0px; padding-left: 30px; }
.contentMidLeft ul li { margin-bottom: 3px; padding-left: 15px; background: transparent url(../Images/bgBullet.gif) no-repeat scroll left 4px; }
.contentMidRightMid li { float: left; width: 180px; }

.imgWireMan { padding-bottom: 50px; background: #fff url(../Images/imgWireMan.jpg) no-repeat scroll left bottom; }
.imgRabbit { background: #fff url(../Images/imgRabbit.jpg) no-repeat scroll left bottom; }
.imgCastle { background: #fff url(../Images/imgCastle.jpg) no-repeat scroll right bottom; }

/*////////////////////////////////////*/
/* ---- =FOOTER --*/

.bot { margin: 0 auto; width: 800px; }

.footer { padding: 30px 40px; float: left; width: 720px; border-top: solid 2px #A8996E; color: #999; background: #fff; }
.footer ul { float: left; }
.footer ul li { margin-right: 20px; float: left; display: inline; }
.footer ul li a { padding-left: 7px; float: left; background: transparent url(../Images/bgArrowGrey.gif) no-repeat scroll left 5px; color: #999 !important; font-weight: normal; }
.footer ul li a:hover { color: #666 !important; }
.footer small { margin-top: 35px; float: left; width: 720px; }
.logoFooter { float: right; }

/*////////////////////////////////////*/
/* ---- =IMAGE FADE --*/
#imgFade { margin: 0px 0px 20px 30px; padding: 25px 20px 25px 20px; float: right; width: 300px; height: 200px; overflow: hidden; background: transparent url(../Images/bgFade.gif) no-repeat scroll left top; }

/*////////////////////////////////////*/
/* ---- =COMPONENTS --*/
/* ---- =Home Carousel --*/
.carouselWrapper { float: left; width: 720px; padding-bottom: 30px; background: transparent url(../Images/bgCarousel.gif) no-repeat scroll left bottom; }
.carousel, .carousel ul li { float: left; width: 674px; height: 126px; overflow: hidden; }

a.prev { float: left; display: block; background: transparent url(../Images/btnCarouselGold.gif) no-repeat scroll left top; width: 23px; height: 126px; text-indent: -9999px; }
a.next { float: left; display: block; background: transparent url(../Images/btnCarouselGold.gif) no-repeat scroll left -252px; width: 23px; height: 126px; text-indent: -9999px; }
a:hover.prev { background-position: left -126px; }
a:hover.next { background-position: left bottom !important; }

/* ---- =Tooltip --*/
#toolTipNext, #toolTipPrev { width: 154px; height: 40px; line-height: 30px; font-size: 0.9em; color: #4D2E3D; font-weight: bold; background: transparent url(../Images/bgTooltipGold.png) no-repeat scroll left top; text-align: center; z-index: 9999999; }

/*////////////////////////////////////*/
/* ---- =LISTINGS--*/
.lit { padding-bottom: 260px; float: left; width: 720px; }
.lit li.litFirst { margin-top: 0px; background: transparent none; }
.lit h3 { margin-bottom: 0px; font-size: 2em; }
.lit li.space { padding-top: 50px; }
.lit li { margin-top: 20px; padding-top: 20px; float: left; width: 720px; background: transparent url(../Images/dividerGold.gif) repeat-x scroll left top; }
.litImage { margin-right: 15px; padding-left: 10px; float: left; width: 120px; }
.lit strong { margin: 10px 0px 5px 0px; float: left; width: 570px; color: #89764C; font-size: 1.4em; }
.lit em { margin-bottom: 22px; float: left; width: 570px; color: #89764C; }

.litContent { float: left; width: 570px; }

.press { margin-top: 20px; padding: 30px 0 220px 0; float: left; width: 720px; background: transparent url(../Images/dividerGold.gif) repeat-x scroll left top; }
.press li { float: left; width: 720px; }

/*////////////////////////////////////*/
/* ---- =HYPERLINKS --*/
a.btn { padding-left: 25px; float: left; display: block; background: transparent url(../Images/btnLeft.png) no-repeat scroll left top; height: 25px; line-height: 25px; font-size: 0.9em; cursor: pointer; }
a.btn span { padding-right: 10px; float: left; display: block; background: transparent url(../Images/btnRight.png) no-repeat scroll right top; color: #fff; text-transform: uppercase; }
/*a:hover.btn { background-position: 0% -488px; }
a:hover.btn span { background-position: 100% -488px; }
a:active.btn { background-position: 0% bottom; }
a:active.btn span { background-position: 100% bottom; color: #333 !important; }*/

a:hover, a:hover span { text-decoration: underline !important; }

a.btnNext { display: block; background: transparent url(../Images/btnNext.png) no-repeat scroll left top; padding-left: 20px; width: 131px; height: 48px; line-height: 40px; color: #fff !important; font-weight: bold; font-size: 1.2em; position: absolute; bottom: 36px; right: 0px; }
a.btnPrev { display: block; background: transparent url(../Images/btnPrev.png) no-repeat scroll left top; padding-left: 50px; width: 101px; height: 48px; line-height: 40px; color: #fff !important; font-weight: bold; font-size: 1.2em; position: absolute; bottom: 36px; left: 0px; }

a.arrowGold { padding-left: 10px; float: left; background: transparent url(../Images/bgArrowGold.gif) no-repeat scroll left 4px; color: #A8996E !important; }

.contentMarg { padding-bottom: 300px; }

/*////////////////////////////////////*/
/* ---- =KEY FINDINGS --*/

.keyFindings { margin: 30px 0 210px 0; float: left; width: 720px; height: 550px; overflow: hidden; position: relative; font-size: 1.1em; }

.keyFindings ul { float: left; width: 685px; font-size: 1.1em; border-left: solid 3px #000; background: #D5CBB3; position: relative; top: 0px; }
.keyFindings li { margin-bottom: 1px; padding: 10px 20px; float: left; width: 645px; }
.keyFindings li.alt { background: #B2A37A; color: #000; }

.keyFindingsBtns { margin-right: 1px; float: left; width: 31px; }

a.btnScrollUp { float: left; width: 31px; height: 30px; background: url(../Images/btnScroll.gif) no-repeat scroll left top; text-indent: -9999em; }
a:hover.btnScrollUp { background-position: left -30px; }
a:hover.btnScrollDown { background-position: left -60px; }
a.btnScrollDown { float: left; width: 31px; height: 30px; background: url(../Images/btnScroll.gif) no-repeat scroll left bottom; text-indent: -9999em; }

.wrappy { float: left; width: 720px; }

.formWrap { margin-top: 20px; padding: 40px 0 60px 0; float: left; width: 720px; background: url(../Images/bgDivide.gif) no-repeat scroll center top; }
dl.form { margin: 0 0 0 40px; float: left; display: inline; width: 375px; }
.form dd { margin-bottom: 8px; float: left; width: 375px; line-height: 25px; }
.form label { padding-right: 25px; float: left; width: 110px; text-align: right; }
.form input { float: left; width: 190px; }
.form select { float: left; width: 130px; }
.error { margin: 4px 0 0 10px; float: left; display: inline; width: 18px; height: 18px; background: url(../Images/bgValidate.png) no-repeat scroll left top; }

.ddBot { margin-bottom: 40px !important; }

.btnMargL { margin-left: 135px; float: left; display: inline !important; font-size: 1.0em !important; }

.paraBig { font-size: 1.4em; }
.paraMarg { margin-bottom: 30px; }

/*////////////////////////////////////*/
/* ---- =QUESTIONS --*/

.quest { background: #010f48 url(../Images/bgQuestBody.jpg) repeat-x fixed left center !important; }
#questCarouselWrapper { margin-top: -290px; width: 21000px; height: 580px; top: 50%; left: 0px; position: absolute; z-index: 9; }
.question { margin-right: 3000px; float: left; width: 722px; height: 580px; position: relative; z-index: 1; }
.first { display: inline; }
.question h1 { margin: 44px 0px 5px 30px; float: left; display: inline; width: 240px; height: 48px; background: transparent url(../Images/bgH1Quest.gif) no-repeat scroll left top; text-indent: -9999em; }
.logoQuest { position: absolute; top: 10px; right: 0px; z-index: 999; }
.questionBox, .questionBoxFirst { padding: 20px 30px 30px 30px; float: left; width: 662px; min-height: 328px; height: auto !important; height: 328px; background: transparent url(../Images/bgBox.gif) no-repeat scroll left top; }
.questionBoxRight { float: right; width: 500px; }
.questionBox h2 { margin-bottom: 30px; float: left; color: #666; font-size: 1.4em; }
.questionBox h3 { float: left; color: #A8996E; font-size: 2.4em; width: 142px; font-weight: bold; }
.questionBoxFirst h4 { color: #A8996E; font-size: 2.4em; font-weight: bold; }
.questionBoxFirst p { font-size: 1.4em; }
.questionBoxFirst p.wee { font-size: 1.0em; }
.questionBox ul li { margin-bottom: 1px; float: left; width: 662px; }
.questionBox ul li strong { float: left; width: 20px; }
.questionBox ul li span { float: left; width: 642px; }

.radioGroup { float: left; width: 500px; }
.radioGroupRow { margin-bottom: 15px; float: left; width: 500px; }
.radioGroup input { margin: 2px 15px 0px 0px; float: left; width: 15px; height: 15px; background: none; border: none; padding: 0px; }
.radioGroup label { float: left; width: 470px; color: #A8996E; font-size: 1.5em; }

.answer { margin-top: 15px; float: left; width: 662px; }
.answerGraph01 { margin-top: 5px; padding-left: 15px; float: left; width: 485px; height: 32px; line-height: 34px; background: transparent url(../Images/bgAnswerQ1.gif) no-repeat scroll left top; color: #fff; font-size: 1.4em; font-weight: bold; }
.answerGraph02 { background-image: url(../Images/bgAnswerQ2.gif) !important; }
.answerGraph03 { background-image: url(../Images/bgAnswerQ3.gif) !important; }
.questionBoxRight p { margin: 15px 0px 0px 0px; float: left; width: 500px; color: #A8996E; font-size: 1.2em; line-height: 1.2em; font-weight: bold; }

/*////////////////////////////////////*/
/* ---- =FORM --*/
.cb { padding: 0 !important; border: 0 !important; background: transparent none !important; }
.loading { float: left; padding-left: 30px; line-height: 25px; background: transparent url(../Images/loading.gif) no-repeat scroll left top; }
.validate { margin: 7px 0px 0px 5px; float: left; display: inline; }
.formRowLeft { margin-bottom: 7px; float: left; width: 300px; }
.formRight { float: right; width: 360px; }

.radioGroupForm { float: left; width: 360px; }
.radioGroupForm input { margin-right: 10px; float: left; background: none; border: none; padding: 0px; height: 14px; }
.radioGroupForm label { font-size: 0.9em; }
.radioGroupRowForm { margin: 0px 10px 3px 0px; float: left; width: 170px; }
.radioGroupRowFormLarge { margin: 15px 0px 15px 0px; float: left; width: 360px; }
.radioGroupRowFormLarge label { margin-bottom: 3px; float: left; width: 360px; }
.radioGroupRowFormLarge textarea { float: left; width: 350px; height: 40px; }

.formLeft { float: left; width: 255px; }
.formLeft label { margin: 4px 10px 0px 0px; float: left; width: 80px; }
.formLeft input { float: left; width: 150px; }

.formSubmit { margin-top: 15px; width: 248px !important; }
.formSubmit label { float: left; width: 200px; font-size: 0.8em; }
.formSubmit input { margin-top: 5px; float: right; width: 15px; height: 15px; }
