/* CSS Document */

/* Basic HTML */

body {
font-size: 10pt;
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
color: #333333;

}

p {
margin-bottom: 1.0em;
text-align: left;
margin-left: 7px;
}

h1{
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 13pt;
color: #990000;
}

h2 {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 12pt;

}

h3 {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 11pt;

}

a:link {
color: #990000;
text-decoration: none;
}

a:visited {
color: #990000;
text-decoration: none;
}

a:active {
color: #990000;
text-decoration: none;
}

a:hover {
color: #990000;
text-decoration: underline;
}

hr {
border: none 0; 
border-top: 1px dashed #ccc;/*the border*/
width: 90%;
margin: 5px;
height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
}



/* Classes */

.red {
background: url('template/images/red.png'); 
}

.blue {
background: url('template/images/blue.png'); 

}

.green {
background: url('images/green.png'); 

}

.navy {
background: url('template/images/navy.png'); 

}

.yellow {
background: url('template/images/yellow.png'); 

}

.purple {
background: url('template/images/purple.png'); 

}
.pink {
background: url('template/images/pink.png'); 

}

.grey {
background: #ccc; 
}

.black {
background: #000; 
}

.center {
margin-left: auto;
margin-right: auto;
}

/* identified divs */

#container {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background:#FFFFFF;
border-style:solid;
border-width: 1px;
border-color: #990000;
}

#header{
position: relative;
width: 960px;
height: 80px;
margin:auto;
border-style:none;
border-width: 1px;
border-color:#0000FF
}

#logo {
position: absolute;
width: 200px;
height:75px;
padding: 5px;
margin-left: 10px;
}

#strapline {
position: relative;
width: 300px;
float: right;
height:40px;
right: 40px;
top: 20px;
}

/* Menus */ 
/* HORIZONTAL menu */

#topmenu {
clear: both;
width: 960px;
height: 10px;
margin:auto;
background: url('images/red.png'); 
border-bottom-style:solid;
border-top-style:solid;
border-width: 3px;
border-color:#ccc;
}

#topmenu h1{ 
margin-left: 10px;
color: #FFFFFF;
}

#topmenu ul{
position: relative;
list-style: none;
padding: 0px;
margin: 0px;
margin-left: 10px;
}

#topmenu li {
float:left;
display: inline;
background: url('images/navy.png');
}

#topmenu li a{
color: #fff;
display: block;
padding: 10px 10px 14px 10px;

}

#topmenu li a:active{
color: #fff;
text-decoration: none;
}
#topmenu li a:visted {
color: #fff;
text-decoration: none;
}

#topmenu li a:hover{
color: #0000ff;
text-decoration: underline;
/*background: url('images/green.png');*/ 
background: #fff; 
padding: 10px 10px 14px 10px;

}

/* VERTICAL menu */

#sidemenu {
position: absolute;
width: 220px;
margin-top:10px;
margin-left: 10px;
margin-right: 10px;
/* background: url('images/yellow.png'); */

}

#sidemenu ul{
list-style: none;
padding: 0px;
margin: 0px;
border-style:solid;
border-width: 1px;
border-color:#ccc;
}

#sidemenu li {
color: #fff;
background: url('images/red.png');
}

.last {
border-bottom-style: none;
border-width: 1px;
border-color:#0000FF;
}


#sidemenu li a {
color: #fff;
display: block;
padding: 10px 10px 14px 10px;
border-bottom-style: solid;
border-width: 1px;
border-color:#ccc;
}

#sidemenu li a:visited{
color: #fff;
text-decoration: none;
}

#sidemenu li a:hover{
color: #990000;
text-decoration: none;
background: #ccc; 
padding: 10px 10px 14px 10px;

}

/* --------End of menus-----------------------------------------------------------------  */

/* Main Image */

#imagespace {
clear: both;
width: 940px;
margin:auto;
padding: 0;
border-style:solid;
border-width: 2px;
border-color:#ccc;
}

#imagespace img{
margin:0;
padding: 0;
}

/* --------End of main image-----------------------------------------------------------------  */

/* Main Content */

#main {
clear: both;
width: 960px;
margin:auto;
border-style:none;
border-width: 1px;
border-color:#0000FF
}


#sidebar {
position: relative;
float:right;
display: inline;
width: 220px;
padding: 0 10px 10px 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
border-style:none;
border-width: 1px;
border-color:#ccc;
}

#sidebar img{
border: none;
}

#content_l1 {
position: relative;
width: 920px;
margin: auto;
padding: 10px;
border-style:none;
border-width: 1px;
border-color:#0000FF
}


#content_l2 {
position: relative;
float:left;
display: inline;
left: 240px;
/*background: url('images/green.png');*/ 
width: 680px;
padding: 0 10px 10px 10px;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
border-left-style:solid;
border-width: 1px;
border-color:#ccc;
}

#content_l3 {
position: relative;
float:left;
display: inline;
left: 10px;
/*background: url('images/green.png');*/ 
width: 660px;
padding: 0 10px 10px 10px;
margin-top: 10px;
margin-left: 0px;
margin-bottom: 10px;
border-style:solid;
border-width: 1px;
border-color:#ccc;
}

#content_l4 {
position: relative;
float:left;
display: inline;
left: 240px;
/*background: url('images/green.png');*/ 
width: 420px;
padding: 0 10px 10px 10px;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
border-style:solid;
border-width: 1px;
border-color:#ccc;
}


#subfooter {
clear: both;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
height: 50px;
padding-bottom: 10px;
background: url('template/images/yellow.png');
border-top-style:solid;
border-width: 1px;
border-color:#ccc;
}

#subfooter p {
text-align:center; 
padding: 5px;
margin: 0px;

}
#subfooter ul{
list-style: none;
width: 400px;
margin: auto auto;
}

#subfooter li {
float: left;
line-height: 1.0em;
padding: 0 10px 0 10px;
margin-bottom: 10px;
text-align:center; 
border-right-style:solid;
border-right-width: 1px;
border-color:#ccc;
}

#subfooter li.last {
border-right-style:none;

}
#subfooter li a:link{
color: #330099;
}

#subfooter li a:visted{
color: #330099;
text-decoration: none;
}

#subfooter li a:hover{
color: #009933;
text-decoration: underline;
}


#footer {
clear: both;
width: 960px;
margin: auto;
height: 30px;
padding-top: 10px;
font-size: 80%;
border-top-style:solid;
border-width: 1px;
border-color:#ccc;
}

#footer a:link{
color: #990000;
}

#footer a:visted{
color: #990000;
text-decoration: none;
}

#footer a: hover{
color: #990000;
text-decoration: underline;
}

#leftfooter {
position:inherit;
float: left;
width: 30%;
text-align: center;
}

#rightfooter {
float: right;
width: 30%;
display: inline;
text-align: center;
}


#testcontainer {
clear: both;
width: 960px;
height: 130px;
background:url(images/blue.png) repeat; 
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 1px;
border-color: #FF0000;
}