/****************************************************************

Website built for Apogee Corporation by Russell Whitter  @ RWRDESIGNS.co.uk

****************************************************************/

body 
{
margin: 0; 
padding: 0; 
font-size: 13px; 
color: #000000; 
background: #ECECF0;
font-family: "Gill Sans MT", tahoma, arial,cambria, georgia, times, "times new roman", serif; 
line-height: 19px;
} 

div, h1, h2, h3, h4, h5, h6,  p, form, img, label, ul, li, input, select, textarea, img, span{
	margin:0; padding:0; 
}

 a:link
{
color: #00309C;
text-decoration: none;
cursor: pointer;
}

a:visited
{
color: #00309C;
text-decoration: none;
}

a:hover, a:active 
{
color: #E30816; 
text-decoration: underline;
cursor: pointer;
} 

h1
{
font-size: 25px;
font-weight: 500;
padding-bottom: 10px;
border-bottom: 1px solid #00309C;
margin-bottom: 10px;
color: #00309C;
}


h2
{
font-size: 20px;
font-weight: 500;
border-bottom: 1px solid #d9d9d9;
padding-bottom: 5px;
margin-right: 10px;
margin-bottom: 5px;

}


h3
{
font-size: 13px;
padding-bottom: 7px;
border-bottom: 1px solid #B5CFEF;
font-weight: 500;
}

h4
{
font-size: 14px;
font-weight: 700;
color:#FFFFFF;
}

h5
{
font-size: 12px;
font-weight: 700;
margin-bottom: 5px;
}

h6
{
font-size: 20px;
font-family:Arial, Helvetica, sans-serif;
font-weight: 300;
color:#000000;
}

ul 
{
list-style-type: none;
}

img {
border: 0px;
}

/****************************************************************

Individual styling

****************************************************************/

.staticcloud {
	padding-top:30px;
	border-top:1px solid #d9d9d9 !important;
	margin-left:30px;
	margin-right:30px;
	padding-bottom:30px;
	width:860px;
}

.cloudleft h1 {
	padding-bottom:5px;
}

.cloudright h1 {
	margin:0;
	padding:4px;
	line-height:30px;
	border-bottom:0px !important;
}

.cloudleft {
	background:white;
	width:515px;
	float:left;
}

.cloudright {
	background:white;
	padding:10px;
	width:309px;
	float:right;
	border:#d9d9d9 thin solid;
}

#link1 {
	color:black;
	font-size:17px;
}

#link2 {
	color:#800080;
	font-size:25px;
}

#link3 {
	font-size:19px;
}

#link4 {
	color:#FF0099;
	font-size:30px;
}

#link5 {
	color:black;
	font-size:19px;
}

#link6 {
	color:#008000;
	font-size:30px;
}

#link7 {
	color:black;
	font-size:20px;
}

#link8 {
	font-size:40px;
}

#link9 {
	color:#FF0099;
	font-size:33px;
}

#link10 {
	color:black;
	font-size:20px;
}

.veryright {
float: right;
}
.veryleft{
float: left;
padding-right: 10px;
}

.theme {
color: #EB1111;
font-weight: 600;
}

.input {
padding: 2px 2px 2px 2px; 
border: 1px solid #d9d9d9;
height: 22px;
margin-right: 20px;
margin-top:5px;
margin-bottom: 15px;
}

.clear {
clear: both;
}

.arrow {
background: url(imgs/sep.gif) no-repeat center left;
font-weight: 500;
padding-left: 10px;
font-size: 18px;
}

.text {
border: 1px solid #B5CFEF;
background: url(imgs/input.gif) top;
font-family: "Gill Sans MT", tahoma, arial,cambria, georgia, times, "times new roman", serif; 
padding: 2px;
}

.error {
font-size: 14px;
font-weight: 700;
color: red;
}
.success{
font-size: 14px;
font-weight: 700;
color: green;
}

.topsearch {
border: 0px;
font-family: "Gill Sans MT", tahoma, arial,cambria, georgia, times, "times new roman", serif; 
padding: 4px 5px 0px 7px;
background: url(imgs/inputbg.gif) no-repeat #F7F7F7; 
position: absolute;
top: 6px;
right: 39px;
height: 23px; 
width: 120px; 
color: #666666;
z-index: 40;
}

.go {
position: absolute;
top: 6px;
right: 10px;
z-index: 30;
}

.breadcrumb {
font-size: 12px;
position: relative;
top: -7px;
margin-left: 15px;
}

span.piece {
background: url(imgs/sep.gif) no-repeat center left;
padding-left: 15px;
margin-left: 7px;
padding-bottom: 2px;
}

/****************************************************************

main content sytling

****************************************************************/
#headerwrapper {
width: 932px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
background: url(imgs/bg.gif) center repeat-y;
padding: 0px 5px 0 5px;

}

