/* NOTE
	This is the SCREEN stylesheet for the 
	"National Autistic Society Train Walk" website
	
========================================================================*/

/* BODY STYLES */
body {font:62.5%/1.4 "Verdana",Geneva,Arial,Helvetica,sans-serif; background:#009BDF url(../images/bgMain.gif); padding:0; margin:0;}
img, form {vertical-align:top;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
p {margin:0 0 15px 0;}
h1, h2, h3, h4, h5,
p, li, dt, dd, legend {font-size:1.3em;}
label {font-size:1.1em;}
span {font-size:1.1em;}
li p, dd p, label p, legend p, span p {font-size:1em;}

/* LISTS */
ul {margin:0 0 0 15px;} 
ol {margin:0 0 15px 22px; padding-left:0;}
ol li {margin:0;}
dl, dd {margin:0; padding:0;}

/* LINKS */
:link, :visited {text-decoration:none;}
img {border:none;}
a {color:#0068A6; text-decoration:none; cursor:pointer;}
a:hover {text-decoration:underline;}

/* CLEARFIX */
div:after {content:""; display:block; height:0; clear:both; visibility:hidden;}

/* HIDDEN TEXT */
.hidden {position:absolute; left:0px; top:-10000px; width:0px; height:0px; overflow:hidden;}


/* ========= IMAGE REPLACEMENT ========= */

/* STANDARD IMAGE REPLACEMENT */
.replace {position:relative; overflow:hidden;}
.replace em, .replace a {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-repeat:no-repeat;}

/* sIFR IMAGE REPLACEMENT (main styles) */
.sIFR-flash {visibility:visible !important; margin:0; padding:0;}
.sIFR-replaced, .sIFR-ignore {visibility:visible !important;}
.sIFR-alternate {position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden;}
.sIFR-replaced div.sIFR-fixfocus {margin:0; padding:0; overflow:auto; letter-spacing:0; float:none;}
 
/* sIFR text styles */
.sIFR-active h1 {visibility:hidden; font-family:Verdana; font-size:5.8em; line-height:1em; margin-bottom:0;}


/* ========= CONTAINERS ========= */

#wrapper {width:994px; background:#FFF url(../images/leftColumBgStrip.gif) left top repeat-y; margin:0 auto; position:relative;}
#topArea {padding:7px 0 140px; float:left; width:994px; background:#FFF url(../images/topAreaBg.gif) bottom no-repeat;}
#leftColumn {float:left; width:214px; padding:76px 0 0 71px; background:url(../images/leftColumBg.gif) left top no-repeat}
ul#mainNavigation {float:left; width:709px; list-style:none; margin:0; padding:0; overflow:hidden; min-height:167px; height:auto !important; height:167px; background:url(../images/navTopFeetImages.gif) 5px 63px no-repeat;}
#content {float:left; width:451px; padding-right:34px;}
ul#rightNavigation {float:left; width:224px; margin:0; padding:0; list-style:none;}
#footer {clear:both; background:#FFF; padding-bottom:15px; margin:0; float:left; width:100%;  margin-right:-3px;}


/*========================================================================
	TOP AREA, NAVIGATION, LEFT CONTENT & FOOTER
=========================================================================*/


/* ========= TOP AREA ========= */

#topArea p {margin-bottom:0;}

/* MAIN LOGO */
#mainLogo {position:absolute; left:85px; top:105px; z-index:1;}

/* TEXT RESIZE */
#textResize {float:left; margin-left:495px; display:inline;}
#textResize dt {position:absolute; top:-10000px;}
#textResize dd {float:left; background:url(../images/iconDivider.gif) right no-repeat; padding-right:2px;}
#textResize dd a {position:relative; overflow:hidden; float:left; width:27px; height:16px;}
#textResize dd.large {background:none; padding:0;}
#textResize dd em {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-repeat:no-repeat;}
#textResize dd.small em {background:url(../images/iconResizeSmall.gif) no-repeat;}
#textResize dd.medium em {background:url(../images/iconResizeMedium.gif) no-repeat;}
#textResize dd.large em {background:url(../images/iconResizeLarge.gif) no-repeat;}

/* LISTEN */
#listen {float:left; margin-left:21px; font-size:1.4em; line-height:1.3em;}
#listen a {display:block; color:#DE2453; text-decoration:none; padding-left:22px; background:url(../images/iconListen.gif) no-repeat;}

/* HELP LINE */
#helpLine {color:#DE2453; font-weight:bold; float:left; margin-left:37px; font-size:1.4em; line-height:1.3em;}


/* ========= NAVIGATION ========= */

/* MAIN NAVIGATION */
ul#mainNavigation li {float:left; margin-right:11px;}
ul#mainNavigation li a {display:block; width:161px; height:55px; position:relative; overflow:hidden;}
ul#mainNavigation li a em {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%;}
ul#mainNavigation li.about-Train-Walk em {background:url(../images/navMainAboutTheTrainWalk.gif) 0 0 no-repeat;}
ul#mainNavigation li.how-To-Take-Part em {background:url(../images/navMainHowToTakePart.gif) 0 0 no-repeat;}
ul#mainNavigation li.event-Materials em {background:url(../images/navMainEventMaterials.gif) 0 0 no-repeat;}
ul#mainNavigation li.your-TrainWalk em {background:url(../images/navMainYourTrainWalk.gif) 0 0 no-repeat;}
ul#mainNavigation li a:hover em,
ul#mainNavigation li a strong em {background-position:0 -54px !important;}

/* RIGHT NAVIGATION */
ul#rightNavigation li {margin-bottom:19px;}
ul#rightNavigation li a {display:block; width:224px; height:60px; position:relative; overflow:hidden;}
ul#rightNavigation li a em {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%;}
ul#rightNavigation li.registerNow em {background:url(../images/navRightRegisterNow.gif) 0 0 no-repeat;}
ul#rightNavigation li.findYourNearest em {background:url(../images/navRightFindYourNearest.gif) 0 0 no-repeat;}
ul#rightNavigation li.trainWalkContactUs em {background:url(../images/navRightTrainWalk.gif) 0 0 no-repeat;}
ul#rightNavigation li.donateNow em {background:url(../images/navRightDonateNow.gif) 0 0 no-repeat;}
ul#rightNavigation li a:hover em,
ul#rightNavigation li a strong em {background-position:0 -60px !important;}
/* ========= LEFT COLUMN ========= */

#leftColumn p {margin:0 0 63px;}
#leftColumn #trainWalkLogo {margin-left:21px;}


/* ========= FOOTER ========= */

/* FOOTER */
#footer ul {list-style:none; margin:0; min-height:23px; height:auto !important; height:23px; padding:144px 0 0 358px;}
#footer ul li {float:left; font-size:1.1em; padding-right:8px; white-space:nowrap; margin-right:6px; background:#FFF url(../images/iconDivider.gif) right 2px no-repeat;}
#footer ul li.last {background:none;}

/* HIT LOGO */
#hitLogo {width:358px; margin:0; float:left;}
#hitLogo a {margin:20px 0 0 22px; padding:15px 75px 10px 77px; display:block; color:#666; font-size:0.7em; background:url(../images/logoHITEntertainment.gif) no-repeat;}

/* ADDRESS */
#address {float:left; width:575px; color:#333; margin-top:5px; font-size:1.1em;}


/*========================================================================
	CONTENT
=========================================================================*/


/* ========= TEXT STYLES ========= */

/* HEADINGS */
h1 {font:4em/1.2 palatino; color:#DE2453; font-weight:normal; margin-bottom:18px;}
h2 {color:#D30044; margin-top:15px; font-size:1.7em;}
h3 {color:#D30044; margin-top:15px;}

/* INTRO TEXT */
.intro {font-size:1.7em; color:#D30044; font-weight:bold; line-height:1.2em;}
.intro em.subtext {font-style:normal; color:#DE2453;}


/* ========= CONTENT AREA BUTTONS ========= */

/* FORM STYLE BUTTONS */
/* download button */
a.downloadButton {position:relative; overflow:hidden; width:86px; height:20px;}
a.downloadButton em {position:absolute; left:0; top:0; background:url(../images/buttonDownload.gif) no-repeat; width:100%; height:100%;}

/* submit */
input.submit {width:auto; float:right; margin-right:32px;}
a.submit {float:right; display:block; position:relative; overflow:hidden; width:86px; height:20px;}
a.submit em {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/buttonSubmit.gif) no-repeat;}

/* OTHER STYLE BUTTONS */
/* register for branch */
a.registerForBranch {position:relative; overflow:hidden; width:203px; height:57px; display:block;}
a.registerForBranch em {position:absolute; left:0; top:0; background:url(../images/buttonRegisterForBranch.gif) 0 0 no-repeat; width:100%; height:100%;}
a:hover.registerForBranch em {background-position:0 -57px;}

/* register for branch */
a.registerToOrganise {position:relative; overflow:hidden; width:203px; height:57px; display:block;}
a.registerToOrganise em {position:absolute; left:0; top:0; background:url(../images/buttonRegisterToOrganise.gif) 0 0 no-repeat; width:100%; height:100%;}
a:hover.registerToOrganise em {background-position:0 -57px;}


/* ========= LISTS ========= */

/* DOWNLOAD LIST */
.downloadList {margin-top:15px; float:left; width:426px;}
.downloadList h2 {background:#0069A6; font-size:1.3em; position:relative; z-index:1; color:#FFF; margin:0; line-height:1em;  padding:6px 20px;}
.downloadList h3 {font-size:1em; color:#BE1E2D;}
.downloadList ul {margin:0; padding:0; position:relative; top:-1px; z-index:0; list-style:none;}
.downloadList ul li {padding:15px 0 0 20px; border-top:solid 1px #231F20; clear:both; width:406px; overflow:hidden;}
.downloadList p {overflow:hidden;}
.downloadList .downloadButton {float:right;}

/* EXPANDABLE LIST */
dl.expandableList dt {color:#0068A6; font-weight:bold; margin-top:15px;}
dl.expandableList .linkTitle {cursor:pointer;}
dl.expandableList .selected {color:#DE2453;}

/* SECTION LINK LIST */
ul.sectionLinkList {list-style:none; margin:0; padding:0;}
ul.sectionLinkList li {margin:0 0 40px;}


/* ========= FORMS ========= */

/* STANDARD FORM (blue border) */
.form {background:url(../images/formBgStrip.gif) repeat-y; float:left; clear:both; margin-top:15px; width:450px;}
.form .whiteSpace {background:#FFF; margin:0; padding:0 0 15px;}
.form fieldset {margin:0; padding:0 0 50px; border:0; position:relative; float:left; width:450px; background:url(../images/formBgBottom.gif) left bottom no-repeat;}
.form legend {color:#0068A6; font-weight:bold; margin:0; padding:0; text-indent:-7px; clear:both;}
.form legend span {position:absolute; top:0; left:0; width:450px; margin:0; padding:27px 0 0 39px; display:block; background:url(../images/formBgTop.gif) left top no-repeat;}
.form .topBorderForm {font-weight:bold; margin:0; padding:0; text-indent:-7px;color:#0068A6;position:absolute; top:0; left:0; width:450px; margin:0; padding:27px 0 0 39px; display:block; background:url(../images/formBgTop.gif) left top no-repeat;}

.form label, .form span {display:block; margin:10px 0 0px 32px; width:290px;}
.form fieldset p {margin:26px 32px 5px 32px;}
.form fieldset p.title {color:#0068A6;}
.form sup, .form sup span {color:#ED1C24; line-height:0.5em; margin:0; padding:0;}
.form label.error, .form span.error {color:#ED1C24;}
.form label.first, .form span.first, .form label.ComboBoxInput_first, .form span.ComboBoxInput_first {padding-top:45px;}
.form p.first, .form p.ComboBoxInput_first {margin-top:50px;}
.form select.first, .form select.ComboBoxInput_first {position:relative; margin:50px 0 0 0}
.form input, select {position:relative; left:32px; width:277px; border:solid 1px #ACACAC;}
.inputcheckbox input {width:auto; border:none; float:left; margin-top:10px; margin-right:5px;} 
.inputcheckbox Label {width:277px; border:none; float:left;}
.form select,
.form select, .form textarea {font:1.3em "Verdana",Geneva,Arial,sans-serif; border:solid 1px #ACACAC; color:#000;}
.form .textareaclass {font:1.3em "Verdana",Geneva,Arial,sans-serif; border:solid 1px #ACACAC; color:#000; margin-left:32px;}
/*.form label.checkbox, .form span.checkbox {margin:20px 0 5px 32px; width:370px;}
.form label.checkbox input, .form span.checkbox input {font-size:1.3em; border:0; color:#000; height:18px; margin-right:8px; width:auto; left:0; vertical-align:middle; float:left;}
.form input[type=checkbox] {border:solid 1px #ACACAC;}*/
.form .backLink {float:left; margin:0;}
.ComboBoxInput_first, .ComboBoxInputHover_first ,.ComboBoxInput_Default, .ComboBoxInputHover_Default {left:32px; margin:50px 0 0 0; overflow:hidden; position:relative; width:277px; float:left;}
.ComboBoxImage_first, .ComboBoxImage_Default {float:left; margin:50px 0 0 32px; overflow:hidden;}

/* half, quarter width fields and columns */
.form .halfWidthColumn {width:170px; float:left; margin-right:25px;}
.form .halfWidth,
.form .halfWidthColumn input,
.form .halfWidthColumn select,
.form .halfWidthColumn textarea {width:170px;}
.form .halfWidthLong {width:320px;}
.form .quarterWidth {width:90px !important; display:block; overflow:hidden;}

.inputcheckboxFirst {margin-top:30px;}
.form fieldset p.statement {color:#0068A6;font-size: 1em}
.form .firstLong {width:320px;margin-top:50px;}

.ImageFloatLeft {float:left; margin-right:5px; margin-top:5px; margin-bottom:5px;}
.ImageFloatRight {float:right; margin-left:5px; margin-top:5px; margin-bottom:5px;}