/*-----------------------------------------------------
Testrat.com Style sheet

version:	1.0
author:		saalo sparkes
email:		info@opencomm.org.uk
website:	www.opencomm.org.uk
-----------------------------------------------------*/

/*-----------------------------------------------------
General rules
-----------------------------------------------------*/
* html body {
font: 1em Arial, Helvetica; 
color: white; 
text-align: center;
}

body {
margin: 0; 
padding: 0; 
background-color: #5e9eff; 
text-align: center;
font: 1em Arial, Helvetica; 
color: white;
}

a {
font-weight: bold; 
text-decoration: none; 
color: white;
}

a:hover, a:active {
color: #ff9900;
}

a:visited {
color: white;
}

img {
border: 0; 
}

.clear {
clear: both;
}


/*----------------------------------------------------
Layout rules and containing headers
----------------------------------------------------*/

#container {
margin-left: 4%; 
margin-right: 4%; 
background: #000066;
}

#container_blog {
width: 70%;
}

#top {
position: relative;
width: 100%; 
background-color: #000066; 
height: 7em;
}

#top .hum {
position: absolute;
margin-left: 1%; 
text-align: right; 
font-size: 0.75em; 
top: 10%;
left: 0;
}

#top .hum img {
padding-right: 0.25em; 
float: left;
}

#top h1 {
color: white; 
font-size: 1.25em;
font-weight: bold;
text-align: center; 
text-transform: uppercase; 
border-bottom: #ff9900 3px solid; 
border-top: #ff9900 3px solid; 
margin: 0; 
padding: 0.5em;
}

#top h2 {
color: white; 
font-size: 1em;
font-weight: bold;
text-align: center; 
text-transform: uppercase; 
margin-top: 0.5em; 
padding-bottom: 0.5em; 
border-bottom: #ff9900 3px solid; 
}

/*--------------------------------------------
 main navigation
--------------------------------------------*/
#main_nav {
position: relative; 
background: #000066; 
text-align: center;
}

#main_nav ul {
display: inline; 
list-style: none; 
margin-left: -5%;
}

#main_nav ul li {
list-style: none; 
line-height: normal; 
display: inline; 
}

#main_nav a {
text-decoration: none; 
text-align: center; 
font-weight: bold; 
color: white;
padding: 2px 15px 2px 15px; 
}

#main_nav a:hover, #main_nav a:active {
background: #ff9900;
}


/*-----------------------------------------------
Flexible cornered box
-----------------------------------------------*/

.bottom_left {
position: relative;
width: 60%; 
background: url('../images/bottom_left.jpg') no-repeat left bottom;
}

.bottom_right {
background: url('../images/bottom_right.jpg') no-repeat right bottom; 
padding-bottom: 3em;
}

.top_left {
background: url('../images/top_left.jpg') no-repeat left top;
}

.bottom_left span.main {
background: url('../images/top_right.jpg') no-repeat right top; 
padding-top: 2em; 
display: block;
}

.bottom_left em {
position: relative;
float: right; 
top: 5em; 
margin-right: 2.6em;
font-style: normal; 
font-size: 0.75em; 
background: white url('../images/bg_arch_tab.gif') no-repeat left top;
text-align: center; 
padding: 3px 8px 3px 40px;
}

em a {
color: #0099FF;
}

.bottom_left span, p, cite {
padding-left: 2em; 
padding-right: 2em;
}

.bottom_left ol li {
margin-left: 2em;
}

.bottom_left h2 {
font-size: 1.5em; 
font-weight: bold;
color: white; 
text-align: center; 
margin-top: 0; 
margin-bottom: 0.75em;
}

.bottom_left a {
color: #000066;
}

.bottom_left a:hover, .bottom_left a:active {
color: #FF9933;
}

.bottom_left a:visited {
color: #333333;
}

/*------------------------------------------------------
Secondary menu styles - location in the top rounded
corner box
------------------------------------------------------*/

#sec_nav {
position: relative; 
text-align: center; 
}

#sec_nav a[href~="http"] {
padding-right: 16px; 
background: url('../images/ext.gif') no-repeat top right;
}

#sec_nav a {
color: white; 
text-decoration: none; 
border-bottom: 1px solid white; 
padding: 2px 5px 4px 5px; 
margin: 0 0.5% 0 0.5%;
}

#sec_nav a:hover, #sec_nav a:active {
background: #ff9900; 
border-bottom: white; 
padding: 2px 5px 4px 5px; 
border-bottom: 1px solid white;
}



/*------------------------------------------------------
Site blogging area - also used for anyothr contact 
that doesn't use the blog system
------------------------------------------------------*/

#blog {
position: relative;
height: 15em;
overflow: auto; 
background-color: white; 
color: black; 
margin: 0 2em 0 1.5em;
text-align: left;
}

#blog p {
color: black;
font: 1em Arial, Helvetica, sans-serif; 
text-align: left;
}

#blog a {
color: #000066;
}

#blog a:hover {
color: #ff9900;
}

#sidebar {
float: right; 
width: 15em; 
height: 40em; 
background: #000066; 
color: white; 
text-align: left; 
padding: 5px;
}

#blog_forms {
text-align: left; 
margin-left: 5em;
}

/*-----------------------------------------------------------
Form rules - includes the Login button and the indexphp page
-----------------------------------------------------------*/

td {
vertical-align: top;
}

.form {
position: relative;
padding: 10px;
}

.field {
background-color: white; 
color: #000066; 
font-weight: bold; 
border: 1px solid #000066; 
text-align: left; 
}

textarea {
width: 26em; 
height: 10em;
background-color: white; 
color: #000066; 
font-weight: bold; 
border: 1px solid #000066; 
text-align: left; 
margin-right: 5em;
}

.field:hover, .field:active, textarea:hover {
background-color: #FFFFCC; 
}

.tickbox {
background-color: white; 
color: #000066; 
border: 1px solid #000066; 
}

.button {
background: #ff9900 url('../images/') repeat-x top left; 
border: 1px solid #000066; 
font-weight: bold; 
text-align: center; 
width: 5em; 
}

.button:hover {
background: #FF9933 url('../images/') repeat-x top left;
}

/*------------------------------------------------------------
Rules for the positioning and layering for the Glode-magnifier
image
------------------------------------------------------------*/
#icon_image {
position: absolute; 
float: left;
top: 18em; 
left: 0;
z-index: 12;
left: 4%;
}

/*------------------------------------------------------------
Footer rules
------------------------------------------------------------*/
#footer {
position: relative;
background-color: #000066; 
width: 100%;
}

#footer_left {
float: left; 
width: 15%; 
padding: 5px;
color: white; 
background-color: #000066; 
text-align: left; 
font-size: 0.75em;
}

#footer_right {
float: right; 
width: 15%; 
padding: 5px;
color: white; 
background-color: #000066; 
text-align: right; 
font-size: 0.75em;
}

#footer_mid {
margin-left: 15.5%; 
margin-right: 15.5%; 
padding: 5px;
color: white; 
background-color: #000066; 
text-align: center; 
font-size: 0.75em;
}