/* NOTES: */ body { margin: 0px; padding: 0px; font: 12px Arial, Helvetica, sans-serif; line-height: 16px; background-color: #000000; color: #fff; text-align:center; } .bodygreen { background: #000000 url(../images/bgFade.gif) 0 0 repeat-x; } .bodywhite { background: #000000 url(../images/bgFade_white.gif) 0 0 repeat-x; } .bodypurple { background: #000000 url(../images/bgFade_purple.gif) 0 0 repeat-x; } .bodyorange { background: #000000 url(../images/bgFade_orange.gif) 0 0 repeat-x; } .bodycyan { background: #000000 url(../images/bgFade_cyan.gif) 0 0 repeat-x; } .clear-both { clear:both; } p { font-size:12px; font-family: Arial, Helvetica, sans-serif; color: #fff; line-height: 18px; } a { color: #666; text-decoration:underline; } a:hover { color:#CCCCCC; text-decoration:underline; } /*____________________________________ MAIN CONTAINER ____________________________________*/ #mainContainer { width: 900px; padding: 0 0; background:url(../images/main_bg.gif) 0 0 repeat-y; margin-left: auto; margin-right: auto; margin-top:0px; text-align: left; } #top_main { height: 116px; width: 900px; background: #000000 url(../images/top_main.gif) 0 0 repeat-y; padding: 0; margin-left: auto; margin-right: auto; margin-top: 0;} #bot_main { height: 116px; width: 900px; background: #000000 url(../images/bottom_main.gif) 0 0 repeat-y; padding: 0; margin-left: auto; margin-right: auto; margin-top: 0;} /*____________________________________ HEADER ____________________________________*/ #header { height: 80px; width: 900px; position:relative; margin-left: auto; margin-right: auto; margin-top: 70px; } #top_right { width:133px; height:75px; margin: 5px 0 0 0; padding: 0; float:right; font-size: 11px; color: #FFF; background: #000000 url(../images/logotop.gif) 0 0 no-repeat; text-align:right; } #sublinks { width:170px; ; margin: 100px 0 0 0; padding: 5px 0 0 0px; float:right; font-size: 13px; color: #FFF; text-align:center; } #sublinks a { text-decoration: none; color:#fff; } #right_container{ width: 400px; height: 102px; float:right; padding: 0; margin: 0;} #leftLogo { height:131px; width:130px; margin: 0 0 0 0; padding: 0; float:left; background: url(../images/left_logo.gif) no-repeat; } #left_logo_type { display:block; height:48px; width:290px; margin: 0 0 0 0; padding: 0; float:left; } #down_header { display:block; height:24px; width:750px; margin: 0 0 0 0; padding: 0; float:left; background: url(../images/down_header.gif) no-repeat } #right_header_container { width: 620px; height: 131px; float:right; padding: 0; margin: 0; } /*____________________________________ BANNER ____________________________________*/ /*____________________________________ NAV ____________________________________*/ #nav { height:27px; width:700px; text-align:left; padding: 0 0 0 0; background-color:#000; margin: 40px 0 0 30px; float:left; } #nav ul { margin: 0; padding: 0; list-style: none;} #nav li { display:inline; } #nav li a { font-size: 14px; font-weight:normal; padding-left: 12px; padding-right: 12px; border-right: 1px solid #ffffff; line-height: 27px; color:#00ffff; text-decoration: none; } #nav li a:hover, #nav li .active_link { text-decoration: none; color:#fff; } #nav li.last a { padding-right: 0; border-right: none; } /*____________________________________ BELOW NAV ____________________________________*/ #below_navNew { width: 750px; margin: 0px; height: 35px; background: #FFF url(../images/bg_content.gif) repeat-x; } /*____________________________________ SUB NAV ____________________________________*/ #sub_nav { width: 660px; text-align:center; margin: 5px 20px 4px 20px; padding: 0; float:left;} #sub_nav ul { margin: 0; padding: 0; list-style: none;} #sub_nav li { display:inline; } #sub_nav li a { font-size: 11px; padding-left: 11px; padding-right: 12px; border-right: 1px solid #000; line-height: 18px; color:#000; font-weight: normal; text-decoration: none; } #sub_nav li a:hover, #sub_nav li .active { text-decoration: none; color:#666666; } #sub_nav li.last a { padding-right: 0; border-right: none; } /*____________________________________ RIGHT COLUMN ____________________________________*/ #right { width: 470px; float: right; padding:0 0 0 0; margin:0 0 0 0; line-height: 13px; } #right .holder { width: 197px; float: left; padding:0 0 10px 0; margin:0; background:url(../images/column_bot_shade.gif) 0 100% no-repeat; } #right .image { float: left; margin: 10px 0 0 7px; padding: 0; } #right .pboxRight { margin: 20px 45px 0 8px; padding: 0; line-height:18px; float:right; } #right .pbox { margin: 20px 45px 0 8px; padding: 0; line-height:18px; } #right .pbox_lineBot { margin: 20px 25px 0 8px; padding: 0; line-height:18px; border-bottom: 1px solid #00ffff; } #right .pboxTitle { margin: 20px 25px 0 8px; padding: 0 0 8px 0; color:#fff; font-size:16px; border-bottom: 1px solid #fff; } #right .pbox a { text-decoration: none; color:#00ffff; } #right .pbox a:hover { text-decoration: underline; } .portfolioselectLeft { border-bottom: 1px solid #00ffff; padding:12px 12px 12px 0; } .portfolioselect { border-bottom: 1px solid #00ffff; padding:12px 0 12px 0; } /*____________________________________ LEFT COLUMN ____________________________________*/ #left { width: 350px; float: left; padding:0 0 0 0; margin:0 0 0 40px; line-height: 13px; } #leftNoMargin { width: 350px; float: left; padding:0 0 0 0; margin:0 0 0 10px; line-height: 13px; } #left .holder { width: 197px; float: left; padding:0 0 10px 0; margin:0; background:url(../images/column_bot_shade.gif) 0 100% no-repeat; } #left .image { float: left; margin: 10px 0 0 7px; padding: 0; } #left .pbox { margin: 0 8px 0 8px; padding: 0; } #left .pbox .title { color:#7723A8; font-size:13px; } /* #Right .pbox p { font-size:11px; padding:0; line-height:13px; } */ #left .pbox a { color:#999999; text-decoration: none; } #left .pbox a:hover { color:#000; text-decoration: none; } #tabProducts { margin: 0 0 0 0; padding: 0; width: 197px; height: 67px; background: url(../images/column_tab.gif) no-repeat; text-align:center; color:#FFFFFF; } #tabProducts .title { padding: 8px 0 0 0; color:ffffff; } #column_top_shade { margin: 0 0 0 0; padding: 0; width: 197px; height: 37px; background: url(../images/column_top_shade.gif) no-repeat; } #column_bot_shade { margin: 0 0 0 0; padding: 0; width: 197px; height: 37px; background: url(../images/column_bot_shade.gif) no-repeat; } .noteMore a { color:#666666; text-decoration:none; font-size:10px; } .noteMore a:hover { color:#000000; text-decoration:none; } /*____________________________________ WIDE COLUMN ____________________________________*/ #wide { width: 900px; float: left; padding:0; margin:0 0 0 0; } #wide .nospace { margin:0; } #wide .pboxenter { margin: 15px 40px 0 40px; padding: 0 0 5px 0; text-align:center;} #wide .pbox { margin: 15px 40px 0 40px; padding: 0 0 5px 0; text-align:center;} #wide .title { margin: 0 40px 20px 40px; padding: 0 0 15px 30px; font-size:16px; line-height:21px; font-weight: bold; color:#E68E22; background:url(../images/arrow.gif) no-repeat left top; } #wide .pbox a { color:#CCCCCC; text-decoration: none; } #wide .pbox a:hover { color:#CCCCCC; text-decoration: none; } #wide .pbox p.nospace { margin-bottom: 4px; } #wide .pbox_linebot { margin: 0px 40px 25px 40px; padding: 0 0 15px 0; border-bottom: 1px solid #E68E22; } #wide .title_linebot { margin: 0 40px 20px 40px; padding: 0 0 15px 30px; font-size:16px; line-height:21px; font-weight: bold; color:#E68E22; background:url(../images/arrow.gif) no-repeat left top; border-bottom: 1px solid #E68E22; } /*** SMALL INNER COLUMNS ***/ div.inner_left { width:320px; margin: 0 15px 0 0; padding: 0; float:left; color:#000; } div.inner_right { width:320px; margin: 0 0 0 0; padding: 0; float:right; color:#000; } div.inner_left .pabox, div .inner_right .pabox { margin: 0 10px 0 10px; position:relative; } div.inner_left .teambox, div .inner_right .teambox { margin: 0 10px 0 10px; float:right; width:200px; } /*____________________________________ CONTENT AREA ____________________________________*/ #content { margin: 0; width:900px; padding:0; } /*____________________________________ PRE SET PADDING ____________________________________*/ .padBot { padding-bottom:8px;} /*____________________________________ PRE SET MARGINS ____________________________________*/ #wide .toplarge { margin-top: 41px; } #wide .topmid { margin-top: 20px; } #wide .topsml { margin-top: 10px; } #wide .botlarge { margin-bottom: 40px; } #wide .botmid { margin-bottom: 20px; } #wide .botsml { margin-bottom: 10px; } /*____________________________________ GALLERY ____________________________________*/ .gallery_holder { margin: 15px 115px 15px 115px; padding: 0; text-align:center; position:relative;} #gallery { margin: 0; width: 440px; padding: 0;} #gallery ul { margin:0; padding:0; list-style: none; } #gallery ul li { float:left; margin:5px 10px 10px 0; } /************** GALLERY **************/ ul.gallerythumbs { margin:0; padding:0; list-style: none outside none; } ul.gallerythumbs li { float:left; text-align:center; margin:0 10px 15px 10px; width:100px; } /*____________________________________ MISC ____________________________________*/ .floatimgRight { margin-left: 15px; float: right; clear: both; } #bullet{ padding: 3px 0 3px 25px; width:485px; margin: 6px 0 6px 0; background:url(../images/icon_bullet.gif) left center no-repeat; color:#29513E;} #bulletLast{ padding: 3px 0 3px 25px; width:485px; margin: 6px 0 30px 0; background:url(../images/icon_bullet.gif) left center no-repeat; color:#29513E;} #more_plain a { font-size:9px; padding:0; margin: 5px 0 0 0; float:left; color: #666666; text-decoration: none; } #more_plain a:hover { font-size:9px; padding:0; margin: 5px 0 0 0; float:left; color: #FFFFFF; text-decoration: none; } .image { float: left; margin: 0 0 0 7px; padding: 0; } div.more { width: 150px; padding:0; margin:10px 0 6px 0; float:left; color:#999999; line-height:10px; font-size:11px; background:url(../images/arrowNote.gif) no-repeat right center;} div.more a { text-decoration:none;} div.more a:hover { text-decoration:none;} #moreInfo { width: 40px; padding:0 0 0 0; margin: 0 0 0 0; float:left; color:#999999; line-height:12px; text-decoration: none; font-size:11px; background:url(../images/generic/arrowNoteInfo.gif) no-repeat right center;} /*____________________________________ COLOURS ____________________________________*/ strong { color:#00ffff; } .afydaton { color:#00ffff; } .light { color:#666; } .fix { color:#000000; } /*____________________________________ TITLES ____________________________________*/ .title_generic { font-size:14px; margin: 0 0 4px 0; height:20px; padding: 0 0 0 26px; line-height: 20px; font-weight:normal; color:#000000; background:url(../images/arrow_generic.gif) no-repeat left center; } .title_home { font-size:14px; margin: 0 0 4px 0; height:20px; padding: 0 0 0 26px; line-height: 20px; font-weight:normal; color:#8a1EAC; background:url(../images/arrow_generic.gif) no-repeat left center; } .title_about { font-size:14px; margin: 0 0 4px 0; padding: 0 0 0 15px; line-height: 12px; font-weight:normal; color:#3C762B; background:url(../images/arrow_note_about.gif) no-repeat left center; } .title_gallery { font-size:14px; margin: 0 0 4px 0; padding: 0 0 0 15px; line-height: 12px; font-weight:normal; color:#E66F31; background:url(../images/arrow_gallery.gif) no-repeat left center; } .title_services { font-size:14px; margin: 40px 25px 0 25px; padding: 0 0 0 26px; line-height: 12px; font-weight:normal; color:#3649C3; background:url(../images/arrow_generic.gif) no-repeat left center; } .title_services_no_top { font-size:14px; margin: 0 25px 0 25px; padding: 0 0 0 26px; line-height: 12px; font-weight:normal; color:#3649C3; background:url(../images/arrow_generic.gif) no-repeat left center; } .subtitle_services { font-size:14px; margin: 40px 25px 0 0; padding: 0 0 0 0; line-height: 12px; font-weight:normal; color:#3649C3;} .subtitle_services_no_top { font-size:14px; margin: 0 25px 0 0; padding: 0 0 0 0; line-height: 12px; font-weight:normal; color:#3649C3; } /*____________________________________ BORDERS AND DIVIDERS ____________________________________*/ div .divider { display:block; height:1px; margin: 0 0 0 0; padding:0; border-bottom: 1px solid #CCC; border-bottom-width:1px; position:relative; } /*____________________________________ HEADERS ____________________________________*/ /***H1***/ h1 {font-size:20px; margin: 0 0 25px 0; padding: 0; line-height: 18px; font-weight: bold; color:#E68E22; } /***H2***/ h2 { font-size:16px; margin: 12px 0 12px 0; padding: 0; line-height: 16px; font-weight: bold; color:#E68E22; } /***H3***/ h3 {font-size:14px; margin: 12px 0 12px 0; padding: 0; line-height: 12px; font-weight:bold; color:#CC6600; } /***NO SPACE***/ h1.nospace, h2.nospace { margin-bottom:4px; } h3.spacesml { margin-bottom:6px; } .no_top_space { margin-top:0;} /*____________________________________ FOOTER ____________________________________*/ #footer_wrapper { margin: 0 0 0 0; width:750px; padding:0; background-color:#666666; position:; } #botContainer { width: 750px; padding: 0 20px; height: 53px; background: #808A92 url(../images/footer.gif) no-repeat; margin-left: auto; margin-right: auto; margin-bottom:0px; } #botContainerIntro { width: 750px; height:53px; padding: 0 20px; background: #808A92 url(../images/footerIntro.gif) no-repeat; margin-left: auto; margin-right: auto; margin-bottom:0px; } #botContainerLogo { width: 900px; padding: 0 ; height: 36px; margin-left: auto; margin-right: auto; margin-bottom:80px; } #footer { width: 750px; height: 18px; margin: 0 0 0 0; font-size: 11px; color: #FFF; padding: 0; line-height: 18px;color: #666666; } #footer a { color: #CCCCCC; text-decoration: none; margin-right: 6px; margin-left: 6px; } #footer a:hover { text-decoration: underline; } #footerContent { margin: 0px; float: left; width: 730px; text-align:center; color:#999999; } #webtheoria { float: right; width: 120px; height:27px; color:#CCCCCC; margin: 10px 10px 0 0; background: url(../images/webtheoiaLogo.gif) 0 0 no-repeat; } #terms { float: left; text-align:left; width: 300px; height:27px; color:#CCCCCC; margin: 10px 10px 0px 20px; font-size: 10px;} /*____________________________________ AJAX LIGHTBOX GALLERY RULES ____________________________________*/ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #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: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/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; } #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }