/* Stylesheet by Nadia - perrelink web solutions - http://www.perrelink.com.au */

/* this rule stops the 'shorter pages' from jumping to the left -  */
html, body { min-height:100%; margin-bottom:1px; }

body {
margin:auto auto;
padding: 0;
color: #666666;
background-color: White;
font: 101% TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
text-align:center;  /* aligns page center in IE5.5 */
}

/* BASIC HEADING STYLES */
H1 {
font-family: TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
font-size: 1.0em}
	
H2 {
font: 1.0em  TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
color: #B0B742;
}	

/* BASIC LINK STYLES */
a:link {
color: #003366;
text-decoration: none;
}

a:visited {
color: #003366;
}

a:hover {
text-decoration: underline;
}

img {
border: none;
}
/* outer wrapper - holds the rest of the content -ensures that layout is centered */
#wrapper {
margin: 10px auto auto;
width: 880px;
background-color: White;
}
/* holds the logo */
#companyname {
width: 230px;
padding: 0;
height: 95px;
background-color: transparent;
float: left;
color: white;
}
/* holds the strap/header image */
#header {
background-color:#FFFFFF;
width: 880px;
height: 185px;
}
/* BACKGROUND FOR THE TOP NAV */
#topnav {
margin-top: 25px;
height: 95px;
width: 520px;
float: right;
background-image: url(assets/navbar-bg.jpg);
background-repeat: no-repeat;
}
 
/*navigation styling */
#navBar {
background-color: transparent;
height: 38px;
padding-top: 0;
line-height: 2em;/*1.95em;*/
}

#navBar ul {
margin: 0px; 
padding: 0px;
list-style-type: none; 

}
#navBar li {
display: inline;
list-style-type: none;
padding:2px;
margin: 0px;
font-size: .8em;
/*font-weight: bold;*/
}

#navBar a {
background: transparent;
border: none;
margin: 0px;
color: White;
text-decoration: none;
padding: 0px 14px;     /* change the padding for spacing between menu elements */
}

#navBar a:link, #navBar a:visited {
color: White;
text-decoration: none; 
}

#navBar a:hover {
color: #C8E4FF;
background-color: transparent;
border-bottom: 1px solid white;

}

#navBar a:active {
background-color: transparent;
color: #FFFFFF;
}
/*End NavBar styles */

/* OUTER WRAPPER FOR CONTENT AREA */
#contenttop {
text-align: left;
line-height: 1.5em;
color: #666666;
}

/* main content area styles */
#contentmain {
text-align: left;
float: left;
padding: 0px 15px 0px;
color: #666666;
}
#contentmain li {
margin-left: 25px;
font: .75em/1.9em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
}


#contentbottom {
text-align: left;
padding: 0px 15px 0px;
color: #666666;
}

#contentmain p, #contentbottom p {
	font: .80em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5em;
}

/* heading styles for the content area */
#contentmain H1{
font: bold 1.5em  TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
color: #76A0C5;
}

#contentmain H2 {
font:  bold 1.2em  TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
color: #FF9933;
}
#contentmain H3 {
font:  bold .8em  TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
color: #FF3300;
}

/* inner div for all internal pages */
#internalcontent {
	padding-left: 10px;
	padding-right: 10px;
}

/* FOOTER AREA */
#footer {
background: url(assets/footer-bg.jpg) no-repeat;
font: .85em TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
margin-top:10px;
padding: 0;
height: 81px;
padding: 10px;
}

#footer p{	
color: White;
font-size: .85em;
}
#footer a {
	color: white;
}

/* CLEARER DIV USED TO CLEAR FLOATED DIVS */
.clearit {
clear: both;
font-size: 1px; /*for IE*/
height: 0;
line-height: 0px;
}
/* styles the image so that it sits either left or right of content text */
.imgright {
float: right; 
padding-left: 6px; 
padding-right: 6px;
padding-top: 6px;
padding-bottom: 6px;
}
.imgleft {
float: left; 
padding-left: 6px; 
padding-right: 6px;
padding-top: 6px;
padding-bottom: 6px;
}

/***** Begin laying out the contact form *****/

form {width: 380px;}
/* the outer border around the form */
fieldset{
padding:10px;
border: 1px solid #577DA2;
width: 380px;
font-size: 100%;
}


/* these divs style the 3 separate boxes on the front page */
#boxone {
float: left;
width: 260px;
color: #666666;
border-right: 1px dotted Silver;
padding-right: 10px;
margin-top: 25px;
margin-bottom: 20px;
}