#loginarea {
background: url(imgs/loginarea.gif) top repeat-x;
display: none;
padding: 15px;
overflow:hidden;
}

#supportarea {
display: none;
padding: 15px;
overflow:hidden;
border-bottom: 10px solid #4473DE;
}


#header {
height: 149px;
position: relative;
background: url(imgs/web_banner.gif) no-repeat;
margin-right: 1px;
}

#header .icons {
position: absolute;
right:10px;
bottom: 10px;
padding: 2px;
border: 1px solid #333333;
}

#header2 {
height: 149px;
position: relative;
background: url(imgs/interactive_banner.png) no-repeat;
margin-right: 1px;
}

#header #topinfo {
position: absolute;
top: 0px;
right: 20px;
color: white;
font-weight: 700;
font-size: 14px;
}

#header #topinfo a{
color: black;
}

#navigwrapper {
height: 39px;
background: url(imgs/bg.gif) center repeat-y;
}

#navig {
width: 932px;
margin-left: auto;
margin-right: auto;
height: 39px;
background: url(imgs/navigbg.gif);
position: relative;
}

#navig form {
margin-top: 8px;
margin-right: 5px;
}

#dropdown {
width: 250px;
background: white;
border: 1px solid #90A7EB;
position: absolute;
top: 36px;
left: 119px;
z-index: 700;
display: none;
}
#dropdown ul li{
font-size: 12px !important;
font-weight: 500px !important;
border-bottom: 1px solid #E2EEFD !important;
float:none !important;
width: 250px !important; 
text-align: left !important;
padding-left: 30px !important;
}

#dropdown ul li a:link, #dropdown ul li a:visited{
font-size: 13px !important;
font-weight: 500 !important;

}

#navig ul {
}
#navig ul li {
float: left;
width: 115px;
height: 39px;
display: block;
line-height: 37px;
text-align: center;
}
#navig ul li a:link, #navig ul li a:visited{
display: block;
font-size: 14px;
color: black;
font-weight: 700;
width: 115px;
height: 39px;
}

#navig ul li a:hover{
background: #90A7EB;
color: #000000;
height: 37px;
position: relative;
top: 2px;
text-decoration: none;
}


#mainwrapper {
width: 930px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
background: url(imgs/bg.gif) center repeat-y;
padding: 20px 5px 0 5px;
}

#maincontent{
width: 900px;
margin-left: auto;
margin-right: auto;
}

#leftmain {
float: left;
background: #527CD7;
width: 588px;
height: 250px;
}

#leftmain img{
float: left;
width: 366px;
height: 220px;
margin: 10px;
border: 5px solid #ffffff;
}

#leftmainarea {
float: right;
background: white;
width: 181px;
height: 230px;
margin: 10px 10px 10px 0;
}
#leftmainarea ul li {
border-bottom: 1px solid #d9d9d9;
background: url(imgs/areaulbg.gif);
}
#leftmainarea ul li a{
color: black;
display:block;
height: 25px;
padding: 10px;
}

#leftmainarea ul li a.on{
background: url(imgs/areaulbgon.gif);
color: white;
}


#area{
height: 47px;
float:left;
width: 554px;
border: 0px;
padding-left: 4px;

}

#area ul li {
float: left;
width: 150px;
position: relative;
top: -10px;
line-height: 31px;
}

#area ul li a {
color: #0D4386;
}

#area ul li a.on {
background: white;

}


#rightmain {
width: 270px;
background: url(imgs/areabg.gif) repeat-x;
float:right;
padding: 10px;
border-top: 1px solid #527CD7;

}

#rightmain .news{
border-bottom: 1px solid #B5CFEF;
padding: 10px;
font-size: 11px;
}

#rightmain p.head{
font-size: 13px;
}

#rightmain p{
padding-left: 65px;
}

#rightmain img {
float: left;
width: 40px;
margin:5px;
margin-right: 15px;
padding: 1px;
border: 1px solid #d9d9d9;
}

.service {
width: 283px;
float: left;
margin-right: 15px;
margin-left: 5px;
padding-top : 15px;
}
.service img{
float: right;
width: 90px;
padding: 5px;
}

.service h3 {
background: url(imgs/tabs/casestudies.gif);
height: 25px;
padding: 0px;
margin: 0px;
border: 0px;
color: white;
font-size: 16px;
padding-top: 5px;
}




.service p{
padding-bottom: 5px;
padding-left: 10px;
}


#leftwelcome {
padding: 10px;
padding-top: 5px;
margin-bottom: 10px;
}

#holder {

height: 280px;
}



.promo1 {
width: 245px; 
height: 305px; 
float:left; 
padding-left: 27px; 
padding-right: 27px; 
padding-top: 10px;
margin-bottom:30px;
}

