/* CSS Document */

/* ------------------------ Layout ---------- */


html {
height: 100%; 
}

body {
font-size: 1em;
font-family:Arial, Helvetica, sans-serif;
height: 100%; 

}

.outerContainer {
width: 770px;
margin: 0 auto;
background: #ffffff url(images/scot_map_bck.jpg) bottom right no-repeat; 
}

.container {
border: 1px solid #000000;
width: 770px;
margin: 0 auto;
background: url(images/left_bck.gif) repeat-y;
min-height: 100%;
}


#leftSide {
width: 177px;
background-color:#296eb2;
float: left;
position: relative;

/* min-height: 100%;*/
/* position:absolute; */
}


#content {
padding: 0px 20px 0px 20px;
float: right;
width: 552px;
line-height: 1.3em;
height: 100%;
}

#flag {
margin: 0 auto;
font-size: 90%;
}

.flagHolder {
text-align:center;
padding: 15px 0 15px 0;
background: #c7daec url(images/flag_bck.jpg) repeat-x;
border-right: 1px solid #16528d;
}

#footer {
padding: 13px 0 0 16px;
background: #9ebedc url(images/footer_bck.jpg) no-repeat;

}

#footer p {
font-size: 90%;
line-height: 1.05em;
color: #0f4171;
}

#flashcontent1 {
width: 550px;
height: 380px;
}

#flashcontent2 {
width: 550px;
height: 330px;
}

.formbck {
width: 270px;
float: left;
padding: 10px
}

.bigForm {
padding: 20px;
background-color: #EFF1FF;
}

.addFloat {
float:right;
width: 250px;

}

/* =============================== header graphics ====================================== */

.headerOne {
background: url(images/brush-header.jpg) no-repeat;
float: right;
width: 592px;
height: 227px;
}

.headerTwo {
background: url(images/girl-score-header.jpg) no-repeat;
float: right;
width: 592px;
height: 227px;
}

.headerThree {
background: url(images/scraper-header.jpg) no-repeat;
float: right;
width: 592px;
height: 227px;
}

.headerFour {
background: url(images/girl-2-score-header.jpg) no-repeat;
float: right;
width: 592px;
height: 227px;
}

.headerFive {
background: url(images/boy-paint-cards.jpg) no-repeat;
float: right;
width: 592px;
height: 227px;
}

.headerSix {
background: url(images/swatches.jpg) no-repeat;
float: right;
width: 592px;
height: 227px;
}

/* =============================== map / form styling ====================================== */

.formbck {
padding-top: 5px;
padding-bottom: 5px;
background-color: #EFF1FF;
}

  #map{
   border: 1px solid #0D416F;
   width: 540px;
   height: 316px;
   text-align: center;
   margin: 0 auto;
   clear: both;
   }

.clearB {
clear:both;

}

textarea {
font-size: 95%;
font-family: Arial;
}


/* ------------------------ Navigation Styles */

#navlist li
{
display: inline;
/* for IE5 and IE6 */
}

#navlist
{
width: 176px;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0;
padding: 0;
border-top: 1px #99aec3 solid;
/* border-left: 1px #000 solid; */
border-right: 1px #16528d solid;
font-size: 90%;
}

#navlist a
{
width: 176px;
height: 28px;
/* extend the sensible area to the maximum with IE5 */
display: block;
padding-top: 16px;
background: url(images/button-states.jpg) 0 0 repeat-x;
border-bottom: 1px #8b9db0 solid;
text-align: center;
text-decoration: none;
color: #000;
}

#navlist a:hover { 
background-position: 0 -54px;
 }
 
#navlist a:active { 
background-position: 0 -108px;
color: #ffffff;
}

/* --------------------- scheme nav -------------- */
#scheme ul li {
list-style: lower-roman;
}

#scheme ul li a {
color: #0c436e;
background: #f4f7fb;
width: 90%;
display: block; 
padding: 7px;
text-decoration: none;
margin-bottom: 5px; 

}

#scheme a:visited {
background: #e9f0f8;
}

#scheme a:hover {
background: #FFE8BF; 
}

/* --------------------- scheme nav -------------- */
#app ul li {
list-style: none;
}

#app ul li a {
color: #0c436e;
background: #f4f7fb;
width: 90%;
display: block; 
padding: 7px;
text-decoration: none;
margin-bottom: 5px; 

}

#app a:visited {
background: #e9f0f8;
}

#app a:hover {
background: #FFE8BF; 
margin-bottom: 5px; 
}

/* ------------------------------- down nav ----------- */

#down {
padding: 20px;
background:#EFF8FF;
font-size: 85%;
}

#down a {
color: #0c436e;
background: #A4CCEF;
width: 95%;
display: block; 
padding: 10px;
text-decoration: none;
text-align: center;
font-weight: bold;
}


#down a:visited {
background: #8FA7BF;
}


#down a:hover {
background: #63809F; 
color: #ffffff;
}

#down p {
padding: 10px;
font-size: 95%;
}


/* ------------------------------- bot story ---------- */

.botStory {
background: url(images/bot-story.jpg) repeat-x;
text-align: right;
padding: 10px;
}



/* ------------------------------- Text Styles -------- */

#content h1, h2, h3 {
color: #001482;
}

#content h1 {
font-size: 135%;
}

#content h2, h3 {
font-size: 110%;
}

#content ul {
list-style: url(images/bullet.gif);
margin-left: 30px;
}

#content ol {
margin-left: 30px;
}

.bold {
font-weight: bold;
}

.boldr {
color:#990000;
font-weight: bold;
}

.boldb {
font-weight: bold;
color: #092b4b;
}

.smaller {
font-size: 90%;
}

.vsmaller {
font-size: 70%;
}

.lowerAlpha {
list-style-type: lower-alpha;
}

/* =========================== clear floats ============================== */


.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}


.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* applies to ie < 7 */
* html .clearfix {height: 1px;}
/* End hide from IE<7 */

.copyright {
text-align: center;
font-size: 70%;
padding: 5px;
width: 770px;
margin: 0 auto;
}