/*  Information
--------------------------------------------------------------------------------------*/
/*  Styles for ais.org.uk
    General styles for all browsers
    Created by Mez Hopking
    12th November 2007, Revised 14th December 2007 
--------------------------------------------------------------------------------------*/


/*  Foundation layout & reset styles
--------------------------------------------------------------------------------------*/

* html, p, h1, h2, h3, h4, h5, h6, ul, li, blocckquote, td, tr, table, div, dd, dt, a {margin: 0px; padding: 0px;}

body {padding: 0 380px 0 380px; margin: 0; text-align: center; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: .9em; line-height: 1.2em; color: #333;}
#sizer {margin: 0 auto 0 auto; padding: 0; width: 100%;}
#expander {background: white; margin: 0 -380px 0 -380px; min-width: 760px; /* Critical Safari fix! */ position: relative;}

/* helps IE get the child percentages right. */
#wrapper { width: 100%; text-align: left; }


/*  Main layout
--------------------------------------------------------------------------------------*/

#content {float: left; width: 100%; position: relative; margin: 20px 0 0 0;}
#mainCol {margin-left: 270px; padding: 0 15px 0 0; position: relative;}
#leftCol {float: left; width: 250px; position: relative;} 
#footer {float: left; position: relative; width: 100%; margin: 50px 0 0 0; padding: 0 0 8px 0; min-height: 0px; background: url(../images/layout/footerBg.png) top left repeat-x;}
#fullCol {float: left; position: relative; margin: 0px 0 0 0; clear: both; padding: 15px;}


/*  Typography
--------------------------------------------------------------------------------------*/

h1 {}
h2 {}
h3 {font-size: 1em; color: #cc0099}
h4 {}
h5 {}
h6 {}
p {color: #333; line-height: 1.2em; }
blockquote {}
a {color: #000;}
a:hover {}
a:visited {}
a:active {}
li {list-style: none;}
ul {}
acronym {cursor: help;}
.alignRight {text-align: right;}
.listTitle {font-weight: bold; font-size: 1.1em; padding: 0 0 5px 0; color: #cc0099;}


/*  Header specific
--------------------------------------------------------------------------------------*/

#header {float: left; position: relative; background: url(../images/layout/headerBg.png) top right no-repeat; width: 100%;}

#logo {float: left; position: relative; background: url(../images/layout/natsLogo.png) top left no-repeat; padding: 0 0 13px 150px; margin: 30px 0 22px 20px; letter-spacing: 2px; line-height: .9em}
#logo .welcomeTitle {font-size: .75em; text-transform: uppercase; margin: 2px 0 0 0;}
#logo .welcomeTagline {font-size: .75em; font-weight: normal}

#logIn {position: absolute; right: 10px; top: 14px; padding: 0 0 10px 0;}
#logIn p {font-size: .8em; font-weight: normal; color: #222}
#logIn .logInOut a {color: #888}


/*  Top navigation
--------------------------------------------------------------------------------------*/

#topNav {position: relative; float: left; background-image: url(../images/layout/topNavBg.jpg); background-position: 0 0; width: 100%; padding: 0 0 10px 0;}
#topNav ul {margin: 0 0 0 11px; padding: 11px 0 0 0px; width: 70% !important}
#topNav li {display: inline;}
#topNav li a {font-size: .85em; font-weight: bold; text-decoration: none; background-image: url(../images/layout/topNavSeparator.gif); background-position: -2px -1px; background-repeat: no-repeat; padding: 12px .6em 10px 1.2em;}
#topNav li.first a {background-image: none !important}
#topNav li a:hover {color: #cc0099}
#topNav li.active a {color: #cc0099 !important}


/* Left column specific
--------------------------------------------------------------------------------------*/

.leftBlock {float: left; position: relative; width: 220px; background: url(../images/layout/leftBlockBg.png) 0 0 no-repeat; padding: 15px;}

#news h3 {color: #cc0099;}
#news h4 { font-size: .95em; font-weight: normal; margin: 0; padding: 0; width: 100%;}
#news ul, #news li, #news li .date, #news li .title { float: left; } /* Float nearly everything for clearing purposes */
#news ul { width: 100%; margin: 10px 0 0 0;}
#news li { padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: 1px dotted #ddd; font-size: .85em }
#news li a { display: block; text-decoration: none; }
#news li .date { display: block; width: 35%; font-style: italic; color: #888; }
#news li .title { font-weight: bold; width: 64%;  }
#news li a:hover { color: #888 !important;}
#news li p { display: block; clear: both; margin: 0 0 0 35%; }


#news li.highlight { cursor:pointer; }
#news li.highlight a, #news li.highlight p { color: #888 !important; }

/* Sub navigation
--------------------------------------------------------------------------------------*/

#subNav {color: #cc0099;}
#subNav ul {float: left; position: relative; width: 100%; margin: 10px 0 20px 0;}
#subNav li {position: relative; padding: 0 0 5px 0; margin: 0 0 5px 0; border-bottom: 1px dotted #ddd; font-size: .85em}
#subNav li a {display: block; text-decoration: none; color: #555; background: url(../images/layout/subNavArrow.png) 100% 3px no-repeat;}
#subNav li a:hover {color: #888 !important;}
#subNav li.active {font-weight: bold;}


/* Main column content specific
--------------------------------------------------------------------------------------*/

#mainColContent {width: 100%; float: left; position: relative; font-size: .85em;}
#mainCol h2 {color: #cc0099 !important; margin: 0 0 20px 0; font-weight: normal; font-size: 1.7em; letter-spacing: 1px;}

#mainColContent ul {position: relative; line-height: 1.3em;}
#mainColContent li {position: relative; padding: 0 0 4px 14px; background: url(../images/layout/squarePurpleBullet.png) 0px 4px no-repeat;}
#mainColContent li a {display: block; text-decoration: none;}
#mainColContent li a:hover {color: #888;}
#mainColContent li .title {font-weight: bold;}

ul.productsList {position: relative; float: left; margin: 20px 0 0 0; line-height: 1.3em; width: 100%}
.productsList li {position: relative; margin: 0 0 15px 0; border-bottom: 1px dotted #ddd; padding: 0 0 15px 20px; background: url(../images/layout/squarePurpleBullet.png) top left no-repeat;}
.productsList li a {display: block; text-decoration: none; color: #333}
.productsList li a:hover {color: #888;}
.productsList li .title {font-weight: bold;}

.mainTextBlock {padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: 1px dotted #ddd; position: relative; float: left;}
.mainTextBlock .left {width: 48%;  padding: 0 15px; float: right;}
.mainTextBlock .right {width: 48%;  padding: 0 15px;}
.mainTextBlock .full {width: 100%; float: left; padding: 0 15px;}

.mainTextBlock.last {border: none !important;}

.mainColTableContainer {position: relative; float: left; margin: 20px 0 0 0; padding: 15px; background-color: #eee;}
.mainColTableContainer table {border-collapse: collapse; border-bottom: 1px dotted #888; position: relative; margin: 0 0 15px 0;}
.mainColTableContainer table.last {margin: 0px !important}
.mainColTableContainer td, .mainColTableContainer th {padding: 5px; vertical-align: top;}
.mainColTableContainer .odd {background-color: #cccccc}
.mainColTableContainer .even {background-color: #e2e2e2}
.mainColTableContainer .titleMain {font-weight: bold; background-color: #b7b7b7; text-align: left;}
.mainColTableContainer .titleOther {font-weight: bold;}
.mainColTableContainer .contentMain {background-color: #cbcbcb}
.mainColTableContainer .shaded {background-color: #ebebeb}
.mainColTableContainer .textFieldSml {width: 25%; padding: 2px 5px; border: 1px solid #888}
.mainColTableContainer .textFieldSml:hover {border: 1px solid #cc0099}
.mainColTableContainer .textFieldSml:focus {border: 1px solid #cc0099; background-color: #eee}
.mainColTableContainer .textFieldMed {width: 75%; padding: 2px 5px; border: 1px solid #888}
.mainColTableContainer .textFieldMed:hover {border: 1px solid #cc0099}
.mainColTableContainer .textFieldMed:focus {border: 1px solid #cc0099; background-color: #eee}
.mainColTableContainer .textFieldTiny {width: 88%; padding: 2px 5px; border: 1px solid #888}
.mainColTableContainer .textFieldTiny:hover {border: 1px solid #cc0099}
.mainColTableContainer .textFieldTiny:focus {border: 1px solid #cc0099; background-color: #eee}
.mainColTableContainer .textFieldLrg {width: 90%; padding: 2px 5px; border: 1px solid #888}
.mainColTableContainer .textFieldLrg:hover {border: 1px solid #cc0099}
.mainColTableContainer .textFieldLrg:focus {border: 1px solid #cc0099; background-color: #eee}
.mainColTableContainer .chkBox {margin: 0px 5px 1px 0px;}
.mainColTableContainer .submitButton {width: 100px; padding: 2px 5px; cursor: pointer;}
.mainColTableContainer .formR {font-size: 1px; color: #cc0099; margin: 4px 0 0 5px; background: url(../images/layout/formImageR.png) top left no-repeat; padding: 11px 15px 5px 0;}
.mainColTableContainer .formRequired.pad {margin-left: 5px;}
.mainColTableContainer img {border: none !important}

.mainColTableContainer .dateSelect span { display: block; width: 30px; float: left; padding-top: 5px; }
.mainColTableContainer .ddlDateDay {}
.mainColTableContainer .ddlDateMonth {}
.mainColTableContainer .ddlDateYear {}
.mainColTableContainer .ddlTimeHour {}
.mainColTableContainer .ddlTimeMinute {}
.mainColTableContainer select {margin: 2px}

.listingBlock {position: relative; margin: 20px 0;}
.listingBlockTableContainer {margin: 10px 0 0 0; background-color: #eee; padding: 15px; position: relative;}
.listingBlockTableContainer table {border-collapse: collapse;}
.listingBlockTableContainer td {padding: 2px 10px}
.listingBlockTableContainer tr.odd {background-color: #e2e2e2;}
.listingBlockTableContainer tr.even {background-color: #ccc;}
.listingBlockTableContainer .odd .file {background-color: #ebebeb}
.listingBlockTableContainer .even .file {background-color: #dbdbdb}
.listingBlockTableContainer .desc {}
.listingBlockTableContainer .odd .size {background-color: #ebebeb}
.listingBlockTableContainer .even .size {background-color: #dbdbdb}
.listingBlockTableContainer .odd .ref {background-color: #ebebeb}
.listingBlockTableContainer .even .ref {background-color: #dbdbdb}
.listingBlockTableContainer .ref {}
.listingBlockTableContainer .file a {background: url(../images/layout/downloadIcon.png) 0px 0px no-repeat; padding: 0 0 2px 20px;}
.listingBlockTableContainer {}
.listingBlockTableContainer {}

/* Copy only pages 
----------------------------------*/
#mainColContent.copy h2 {color: #cc0099 !important; margin: 0 0 20px 0; font-weight: normal; font-size: 1.7em; letter-spacing: 1px;}
#mainColContent.copy h3, 
#mainColContent.copy p { margin-bottom: 1em; padding-bottom: 0; width: 85%;}
#mainColContent.copy p.intro { font-weight: bold; }
#mainColContent.copy ul { margin-bottom: .5em; }
.listingColumn { width: 20%; margin-right: 3%; float: left; }



/*  Full column specific
--------------------------------------------------------------------------------------*/

.fullTableContainer {float: left; position: relative; background-color: #efefef; margin: 20px 0; padding: 15px;}
.fullTableContainer table {border-collapse: collapse; position: relative; float: left; font-size: .85em; color: #333}
.fullTableContainer td {padding: 10px;  vertical-align: text-top; border: 1px solid #efefef;}
.fullTableContainer .odd .left {background-color: #ebebeb}
.fullTableContainer .odd .middle {background-color: #e2e2e2}
.fullTableContainer .odd .right {background-color: #ebebeb}
.fullTableContainer .even .left {background-color: #dbdbdb}
.fullTableContainer .even .middle {background-color: #cccccc}
.fullTableContainer .even .right {background-color: #dbdbdb}

.fullTableContainer  td:hover {background-color: #f7f7f7!important}


/*  Breadcrumbs
--------------------------------------------------------------------------------------*/

#breadcrumbs {}

#breadcrumbs ul {float: left; position: relative; width: 100%; margin: 0 0 20px 0;}
#breadcrumbs li {display: inline; position: relative; font-size: .8em; color: #444;}
#breadcrumbs li a {color: #888;}
#breadcrumbs li a {background: url(../images/layout/breadcrumbsBg.png) 0 50% no-repeat; padding: 0 0 0 12px; margin: 0 0px 0 3px;}
#breadcrumbs li a:hover {color: #000;}


/*  Footer 
--------------------------------------------------------------------------------------*/

#footer ul {float: left; position: relative; margin: 6px 0 0 10px;}
#footer li {display: inline; position: relative; margin: 0 5px 0 0; font-size: .8em;}
#footer li a {text-decoration: none; color: #333; padding: 0 10px 0 0;}
#footer li a:hover {color: #000;}
#footer li.headscape {float: right; margin: -17px 0 0 0;}
#footer li.headscape a {color: #888}

/*  Forms 
--------------------------------------------------------------------------------------*/
fieldset { padding: 0; margin: 0; border: 0; background: #EEEEEE; width: 80%; }
fieldset fieldset { width: 100%; }
fieldset legend span { display: block; padding: 0 0 .5em 0; color: #333333;}
fieldset .meta { position: absolute; left: -9999px; }

/* Wrappers used to control margins on fieldset contents */
fieldset .wrapper { margin: 1em; }
fieldset fieldset .wrapper { margin: 0 !important; }

/* Labels */
fieldset label, .group-label { font-weight: bold; color:#333333; }
fieldset fieldset label { font-weight: normal; }

/* Form input containers */
p.text, p.checkbox, p.radio, p.textarea { width: 100% !important;  }

/* Text fields */
p.text label { display: block; width: 130px !important; float: left; padding-top: .3em }
p.text input { padding: 2px 5px; border: 1px solid #888  }
p.text input:hover { border: 1px solid #cc0099 }
p.text input:focus { border: 1px solid #cc0099; background-color: #eee }
p.required input { margin-right: 5px; }

/* Radio Buttons */
p.radio label {   }
p.radio input {   }

/* Checkbox */
p.checkbox label {   }
p.checkbox input {   }

/* Text Area */
p.textarea label { display: block; margin-bottom: .5em;  }
p.textarea textarea {  }