.promo1 img.areap {
width: 245px;
height: 100px; 
margin: 15px 0px 10px 0px; 
}
/****************************************************************
subpage layouts

****************************************************************/

#leftsub {
float: left;
width: 610px;
padding: 15px;
font-size: 15px; 
background: #fff;
line-height: 22px;
}

#rightsubstyle {
float: right;
width: 610px;
padding: 15px;
font-size: 15px; 
background: #fff;
line-height: 22px;
margin-left: 20px;
}
#wholestyle {
padding: 15px;
font-size: 15px; 
background: #fff;
line-height: 22px;
}

#rightsubstyle img, #leftsub img, #wholestyle img{
border: 1px solid #d9d9d9;
padding: 3px;
margin: 5px;;
}

#rightsub {
width: 230px;
float:right;
padding:1px;
margin-top: 15px;
}


.rightsubsub {
background: url(imgs/subbg.gif) no-repeat #2762E6;
width: 230px;
padding-bottom: 10px;
}

.rightsubsub h4{
padding: 10px 10px 0px 10px;
}
/********************************************************

category side style

********************************************************/

#filter {
width: 227px;
border: 1px solid #2762E6;
}

#filter p{
line-height: 22px;
}

#filter h4{
color: white;
background: url(imgs/subbg.gif) no-repeat #2762E6;
height: 30px;
padding-left: 10px;
width: 217px;
padding-top: 10px;
margin: 0;
margin-bottom: 10px;
}
#filter ul, #filter p {
padding-left: 10px;
}



.subright {
margin: 10px;
background: white;
}

.subright ul li {
border-bottom: 1px solid #E0E9F4;
padding: 10px 10px 7px 10px;
}

.subright ul li span{
font-size: 11px;
color: grey;
}

.subright ul li img{
width: 40px;
padding: 0;
margin-right: 10px;
}

.subbottom {
height: 40px;
background: url(imgs/subbgbottom.gif) no-repeat;
width: 230px;
}

/****************************************************************

quote

****************************************************************/

#quote {
height: 300px;
font-size:16px;
padding: 0 15px 0 15px;
}

.quoteme {
width: 250px;
margin-right: 15px;
float: left;
}

.quoteme1 {
width: 605px;
float: left;
}

/****************************************************************

product area

****************************************************************/

#productstyle {
float: left;
width: 607px;
padding: 20px;
font-size: 13px; 
background: #fff;
line-height: 22px;
margin-right: 15px;
}

#productstyle .logo {
float: left !important;
text-align: center;
padding: 0 0 10px 50px !important;

}

#productstyle h2 {
border: 0px;
margin:0;
padding:0;
margin-top: 10px;
margin-left: 20px;
}

#productstyle img.prodimg {
border: 0px;
margin:0;
width: 200px;
}

ul.prodlist li{
text-align:center;
font-size: 14px;
font-weight: 700;
}
ul.prodlist li img{
width: 80px;
}

#prodinfo {
width: 340px;
height: 200px;
float: right;
}

#prodinfo h1{
border: 0px;
color: black;
padding: 0;
margin: 0;
margin-bottom: 5px;
}
#prodinfo a{
text-decoration: underline;
}

#prodinfo span {
border: 0px;
color: black;
font-size: 13px;
}

#prodinfo2 {
background: #f7f7f7;
border: 1px solid  #d9d9d9; 
padding: 20px 30px 20px 30px;
margin-top: 10px;
line-height: 24px;
}

#prodinfo2 h2{
padding: 0;
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #d9d9d9;
margin-bottom: 15px;
}
#dropwrapper {
margin-bottom: 25px;
}
#dropwrapper h5 {
background: url(imgs/dropmenuup.gif);
height: 30px;
margin: 0;
padding: 10px 0 0px 20px;
}

#dropwrapper h5 a{
color: white;
display: block;
font-size: 14px;
}


.catprod {
border-bottom: 1px solid #d9d9d9;
padding: 10px;
padding-right: 20px;
margin-bottom: 10px;
font-size: 13px;
}
.catprod .prodimg{
float: left;
width: 100px;
border: 0px !important;
margin-right: 30px !important;
}

.catprod p{
padding-left: 100px;
}

.catprod h2{
border: 0px;
font-size: 18px;
margin: 0;
padding: 0;

}

.logo {
float: right !important;
border: 0px !important;
padding: 0 !important;
margin: 0 !important;
}

.banner {
width: 610px;
border: 0px !important;
margin: 0px !important;
padding: 0px !important;
margin-bottom: 15px !important;
}


/****************************************************************

footer design

****************************************************************/
#footerservices {
background: url(imgs/services.gif);
height: 85px;
padding: 20px;
font-size: 13px;
}

#footerservices  ul li{
float: left;
width: 200px;
font-weight: 500;
}

#footer {
font-size: 12px;
padding-top: 20px;
}

