/*---------------------------------------------------------------------------------------------

Browser Stylesheet for Spectrum Electrical


version:   1.0

author:    Paul Randall

website:   http://www.6gl.com

-----------------------------------------------------------------------------------------------*/

/*
FONT STYLING-----------------------------------------------------------------------------------
*/
body, p, div,input, select, ul, textarea{
  font-size:0.92em
  }

body, a, p, div,input,textarea,select,h1,h2,h3,h4{
  font-family:verdana;
  color:#404040;
  }

h1{font-size:1.3em;}
h2{font-size:1.1em;}
h3{font-size:1.0em;}

h1,h2{
  font-weight:bold;
  margin:0;
  color:#000;
}

p, td{
  margin:10px 0;
  text-align:justify;
  line-height: 1.5em;
}

p.footer{
  font-size:10px;
  color: #036;
  margin:5px 0;
  text-align:center;
}

p.footer a{
  color: #036;
}

#logo a{
  font-size: 4em;
  color: #fff;
  vertical-align: top; 
  text-decoration: none;
  font-family: Eras Medium ITC, verdana;
  }
  
.bold{
  color: #036;
  font-weight: bold;
  text-decoration: underlined;
  }

.summary{
  color: red;
  font-weight: bold;
  }
  
.block h2{
  margin-bottom: 10px;
  }
  
ul{
  line-height: 1.5em;
  }
  
.strapline{
  font-size:1.2em;
  }
  
.inputreadonly{
  color: #999;
  }
  
/*
IMAGE STYLING-----------------------------------------------------------------------------------
*/

a img{border:0;}

.center img{
  background-position:bottom left;
  }
  
#header img{
  float:left;
  }
  
.projects img{
  margin: 8px 8px;
  border: 1px solid #afc7d3;
  }

#frontpagecontent_holder img{
  margin: 10px 5px 0 0;
}

/*
BODY STYLING-----------------------------------------------------------------------------------
*/

body{
  background-color: #c8dff3;
  background-color: #c4d7e4;
  margin:0 0 10px 0;
  padding:0;
}

.floatleft{float:left;}
.floatright{float:right;}

.center{
  position:relative;
  left:50%;
  margin-left:-385px;
  width:760px;
  }
  
.nav-center{
  position:relative;
  left:50%;
  margin-left:-385px;
  width:900px;
  }

#iframeBody{
  background-color:#fff;
  }

/*
HEADER STYLING-----------------------------------------------------------------------------------
*/

#header{
  padding: 10px 0px 0px 0px;
  height:94px;
  background-image:url('/images/header_gradient2.gif');
  background-repeat:repeat-x;
}

  
#headerlink{
  font-size:10px;
  position:absolute;
  padding-top: 10px;
  text-align: right;
  color:#fff;
  top:6px;
  right:6px;
  }
  
#headerlink a{
  color:#fff;
  text-decoration:none;
}

.strapline{
  padding-left: 0.5em;
  font-weight:bold;
  }

/*
MAIN NAVIGATION STYLING-----------------------------------------------------------------------------------
*/

#nav{
  border-top:1px solid #365d84;
  border-bottom:1px solid #757575;
  background-color:#e7e7e7;
  background-image:url('/images/bg_nav.gif');
  background-repeat:repeat-x;
  height:1.5em;
}
#nav ul{
  border-left:1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
  float:left;
}
#nav ul li{
  float:left;
  }
  
#nav li a{
  color:#036;
  height:1.3em;
  padding:0 10px;
  padding-top:0.2em;
  padding-bottom: 0.25em;
  display:block;
  float:left;
  font-weight:bold;
  text-decoration: none;
  border-right: solid 1px #c3c2c2;

}
#nav li a:hover{
  background-color:#c3c2c2;
  background-image:url('/images/bg_navhover.gif');
  background-repeat:repeat-x;
}

.nav_on{
  background-color:#c3c2c2;
  background-image:url('/images/bg_navon.gif');
  background-repeat:repeat-x;
}

/*
SUB NAVIGATION STYLING-----------------------------------------------------------------------------------
*/

#page_nav_holder{
  width:150px;
  float:left;
}

#page_nav{
  list-style:none;
  margin:0;
  padding:0;
}
#page_nav li {
  border-left: 10px solid #b1c9db;
  margin:0;
  padding:0 0 10px 0;
}
#page_nav li a{
  margin-left:10px;
  padding:0;
  color:#000;
  text-decoration:none;
  display:block;
  width:150px;
}
#page_nav li a:hover {
  text-decoration:underline;
}
#page_nav li.current_cat, #page_nav li.current_page{
  border-color:#81b5e4;
}
#page_nav li.current_page a, #page_nav li.current_cat a{
  padding-left:5px;
  color:#81b5e4;
}

