/* reset and general styles */
html {height: 100%; font-family: arial; font-size: 85%; background: #0671b9;}
body {padding: 0; margin: 0; height: 100%;}
img {border: none; padding: 0; vertical-align: bottom}
strong {font-weight: bold;}
p {margin: 0; padding: 0 0 10px 0; color: #333; line-height: 130%; font-size: 120%;}
h1, h2, h3, h4 {margin: 0; padding: 0 0 10px 0; color:#333;}
ul, ol {padding: 0 0 0 15px; margin: 0 0 10px 0}
ol {margin: 0 0 10px 10px;}
ol li {padding: 0 0 10px 0!important;}
.sg_center {text-align: center;}
img.sg_center {margin: 0 auto; display: block;}
.sg_right {float: right; padding: 0 0 10px 20px;} 
.sg_left {float: left; padding: 0 20px 10px 0;} 
.clear {clear: both}

/* page setup */
.floater { height: 50%; margin-bottom: -320px; float: left; width: 100%;}
.content {clear: both; border: 2px solid #fff; width: 980px; height: 640px; position: relative; margin: 0 auto; background: #fff url(../images/back.gif) no-repeat top left; z-index: 100000;}

/* slider functions */
#slides {position: relative; height: 640px; z-index: 350; display: block;}
.slide {display: block; height: 610px; width: 920px; overflow: hidden;  position: relative; padding: 30px 30px 0 30px; z-index: 400;}
.slides_control {display: block!important; height: 640px!important; width: 980px!important;}
.slide.blue {background: url(../images/bar-blue.gif) no-repeat 0 527px;}
.slide.red {background: url(../images/bar-red.gif) no-repeat 0 527px;}
.slide.purple {background: url(../images/bar-purple.gif) no-repeat 0 527px;}
.slide.green {background: url(../images/bar-green.gif) no-repeat 0 527px;}
.slide.lgreen {background: url(../images/bar-lgreen.gif) no-repeat 0 527px;}
.slide.lblue {background: url(../images/bar-lblue.gif) no-repeat 0 527px;}
a.prev {display: none; height: 30px; width: 30px; background: url(../images/prev.gif) no-repeat top left; left: 30px; position: absolute; bottom: 30px; z-index: 300!important; font-size: 0px;}
a.next {display: none; height: 30px; width: 30px; background: url(../images/next.gif) no-repeat top left; left: 264px; position: absolute; bottom: 30px; z-index: 300!important; font-size: 0px;}
a.homelink {display: none; height: 30px; width: 30px; background: url(../images/next.gif) no-repeat top left; left: 264px; position: absolute; bottom: 30px; font-size: 0px; z-index: 10000000!important;}
a.menu {position: absolute; bottom: -31px; left: 20px;}

.pagination {display: none;}
.pagination li {font-size: 80%; float: left; padding: 0 3px 0 0;}

.percentage {display: block; background: url(../images/percent-cog.png) no-repeat top left; height: 67px; width: 67px; position: absolute; top: 20px; right: 20px; z-index: 2000;}
.percentage p {color: #fff; width: 67px; text-align: center; color: #fff; font-size: 120%; line-height: 67px; height: 67px; padding: 0;}

p.complete {padding: 0; line-height: 18px; color: #333; font-size: 80%;}
.hidden { display:none; }

/* content divs */
.left, .right, .column {display: block; float: left; }
.left { padding: 60px 79px 0 0; width: 415px; }
.left.wide { padding: 60px 79px 0 0; width: 625px;}
.left.full { padding: 60px 0px 0 0; width: 920px;}
.right { padding-top: 60px; width: 426px; }
.strap {padding: 30px 0 20px 0;}
.nopadding { padding-top: 0;}
.left.home { padding: 0 19px 0 0; width: 263px; }
.right.home { padding-top: 0; width: 638px; }
.column { background: url(../images/column-back.png) no-repeat top left; height: 320px; padding: 15px; width: 260px;}
.slide.green .column { background: url(../images/column-back-green.png) no-repeat top left; height: 320px; padding: 15px; width: 260px;}
.slide.lgreen .column{ background: url(../images/column-back-lgreen.png) no-repeat top left; height: 320px; padding: 15px; width: 260px;}
.slide.lblue .column { background: url(../images/column-back-lblue.png) no-repeat top left; height: 320px; padding: 15px; width: 260px;}
.column { background: url(../images/column-back.png) no-repeat top left; height: 320px; padding: 15px; width: 260px;}
.column.wide { background: none!important; padding: 0px; width: 445px;}
.column.wide .half{ background: url(../images/column-half.png) no-repeat top left; height: 130px; padding: 15px; width: 415px;}
.column.narrow { background: url(../images/column-back-narrow.png) no-repeat top left; height: 320px; padding: 15px; width: 185px;}
.column p { color: #fff;}
.col1, .col2 { margin: 0 25px 0 0}
.column.wide.col1 {margin: 0 30px 0 0;}
.column.wide.col2 {margin: 0;}
.column.narrow.col1, .column.narrow.col2, .column.narrow.col3 {margin: 0 20px 0 0;}
.column.narrow.col4 {margin: 0;}


/* colour specific styles */
.title {height: 95px; padding: 0 0 18px 150px; display: block; width: 650px;}
.title h1 {font-size: 200%; color: #0670b8; height: 95px; line-height: 95px;}
.slide a {color: #0670b8;}
.title h1.double {line-height: 40px; padding: 5px 0 0 0;}
.slide.blue .title {background: url(../images/cog-blue.png) no-repeat top left;}
.slide.red .title {background: url(../images/cog-red.png) no-repeat top left;}
.slide.red .title h1, .slide.red a {color: #8c002f;}
.slide.purple .title {background: url(../images/cog-purple.png) no-repeat top left;}
.slide.purple .title h1, .slide.purple a {color: #331d7a;}
.slide.green .title {background: url(../images/cog-green.png) no-repeat top left;}
.slide.green .title h1, .slide.green a {color: #00664b;}
.slide.lgreen .title {background: url(../images/cog-lgreen.png) no-repeat top left;}
.slide.lgreen .title h1, .slide.lgreen a {color: #3d9b3e;}
.slide.lblue .title {background: url(../images/cog-lblue.png) no-repeat top left;}
.slide.lblue .title h1, .slide.lblue a {color: #00a6d7;}

/* home page */
.boxes {position: relative; height: 290px; width: 638px; overflow: hidden; z-index: 1000!important;}
.box {width: 92px; height: 264px; padding: 13px; display: block; position: absolute; top: -290px; z-index: 1000!important;}
#boxred {background: url(../images/box-red.png) no-repeat top left; left: 0;}
#boxpurple {background: url(../images/box-purple.png) no-repeat top left; left: 130px;}
#boxgreen {background: url(../images/box-green.png) no-repeat top left; left: 260px;}
#boxlgreen {background: url(../images/box-lgreen.png) no-repeat top left; left: 390px;}
#boxblue {background: url(../images/box-blue.png) no-repeat top left; left: 520px;}
#boxredlink {left: 0px; top: 0;}

.home h2, h3, h4 {text-align: right; padding: 0 0 5px 0;}
.home h2 {color: #0670b8; font-size: 180%; padding-top: 50px;}
.home h3 {font-size: 180%;}
.home h4 {font-weight: normal; font-size: 180%;}
.home h3, .home h4 {color: #666;} 

.box h2 {color: #fff; font-size: 95%; font-weight: bold; text-align: left; padding: 0; height: 80px;}
.box img {position: absolute; top: 93px; left: 13px;}
.hiddenlink {position: absolute; top: -5000px; display: block; height: 290px; width: 118px; left: 0; z-index: 5000!important;}
.hiddentext {display: none; position: absolute; top: 93px; left: 13px; width: 93px; color: #fff!important; font-size: 100%; z-index: 10!important; text-decoration: none!important; }
.tick {position: absolute; top: 109px; left: 32px; display: none; z-index: 500;}
.tick.complete { display: block!important;}

/* font styles */
.heading {height: 65px; margin-top: -15px;}
.heading p {padding: 0; font-size: 110%;}
.left ul, .right ul {list-style-type: none; padding: 0; margin: 0;}
.left li, .right li {padding: 0 0 10px 22px; font-size: 140%; color :#333;}
.quote {font-size: 180%;}
.slide.red ul li {background: url(../images/li-red.gif) no-repeat 0 5px;}
.slide.purple ul li {background: url(../images/li-purple.gif) no-repeat 0 5px;}
.slide.green ul li {background: url(../images/li-green.gif) no-repeat 0 5px;}
.slide.lgreen ul li {background: url(../images/li-lgreen.gif) no-repeat 0 5px;}
.slide.lblue ul li {background: url(../images/li-lblue.gif) no-repeat 0 5px;}
.column li {background: url(../images/li-white.gif) no-repeat 0 8px!important; color: #fff; font-size: 140%; padding: 0 0 10px 18px;}
.column ul {margin: 0; padding: 0; list-style-type: none}
.column p {font-size: 140%;}

/* footer and menu */
.footer {background: url(../images/footer.gif) no-repeat top left; position: absolute; bottom: 0; z-index: 200; width: 980px; height: 80px; display: block;}
.link {text-decoration: none;}
.link.bottom, .link2.bottom, .bottom#return {position: absolute; bottom: 81px; color: #333333; font-weight: bold; height: 28px; line-height: 28px; border-left: 1px solid #a6a6a6; display: block; text-align: center; font-size: 120%; cursor: pointer; z-index:5000000!important}
.link:hover, .bottom#return:hover, .link2.bottom {text-decoration: underline; cursor: pointer;}
.link.box:hover, .bottom#return {text-decoration: none;}
.menu {height: 29px; background: url(../images/menu.gif) repeat-x top left; position: absolute; bottom: 80px; display: block; width: 980px;}
div.menu {z-index: 10000;}
.page {position: absolute; bottom: 30px; left: 70px; height: 30px; width: 184px;}
.page p {line-height: 30px; color: #000; font-weight: bold; height: 30px; text-align: center; font-size: 130%;}	

#home {left: 30px; width: 70px;}
#help {left: 101px; width: 63px; border-right: 1px solid #a6a6a6; cursor: pointer; text-decoration: none;}
#help:hover {text-decoration: underline;}
#return {left: 572px; padding: 0 12px; border-right: 1px solid #a6a6a6; color: #696969;}
.hiddenmenu {position: absolute; padding: 10px 45px 10px 30px; margin: 0; width: 905px; background: #676767 url(../images/help.png) no-repeat top left; bottom: 29px; z-index: 50000!important; border-top: 2px solid #333;}

.closemenu {position: absolute; top: 0px; left: 935px; cursor: pointer; z-index: 90000!important;}
.hiddenmenu h2 {padding: 0 0 10px 0; font-size: 110%;}
.hiddenmenu p {font-size: 90%; color: #fff;}
.hiddenmenu img {padding: 0 0 3px 0;}
.hiddenmenu .col1, .hiddenmenu .col2, .hiddenmenu .col3, .hiddenmenu .col4, .hiddenmenu .col5 {float: left; display: block; width: 150px; padding: 0 20px 0 0;} 
.hiddenmenu .col3 p {padding-bottom: 23px; }
/* quiz */
.form p {position: relative; padding: 0 0 15px 0; display: block;}
.form span {display: block; float: left; width: 150px; margin: 0 20px 0 0;}

.form input {padding: 0 5px; width: 190px;}
.form input, .form select {float: left; display: block; border: 1px solid #00a6d7; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; height: 20px; line-height: 20px;}
.form select { height: 22px; line-height: 22px; width: 202px;}
#qnameerror, #qemailerror, #qorgnameerror, #qcemailerror { position: absolute; top: -5px; left: 400px; padding: 0; margin: 0; width: 212px; font-size: 80%; color: #fff; height: 32px;}
#qnameerror strong, #qemailerror strong , #qorgnameerror strong, #qcemailerror strong { background: url(../images/error.png); width: 190px; height: 32px; padding: 0 0 0 22px; line-height: 32px; display: block; }
#qcemailerror strong {background: url(../images/error2.png); width: 190px; height: 64px; padding: 0 0 0 22px; line-height: 25px; display: block; }
#qprofessionotherspan { display: none; }
#qorgtypeotherspan { display: none;  }
#qreviewanswers input { display: none; }
#qreviewanswers {font-size: 70%;}
#qreviewanswers p {padding: 0 0 2px 0;}
.radio {margin: 3px 6px 30px 0; display: block; float: left;}
span.clear {display: block; clear: both; float: none;}
#qsubmitanswers { position: absolute; top: 275px; left: 680px; }

.reallyhidden { display: none; width: 0; height: 0; overflow: hidden; }

#cogman, #risks {position: relative;}
#box1, #box2, #box3, #risk1, #risk2, #risk3, #risk4, #risk5 {position: absolute; z-index: 500;}
#risk1, #risk2, #risk3, #risk4, #risk5 {top: -1000px;}
#box1, #box2, #box3 {display: none;}
#box1 {top: 25px; left: 28px;}
#box2 {top: 25px; right: 28px;}
#box3 {top: 160px; right: 28px;}
#risk1 { left: 0px;}
#risk2 { right: 0px;}
#risk3 { left: 0;}
#risk4 { right: 0;}
#risk5 { left: 0;}

ul.tickedlist li {display: none; background: url(../images/tick-green.gif) no-repeat 0 0!important; padding: 0 0 20px 30px;}
ul.tickedlist2 li {display: none; background: url(../images/tick-lgreen.gif) no-repeat 0 0!important;  padding: 0 0 20px 30px;}
.browsermessage {position: absolute; top: 0; left: 0; padding: 5px 10px; background: #277eb9; width: 960px;}
.browsermessage p {color: #fff; font-size: 90%; padding: 0;}