#boxone H1 {
background-image: url(assets/storage.jpg);
background-repeat: no-repeat;
height: 41px;
margin-left: 25px;
margin-top: 5px;
vertical-align: middle;
font: bold 1.2em  TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
color: #76A0C5;
text-align: center;
}

#boxone ul {
padding: 0;
margin: 0;
text-align: left;
}	

#boxone li {
margin-left: 25px;
font: .75em/1.9em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
}

#boxone p{
font: .8em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5em;
text-align: left;
padding-left: 25px;
}

#boxtwo {
float: left;
width: 260px;
color: #666666;
padding-right: 10px;
padding-left: 25px;
margin-top: 25px;
margin-bottom: 20px;
}
#boxtwo H1 {
background-image: url(assets/service.jpg);
background-repeat: no-repeat;
height: 41px;
margin-left: 25px;
margin-top: 5px;
vertical-align: middle;
font: bold 1.2em  TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
color: #76A0C5;
text-align: center;
}

#boxtwo ul {
padding: 0;
margin: 0;
text-align: left;
}	

#boxtwo li {
margin-left: 25px;
font: .75em/1.9em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
}

#boxtwo p{
font: .8em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5em;
text-align: left;
}

#boxthree {
float: left;
width: 260px;
color: #666666;
padding-right: 10px;
padding-left: 25px;
margin-top: 25px;
margin-bottom: 20px;
border-left: 1px dotted Silver;
}
#boxthree H1 {
background-image: url(assets/cctv.jpg);
background-repeat: no-repeat;
height: 41px;
margin-left: 25px;
margin-top: 5px;
vertical-align: middle;
font: bold 1.2em  TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
color: #76A0C5;
text-align: center;
}
#boxthree ul {
padding: 0;
margin: 0;
text-align: left;
}	

#boxthree li {
margin-left: 25px;
font: .75em/1.9em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
}

#boxthree p{
font: .8em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5em;
text-align: left;
}

#boxone_service {
float: left;
width: 260px;
color: #666666;
border-right: 1px dotted Silver;
padding-right: 10px;
margin-top: 25px;
margin-bottom: 20px;
}

#boxone_service H1 {
background-image: url(assets/serv_design.jpg);
background-repeat: no-repeat;
height: 41px;
margin-left: 25px;
margin-top: 5px;
vertical-align: middle;
font: bold 1.2em  TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
color: #76A0C5;
text-align: center;
}

#boxone_service ul {
padding: 0;
margin: 0;
text-align: left;
}	

#boxone_service li {
margin-left: 25px;
font: .75em/1.9em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
}

#boxone_service p{
font: .8em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5em;
text-align: left;
padding-left: 25px;
}

#boxtwo_service {
float: left;
width: 260px;
color: #666666;
padding-right: 10px;
padding-left: 25px;
margin-top: 25px;
margin-bottom: 20px;
}
#boxtwo_service H1 {
background-image: url(assets/serv_source.jpg);
background-repeat: no-repeat;
height: 41px;
margin-left: 25px;
margin-top: 5px;
vertical-align: middle;
font: bold 1.2em  TrebuchetMS,Verdana, Arial, Helvetica, sans-serif;
color: #76A0C5;
text-align: center;
}
#boxtwo_service p{
font: .8em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5em;
text-align: left;
}
/*  end of box styling */

/* styles smaller text for 'readmore' if needed */
.readmoretext {
font: .8em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
color: #9ABBE6;
margin: 0;
padding: 0;
text-align: left;
}

.readmoretext a {
color: #9ABBE6;
}


/* FORM STYLES */
form {
width: 450px;
margin-top: 25px;
margin-left: 100px;
}

fieldset{
	padding:10px;
	border:1px solid #003366;
	margin-bottom:15px;
width: 460px;
}
/* the heading at the top of the form */
label{
float: left;
width: 120px;
font-weight: bold;
color:#666666;
font-size: 80%;
}

input, textarea{
background-color: #E5E6FF;
border: 1px solid #696A77;
margin: 4px;
margin-bottom: 5px;
}

textarea{
color:#666666;
font-weight: bold;
font-size: 80%;
width: 250px;
height: 150px;
}

.boxes{
width: 1em;
}
legend{
padding:20px;     /*gives a bit of padding between the border and the text*/
color:#76A0C5;
font-weight: bold;
}

#submitbutton{
margin-left: 125px;
margin-top: 5px;
width: 90px;
}

br{
clear: left;
}
/*end of form styles */

/* styles the validation text at bottom of page */
.valid {
float: right;
	font: .75em TrebuchetMS, Verdana, Arial, Helvetica, sans-serif;
	color: #6699FF;
}