@charset "utf-8";
/* specific treatment of links to overcome browser defaults */
a:link, a:visited{color:blue;text-decoration:none;}
a:hover{color: #990000;}
a:focus{outline:none;}
/* default vertical scroll-bar on all pages */
html{overflow:auto;outline:none;}

/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
/* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
body{
font:100% Verdana, Arial, Helvetica, sans-serif;
background:#666666;
margin:0;
padding:0;
text-align:center; 
color: #000000;}
/* container for all pages */
/* the auto margins (in conjunction with a width) center the page */
.container {
width:55em;
min-height:45em;
background:#FFFFFF;
margin:0 auto;
padding:0;
border:1px solid gray;
text-align:left; /* this overrides the text-align: center on the body element. */
}
/* styles for banner */
.header{
height:7em;
background-color:#6C60F2;
border-bottom:solid 1px #999;
}
/* left column for logo */
.hleft{
float: left;
padding:5px 0;
width: 40%; /* since this element is floated, a width must be given */
}
/* right column for strapline and menu */
.hright{
float:right;
width:60%; /* since this element is floated, a width must be given lcol+rcol = 100%*/
margin:0px; /* to prevent column overlap */
}
.hright #strapline{
padding:0 8% 0 42%;
font-size:220%;
color:white; 
}
/* menu in banner */
.hright #menu{
padding:0 8% 0 0;
font-size:90%;
display:block;
list-style:none;
}
.hright #menu ul{
padding:0;
margin:0;
}
.hright #menu li{
list-style:none;
float:right;
}
.hright #menu li a{
color:white;
padding-left:10px;
padding-right:10px;
text-decoration:none;
}
.hright #menu a:hover{color: red;}
.hright #menu #here{color:#F00;}

/* drop-down menus */
.sddm div{
height:1.2em;
position:relative;
left:10px;
top:1px;
visibility:hidden;
}
.sddm div a{
position:relative;
display:block;
text-align:left;
padding:1px 0 0 0;
margin:0;
/*width:auto;*/
text-decoration:none;
color:black;
font-size:90%;
}
.sddm li a{text-align:left;}
.hright .sddm div a:hover{color:red;}
/* -- end of banner styles -- */

/* --- main content styles --- */
.sidebar{ 
float:left; /* since this element is floated, a width must be given */ 
width:260px; /* the actual width of this div, will include the padding and border in addition to the width */
padding-left:15px;
margin-top:30px;
}
.bubble #clip3{
background-image:url(../Images/clip3.gif);
background-repeat:no-repeat;
background-position:left top;
margin:10px 0 0 12px;
height:210px;
}
.bubble #clip2{
background-image:url(../Images/clip2.gif);
background-repeat:no-repeat;
background-position:left top;
margin:20px 0 0 10px;
height:180px;
}
.bubble #clip1{
background-image:url(../Images/clip1.gif);
background-repeat:no-repeat;
background-position:left top;
margin:20px 0 0 10px;
height:150px;
}
.bubble p{
width:170px;
font-size:70%; 
color:#000099; 
padding-left:18px;
padding-top:13px;
text-align:left;
}
.sidebar .bubble cite{float:right;}

.mainContent{
width:auto; 
margin:40px 0 0 250px;
padding:0 5% 0 15px;
font:Verdana;
line-height:1.5em; 
font-size:80%; 
text-align:justify; 
background-color:#FFFFFF; 
border-left:solid 1px #CCC; 
}
.mainContent h1{
font-size:140%;
text-align:left;
}

/* ----- footer styles --------- */
.footer{ 
clear:both;
position:relative;
margin:0; /* zeroing the margins of the first element in the footer avoids margin collapse - a space between divs */
padding:0px 0 1px 0;
font-size:80%;
background:lightgrey;
border-top:1px solid gray;
text-align:left;
}
.option{display:inline;}
.optionfirst{
display:inline;
padding-left:0px;
}
.optionnext{
display:inline;
padding-left:50px;
}
.optionlast{
display:inline;
padding-left:60px;
}
.toppage{
padding-left:40px;
border:0;
}
.smalltext{  
padding-left:10px;
position:relative;
top:-10px;
font-size:75%; 
}
/* ----- end of footer ---- */