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

Title : Hypergroup Stylesheet

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

/* COMMON AND GLOBAL */
body { font:62.5%/1.6 arial, verdana, helvetica, sans-serif; margin:0; padding:0; background:#ffffff; color:#000000; text-align:center; }
td, textarea, input, select { font:100% arial, verdana, helvetica, sans-serif; }

/* ----- IDS ----- */
#container { width:950px; margin:0 auto; text-align:left; font-size:110%; position:relative; }   
#printHeader { display:none;}
#header { height:75px; width:950px; position:relative; }
#header #logo { width:240px; height:55px; position:absolute; top:11px; left:0px; background-image: url(../images/home/hypergroup-logo.jpg);}
#header #tagline { position:absolute; width: 255px; height: 32px; background-image: url(../images/home/branding-design.jpg); left: 696px; top: 21px;}
#header #lead {
	position:absolute;
	width: 255px;
	height: 32px;
	background-image: url(../images/home/lead.jpg);
	left: 696px;
	top: 23px;
}
#homeBottom { padding-top: 369px;}
#homeTop { position:absolute; top:0px; left:0px;}
#flash { margin-top:5px;}
#homeContent { width:950px; padding-top:10px; color:#8d8e90; font-size:110%;}
#homeContent a { color:#8d8e90; text-decoration:none; font-weight:normal;}
#homeContent a:hover { text-decoration:underline;}
#homeContent #services { width:950px; height:289px; float:left; background:url(../images/home/bottomboxnew.jpg) top left no-repeat; }
#homeContent #services #servicesInterest { padding:0px 0px 0px 20px; width:400px; float:left;}
#homeContent #services #servicesInterest ul { margin:0; padding:50px 0px 0px 2px; list-style:none; float:left; width:230px; font-size:15px; }
#homeContent #services #servicesInterest ul li { padding: 0 0 5px 2px; background:url(../images/home/purple-bullet.gif) top left no-repeat; background-position: 0 .6em; padding-left:  .9em;}
#homeContent #services #casestudies { width:250px; float:left;}
#homeContent #services #casestudies ul { margin:0; padding:50px 0 0 1px; list-style:none; float:left; width:90px; font-size:15px;}
#homeContent #services #casestudies ul li { padding: 0 0 5px 14px; float:left; width:250px; background:url(../images/home/blue-bullet.gif) top left no-repeat; background-position: 0 .6em; padding-left:  .9em;}
#homeContent #News { width:260px; height:186px; float:right; line-height:130%; background-repeat: no-repeat; background-position: left top; }
#homeContent #News ul { margin:0; padding:50px 0 0 14px; list-style:none; float:left; width:200px; }
#homeContent #News ul li { padding: 5px 0 4px 1px;}
#NewsDivider { margin-top:50px; width:260px; height:100px;}
#pscroller1{ width: 200px; height: 200px; padding: 0px 0px 15px 14px; }
#footer { background:url(../images/home/footerline.jpg) top left no-repeat; width:950px; height:70px; margin-top:9px; color:#bbbbbb; line-height:100%;}
#footer .padding { padding:14px 0 10px 14px; font-size:90%;}
#footer .padding a { color:#bbbbbb; text-decoration:none; }
#footer .padding a:hover { text-decoration:none; }
#footer p {  text-align:justify; padding:0 16px 0 0px;}
#hypergroup { color:#bbbbbb; margin:0 auto; text-align:center; padding:10px 14px 0px 14px;}
#hypergroup ul { margin:0; padding:0; list-style:none;}
#hypergroup li { display:inline;}
#hypergroup a { color:#bbbbbb; text-decoration:none; font-weight:normal;}
#hypergroup a:hover { text-decoration:underline;}
#pageTitle { width:950px; height:175px; position:relative; margin:50px 0px; }
#roofline { width:950px; height:70px; position:relative; margin:50px 0px; }
#MapPageTitle { width:950px; height:30px; position:relative; margin:px 0px; }
#portfoliokey { width:950px; height:3px; position:relative; }
#pageServicesTitle { width:950px; height:69px; position:relative; margin:50px 0px; }
#pagegraphic { width:950px; height:150px; position:absolute; left: -74px; top: 522px; }
#pagegraphic2 { width:881px; height:78px; position:absolute; left: -79px; top: 580px; }
#pageTitle .title { position:absolute; top:24px; left:46px; background-image: url(../../images2/global/titleRegister.gif); }
#internalContent {} 
#internalContent #leftCol { float:left; width:295px; height: 350px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative; }
#internalContent #leftColPrivacy { float:left; width:295px; height: 1200px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative; }
#internalContent #leftColterms { float:left; width:295px; height: 1270px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative; }
#internalContent #leftColservices { float:left; width:295px; height: 425px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative; }

#internalContent #clientleftCol { float:left; width:295px; height: 400px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative; }
#internalContent #thankyou { float:left; width:295px; height: 100px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative; }
#internalContent #form { float:left; width:950px; height:100%; padding:0px 0px 20px 0px; position:relative; }

