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

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 ----- */

#header { height:75px; width:950px; position:relative;}
#headererror { height:75px; width:950px; position:left;}
#header #logo { width:240px; height:65px; position:absolute; top:6px; left:5px; }
#header #error { width:240px; height:55px; position:absolute; top:38px; left:9px; }
#header #tagline { position:absolute; top:27px; right:-3px; width: 365px; height: 34px; background-image: url(../images/home/logo-tag.jpg)}
#pageTitle { width:950px; height:175px; position:relative; margin:50px 0px;}
#ContactPageTitle { width:950px; height:69px; position:relative; margin:50px 0px;}
#PortfolioPageTitle { width:950px; height:90px; position:relative; margin:50px 0px;}
#CasePageTitle { width:950px; height:70px; position:relative; margin:50px 0px;}
#BriefPageTitle { width:950px; height:89px; position:relative; margin:50px 0px;}
#ShopPageTitle { width:950px; height:93px; position:relative; margin:50px 0px;}
#TermsPageTitle { width:950px; height:66px; position:relative; margin:50px 0px;}
#footer { width:950px; height:70px; margin-top:9px; color:#bbbbbb; line-height:100%;}
#footer .padding { padding:3px 0 10px 3px; font-size:90%;}
#footer p {  text-align:justify; padding:0 16px 0 0px;}
#footer a { color:#bbbbbb; text-decoration:none; font-weight:normal;}
#footer a:hover { }
#footerline { background:url(../images/home/footerline.jpg) top left no-repeat; width:950px; height:2px; margin-top:9px;}
#container { width:950px; margin:0 auto; text-align:left; font-size:110%; position:relative;}
#internalContent {color:#000000}
#internalContent #LeftCol2 { float:left; width:589px; line-height:180%; color:#000000}
#internalContent #LeftCol2 ul { margin:0; padding:0px 0px 0px 2px; list-style:none; float:left; width:598px; font-size:15px; color:#000000}
#internalContent #LeftCol2 ul li { padding: 0 0 5px 2px; background:url(../images/faqs/bullet.gif) top left no-repeat; background-position: 0 .4em; padding-left: 1.5em; color:#000000}
#internalContent #LeftColPic {float:left; width:100px; height:100px; position:absolute; left:360px; top:314px;}
#internalContent #LeftColPic { float:left; width:100px; height:100px; position:absolute; left: 360px; top: 310px;}
#internalContent #LeftColRedraw { float:left; width:300px; line-height:180%;}
#internalContent #LeftColRedraw ul { margin:0; padding:50px 0px 0px 2px; list-style:none; float:left; width:598px; font-size:15px;}
#internalContent #LeftColRedraw ul li { padding: 0 0 5px 2px; background:url(../images/faqs/bullet.gif) top left no-repeat; background-position: 0 .4em; padding-left: 1.5em;}
#internalContent #LeftCol { float:left; width:589px; line-height:180%;}
#internalContent #LeftColBrief { float:left; width:901px; line-height:180%;}
#internalContent #LeftCol ul { margin:0; padding:50px 0px 0px 2px; list-style:none; float:left; width:598px; font-size:15px;}
#internalContent #LeftCol ul li { padding: 0 0 5px 2px; background:url(../images/faqs/bullet.gif) top left no-repeat; background-position: 0 .4em; padding-left: 1.5em;}
#internalContent #LeftColText { float:left; width:589px; line-height:120%;}
#internalContent #leftcontactCol { float:left; width:400px; height: 550px; padding:0px 0px 20px 0px; vertical-align: bottom; position: relative;}
#internalContent #portfolioPic { float:left; width:250px; vertical-align:middle; position:relative; height: 150px; padding:0px 0px 20px 0px;}
#internalContent #PicName { float:left; width:345px; padding:0px 15px 40px 0px; line-height:150%; }
#internalContent #rightCol {float:left; width:950px;}
#internalContent #FaqCol {float:left; width:950px; height:900px;}
#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 #hypergroup {color:#bbbbbb; margin:0 auto; text-align:center; padding:10px 0px 3px 3px; text-decoration:none;}
#internalContent #hypergroup ul { color:#bbbbbb; margin:0; padding:0; list-style:none;}
#internalContent #hypergroup li { color:#bbbbbb; display:inline; font-size:80%;}
#internalContent #hypergroup a { color:#bbbbbb; text-decoration:none; font-weight:normal;}
#internalContent #hypergroup a:hover { color:#bbbbbb; text-decoration:none;}
#hypergroup {color:#bbbbbb; margin:0 auto; text-align:center; padding:10px 0px 3px 3px; text-decoration:none;}
#hypergroup ul { color:#bbbbbb; margin:0; padding:0; list-style:none;}
#hypergroup li { color:#bbbbbb; display:inline; font-size:80%;}
#hypergroup a { color:#bbbbbb; text-decoration:none; font-weight:normal;}
#hypergroup a:hover { color:#bbbbbb; text-decoration:none;}
#homeBottom { padding-top: 369px;}
#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;}   
#flash { margin-top:5px;}
#homeTop { position:absolute; top:0px; left:0px;}
#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%; }
#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; }
#internalContent #rightcontact {
	float:left;
	width:327px;
	height: 41px;
	padding:0px 0px 20px 0px;
	vertical-align: bottom;
	position: absolute;
	left: 344px;
	top: 267px;
}
#internalContent #callback { float:left; width:550px; vertical-align: bottom; position: relative; height: 158px; padding:0px 0px 40px 0px; }

/* ----- 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 ----- */

.mini { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;}
.link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: color:#000000}
.medium {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px}
.micro { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px}
.large { font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height:210%;}
a:link {  color: color:#000000; text-decoration: none}
a:visited {  color: color:#000000; text-decoration: none}
a:active {  color: color:#000000; text-decoration: none}
a:hover {  text-decoration: none; color: #999999}
h1 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;letter-spacing: 1.5em; color: #999999; text-align: center}
h2 {font-family:Arial, Helvetica, sans-serif; font-size:28px; color:#999999; line-height:120%; font-weight:normal; padding: 0px; margin-bottom: .2em;}
.smallprint {font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal;}

/* ----- TOP NAVIGATION ----- */
#topNav { height:27px; background-image: url(../images/home/menu.jpg); width: 950px; }
#error { height:27px; background-image: width: 950px; }

/* ----- GLOBAL ----- */
img {display:block; border:0; background-attachment: scroll; background-repeat: no-repeat; background-position: top-left; 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;}