#footer  ul li{
float: left;
width: 220px;
font-weight: 500;
}
#footerwrapper1{
text-align:left;
background: url(imgs/headerbg.gif) repeat-x black;
height: 380px;

}

#footerwrapper{
width: 932px;
margin-left:auto;
margin-right: auto;
text-align:left;
background: white;
border-bottom: 7px solid #527CD7;
}

#footer {
margin: 20px;
margin-top: 0px;
border-top: 1px solid #527CD7;
}

#footerservices {
height: 140px;
background: url(imgs/footerbg1.gif);
}

#footerservices ul{
float: left;
width: 180px;
margin-right: 10px;
}


#footerservices1 {
height: 100px;
padding-left: 20px;
}

#footerservices1 ul{
float: left;
width: 160px;
margin-right: 10px;
}

.twitter {
float:right;
padding-right:20px;
}

.newsletter {
padding-right:10px;
}


#print-service {
overflow: hidden;
display: none;
}

#clicker {
font-weight: 700;
font-size: 14px;
cursor: pointer;
color: #1154AA;
text-decoration: underline;
}

.catarea {
	background: url(imgs/pagebg.gif) repeat-x;
	height: 31px;
	padding-left: 10px;
	padding-top: 5px;
}
.pages {
float: right;

}

.pages li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
float: left;
}
.pages a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
.pages .previous-off,
.pages .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:1px 4px;

}
.pages .next a,
.pages .previous a {
font-weight:bold;
border: 0px;
} 
.pages .active{
color:red !important;
font-weight:bold;
display:block;
float:left;
padding:1px 6px !important;
border: 0px;
}
.pages a:link,
.pages a:visited {
color:#0063e3;
display:block;
float:left;
padding:0px 6px;
text-decoration:none;
}
.pages a:hover{
border:solid 1px #666666;
color: white;
background:  #0033FF;
}

/* IMAGE MAP STYLING */
	#imap { display:block; width:600px; height:600px; background:url(imgs/content/Apogee_Map_August_10.png); position:relative; }
	#imap a#title { display:block; width:600px; height:0; padding-top:600px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(imgs/content/Apogee_Map_August_10_hover.png) no-repeat 600px 600px; cursor:default; }
	/* the hack for IE pre IE6 */
	* html #imap a#title { height:240px; he\ight:0; }
	#imap a#title:hover { background-position: 0 0; z-index:10; }
	#imap dd { position:absolute; padding:0; margin:0; }
	#imap #picscot { left:248px; top:168px; z-index:20; }
	#imap #picne { left:348px; top:223px; z-index:20; }
	#imap #picnw { left:291px; top:311px; z-index:20; }
	#imap #piclin { left:386px; top:343px; z-index:20; }
	#imap #picliec { left:363px; top:369px; z-index:20; }
	#imap #picwal { left:248px; top:418px; z-index:20; }
	#imap #piclon { left:415px; top:430px; z-index:20; }
	#imap #picwg { left:413px; top:471px; z-index:20; }
	#imap #picalt { left:357px; top:466px; z-index:20; }
	#imap a#scotland, #imap a#northeast, #imap a#northwest, #imap a#lincoln, #imap a#liecester, #imap a#wales, #imap a#london, #imap a#westergate, #imap a#alton { display:block; width:46px; height:46px; background: transparent url(imgs/content/hover.png) -100px -100px no-repeat; text-decoration:none; z-index:20; }
	#imap a span, #imap a:visited span { display:none; }
	#imap a#scotland:hover, #imap a#northeast:hover, #imap a#northwest:hover, #imap a#lincoln:hover, #imap a#liecester:hover, #imap a#wales:hover, #imap a#london:hover, #imap a#westergate:hover, #imap a#alton:hover { background-position:0 0; }
	/* Styling to show hidden span text */
	#imap a:hover span { position:absolute; width:588px; display:block; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background:#FFF; color:#000; border:2px solid #D9D9D9; padding:5px; }
	/* Span hack for IE pre IE6 */
	* html #imap a:hover span { width:588px; w\idth:588px; }
	/* Move spans to a common position, bottom of image */
	#imap a#scotland:hover span 	{ left:-248px; top:440px; }
	#imap a#northeast:hover span 	{ left:-348px; top:385px; }
	#imap a#northwest:hover span 	{ left:-292px; top:297px; }
	#imap a#lincoln:hover span 		{ left:-386px; top:265px; }
	#imap a#liecester:hover span 	{ left:-363px; top:239px; }
	#imap a#wales:hover span 		{ left:-248px; top:190px; }
	#imap a#alton:hover span 		{ left:-357px; top:141px; }
	#imap a#westergate:hover span 	{ left:-413px; top:136px; }
	#imap a#london:hover span 		{ left:-415px; top:177px; }