#internalContent #clientbottomleftCol { float:left; width:915px; height: 150px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative; }
#internalContent #leftcontactCol { float:left; width:400px; height: 475px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative; }
#internalContent #leftcontactcentre { float:left; width:400px; height: 400px; padding:0px 0px 20px 0px; vertical-align: bottom; position: absolute; left: 225px; }
#internalContent #leftworkCol { float:left; width:295px; vertical-align: bottom; position: relative; height: 26px; padding:20px 0px 5px 0px; }
#internalContent #rightworkCol { float:right; width:295px; vertical-align: bottom; position: relative; padding:20px 0px 5px 0px;}
#internalContent #rightCol { float:left; width:950px;}
#internalContent #rightCol .padding { font-size:115%; color:#6f6f6f; line-height:120%; padding:0px 25px 10px 0;}
#internalContent #rightCol .portfoliopadding { font-size:100%; color:#6f6f6f; line-height:130%; padding:0px 25px 10px 0;}
#internalContent #rightCol .contentSmall { color:#0071b9; font-size:115%; line-height:80%; }
#internalContent .box { margin-bottom:13px;}
#internalContent .boxTop { background:url(../images2/titles/title-bar2.gif) top left no-repeat; width:203px; height:28px; font-size:17px; color:#272729; padding:5px 0 0 20px; line-height:130%;}
#internalContent .boxMiddle { background:url(../images/global/boxMiddle.gif) top left repeat-y;}
#internalContent .boxBottom { background:url(../images2/global/boxBottom.gif) bottom left no-repeat; width:202px; min-height:225px;}
#internalContent .boxBottom .padding { padding:15px 20px 10px 21px;}
#internalContent .box a { color:#8d8e90; text-decoration:none; font-size:110%;}
#internalContent .box a:hover { text-decoration:underline;}
#internalContent .box ul { margin:0; padding:0 0 10px 0; list-style:none;}
#internalContent .box li { padding-bottom:5px;}
#internalContent .box p { font-size:150%;}
#internalContent #insideCol { float:right; width:285px; top: 374px; height: 26px; left: 278px; line-height:120%; padding:0px 0px 0px 12px;}
#internalContent #insidetwoCol { float:right; width:285px; top: 374px; height: 26px; left: 624px; line-height:120%;}
#internalContent #insidetwoColPrivacy { float:right; width:650px; top: 374px; height: 26px; left: 624px; line-height:120%; margin-top:90px;}
#internalContent #image { float:right; width:285px; top: 371px; height: 26px; left: 402px; line-height:120%; position:absolute; }
#internalContent #portinsideCol { float:right; width:177px; }
#internalContent #portinsideColright { float:right; width:177px; padding:0px 0px 20px 0px; }
#internalContent #portfolioheader { float:right; width:345px; padding:0px 15px 40px 0px; line-height:150%; }
#internalContent #portfoliopic { float:right; width:712px; vertical-align: bottom; position: relative; height: 158px; padding:0px 0px 40px 0px; }	
#internalContent #insideColportfolio { float:left; width:950px; padding:0px 0 20px 0px; line-height:120%; }

/* ----- CLASSES ----- */
.float_left { float:left;}
.float_right { float:right;}
.clear { clear:both; }
.hide { display:none; }
.image_right { float:right; margin:0 0 10px 15px;  }
.image_left { float:left; margin:0 15px 10px 0;  }

/* ----- HEADINGS & PARAGRAPHS ----- */
h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 15px 0; font-size:100%; font-weight:normal; line-height:130%;}
h1 {color: #0099FF; font-size:38px; line-height:120%; font-weight:bold;}
h2 {color:#000000; font-size:20px; line-height:100%; font-weight:bold;}


/* ----- TOP NAVIGATION ----- */
#topNav { font-size:12px; line-height:10px; background:url(../images/home/topNavBg.jpg) top left repeat-x; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; width:943px; height:22px; margin-left:4px;}
#topNav a { display:block; float:left; color:#333333; font-weight:normal; text-decoration:none; padding:6px 54px 7px 54px; }
#topNav a:hover { text-decoration:none; color:#666666;}
#topNav .active a { text-decoration:none; color:#666666;}
#topNav ul { margin:0; padding:0; list-style:none;}
#topNav li { display:block; float: left; position: relative; border-left:1px solid #ffffff; min-height:22px !important; height:22px; height:auto !important; z-index:1;}
#topNav li ul {display: none; position: absolute; top: 22px; left: -1px; margin:0; border-top:1px solid #ffffff; width:189px; z-index:1;}
#topNav li ul li { display:block; float:none; width:175px; border:none; z-index:1;}
#topNav li ul li a { display:block; color:color:#333333 !important; float:none; width:175px; font-size:11px; padding:6px 6px !important; min-height:16px !important; height:16px; height:auto !important; line-height:16px; background:#d9dadc !important; border-bottom:1px solid #ffffff; border-left:1px solid #d1d0d0; border-right:1px solid #ffffff; z-index:1;}
#topNav li ul li a:hover { background:#cccccc  !important; text-decoration:none; color:#ffffff;}
#topNav li ul li.active a { text-decoration:none;}
#topNav li.active ul li a { text-decoration:none;}
#topNav li:hover ul, #topNav li.over ul { display: block;}
#topNav .last a { background:none;}

/* ----- GLOBAL ----- */
img {
	display:block;
	border:0;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: bottom;
	vertical-align: bottom;
}
p { padding:0 0 15px 0; margin:0; }
address { font-style:normal;}

/* ----- LINKS ----- */
a { color:#000000; font-weight:bold; text-decoration:underline; }
a:hover { text-decoration:none; }

/* ----- TABLES ----- */
table { border-collapse:collapse; }
table p { padding:0px; }

/* ----- LIGHT BOX ----- */
#lightbox{ position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none;}
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto;}
#imageContainer{ padding: 10px;}
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;}
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block;}
#prevLink { left: 0; float: left; background: url(../images/layup/prevlabel.gif) left 15% no-repeat;}
#nextLink { right: 0; float: right; background: url(../images/layup/nextlabel.gif) right 15% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/layup/prevlabel.gif) left 15% no-repeat;}
#nextLink:hover, #nextLink:visited:hover { background: url(../images/layup/nextlabel.gif) right 15% no-repeat;}
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	;}
#imageData{	padding:0 10px; color: #666;}
#imageData #imageDetails{ width: 70%; float: left; text-align: left;}	
#imageData #caption{ font-weight: bold;}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;}