#page_nav li.current_heading{
  border-color:#3d748f;
}
#page_nav li.current_page{
  font-weight:bold;
}

#page_nav li.current_heading{
  color:black;
  font-weight:bold;
}

/*
CONTENT STYLING-----------------------------------------------------------------------------------
*/

#content_holder{
  width:740px;
  /*
  Large Width - More padding, text stuff has to be done--------
  width:940px;
  */
  min-height:425px;
  height:auto !important;
  height:425px;
  background-color:#fff;
  border:1px solid #c4c4c4;
  padding:20px 20px 10px 10px;
  margin:10px 0;
  text-align:left;
  background-image:url('/images/bgSpectrumLogo.gif');
  background-repeat: no-repeat;
  background-position:0% 100%;
}
#content{
  margin-left:170px;
}

#frontpage-content{
  position:relative;
  width: 410px;
  padding: 0px;
  margin-top: 0px;
  }

.frontpage-block{
  position:absolute;
  left:422px;
  top:20px;
  width: 320px;
  padding-left: 20px;
  }

#frontpagecontent_holder{
  width:740px;
  min-height: 500px;
  background-color:#3f718a;
  text-align:left;
  background-image:url('/images/frontpagebackground.jpg');
  background-repeat: no-repeat;
  background-position:0% 100%;
}

.border{
  border: 1px solid #c3c2c2;
  }

.block{
  padding: 10px;
  margin-bottom: 20px;
  }
  
.contact{
  width: 300px;
  padding: 10px;
  }
  
.more-projects img{
  padding-left: 4px;
  }


/*
PROJECT PORTFOLIO STYLING-----------------------------------------------------------------------------------
*/

.projects{
  margin: 10px 0;
  padding: 10px;
  background-image: url('/images/portfolio_gradient.jpg');
  background-repeat: no-repeat;
  background-position: top left;
  background-color: #f3f7fe;
  border: 1px solid #dde6e5;
  }
  
.projects textarea{
  line-height: 15px;
  }
  
.project-titles{
  min-height: 100px;
  padding: 10px;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  line-height: 15px;
  }
  
.project-titles img{
  float: right;
  }

.project-titles a{
  text-decoration: none;
  }
  
.project-border{
  padding: 0px;
  }


.project-details{
  line-height: 25px;
}

.project-details th{
  width: 140px;
  float: left;
  text-align: left;
  }

.project-details td{
  font-size: 10px;
  }
  
.tags{
  font-weight: bold;
  font-size: 0.9em;
  margin-top: 10px;
  }
  
.odd{
  background-color: #f3f7fe;
  border: 1px solid #dde6e5;
  }
  
.even{
  background-color: #ecf1f8;
  border: 1px solid #dde6e5;
  }
  
/*
ADMIN SECTION STYLING---------------------------------------------------------------------------------------
*/

fieldset{
  border: 0px;
  }

.widgEditor{
  width: 100%;
  }
  
.input{
  width: 300px;
  }

#summary{
  padding: 20px;
  width: 200px;
  height: 100px;
  }
  
.info{
  line-height: 30px;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 0.92em;
  }

.info th{
  font-weight: bold;
  text-align: right;
  }
  
.info td{
  padding-left: 10px;
  }

.error{
  font-weight: bold;
  padding: 10px;
  margin: 20px;
  border: 1px solid #f00;
  background:#f5bdbd;
  }
  
.success{
  font-weight: bold;
  padding: 10px;
  margin: 20px;
  border: 1px solid #0f0;
  background:#bdf5c1;
  }

#login-info{
  float:right;
  }

.users th{
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 10px;
  }
 
.edit-project{
  width:332px;
  }
  
.edit-project-small{
  width:270px;
  }
  
.upload-images{
  width: 334px;
  }

.textbox{
  width:332px;
  height:170px;
  }

.upload{
  width:380px;
  height:200px;
  background:#ecf1f8;
  padding:10px;
  }
  
.dark{
  background: #e0eaf2;
  border: 1px solid #6d97bc;
  }
  
.left th{
  text-align: left;
  padding-left: 10px;
  }
  
a.tooltip {color:#c00;}
a.tooltip b {display:none;}
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover b {display:block; position:absolute; top:25px; left:-280px; padding:15px; font-weight:normal; text-transform: none; line-height: 1.5em; color:#000; border:1px solid #799eb1; background:#e5edf5; width:300px;}
.clear {clear:both;}


.vacancies {width: 100%;}
.vacancies img {float: right;}