body { behavior:url("csshover3.htc"); }
body, html { margin:0; padding:0; font-family:arial, verdana, sans-serif; font-size:11px; color: #E5E5E5; background-color: #333333; text-align:left; }
a:link { text-decoration: none; color: #fff; }
a:visited { text-decoration: none; color: #E5E5E5; }
a:hover { text-decoration: none; color: #E5E5E5; }
a:active { text-decoration: none; color: #E5E5E5; }
html, body { margin: 0; padding: 0; height: 100%; }
a img {border:none;}
/*header tags */
h1 { color: #FF339A; margin:0 0 1em; font-size:14px; font:Verdana, Arial, Helvetica, sans-serif; }
h2 { color: #FF339A; margin:0 0 1em; font-size:12px; font:Verdana, Arial, Helvetica, sans-serif; }
h3 { color: #E5E5E5; margin:0 0 1em; font-size:10px; font:Verdana, Arial, Helvetica, sans-serif; }
h4 { margin:0 0 1em; font-size:21px; font-weight:normal; font:Verdana, Arial, Helvetica, sans-serif; }
strong { color: #FF339A; margin:0 0 1em; font-size:12px; font:Verdana, Arial, Helvetica, sans-serif; }
h4 strong { color: #FF339A; margin:0 0 1em; font-size:21px; font:Verdana, Arial, Helvetica, sans-serif; }
/* main content wrapper */
#wrap { width:1020px; background-position:top; background-repeat:no-repeat; }
/* page header */
#header { padding:5px; height:60px; background-repeat:repeat; }
/* main content */
#main { float:left; width:600px; padding:0px; }
#content { min-width:839px; width:auto !important; width:839px; }
#left { float:left; padding:0px; }
#right { float:left; width:248px; padding:3px; color:#fff; }
#left div { padding-bottom:3px; padding-left:5px; }
#right div { background-image: url(../img/right_div_bg.png); margin-top:3px; padding:5px; margin-bottom:3px; }
#main div { }
#frontPageSlider { margin: 0 0 0 20px; clear:both; }
#flashcontent { border: solid 1px #000; width: 1000px; height: 500px; float: left; margin: 15px 20px; }
/* footer content */
#footer { clear:both; padding:10px; margin:10px; font-size:18px; text-align:right; width:1000px; }
#footer strong { color: #FF339A; margin:0 0 1em; font-size:18px; font:Verdana, Arial, Helvetica, sans-serif; }
#footer ul { list-style:none; display:inline; }
/* projects CSS */
#gallery { width: 200px; }
#gallery img { border:1px solid #999999; }
#gallery ul { margin: 0px; list-style-type: none; padding: 0px; }
#gallery li { float: left; margin-left: 7px; }
#gallery a, a:link, a:visited, a:hover { display: inline; padding: 0px; margin: 0px; }
#description_area { width: 400px; height: 480px; overflow:hidden; padding-right: 10px; margin-bottom:5px; }
#main_image_area { float: left; width: 600px; height: 480px; }
/* Main pages CSS */
#main_content { height: 512px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; width: 1024px; padding-left: 10px; }
#main_content2 { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; width: 1034px; height: 512px; padding-left: 0px; }
#main_content3 { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; width: 1034px; height: 620px; padding-left: 0px; }
#left_content { /*left column*/
width: 200px; float: left; }
#right_content { /*right column*/
width: 1000px; float: left; height:100%; vertical-align:top; padding-left: 10px; }
#left_content2 { /*left column*/
width: 340px; float: left; padding-left:5px; }
#left_content2 ul { list-style-image: url(../img/bullet.png); }
#left_content3 { float: left; width: 335px; height:100%; padding-right:5px; }
#left_content3 ul { list-style-image: url(../img/bullet.png); }
#left_content4 { float: left; width: 330px; padding: 0px 10px 0px 10px; }
#left_content4 ul { list-style-image: url(../img/bullet.png); }
#left_content5 { float: left; width: 270px; padding: 0px 10px 0px 10px; }
#right_content2 { /*right column*/
width: 672px; float: left; height:512px; vertical-align:top; padding-left: 10px; }
#right_content3 { /*right column*/
width: 672px; float: left; vertical-align:top; padding: 0px 0px 0px 10px; }
#right_content4 { /*right column*/
width: 672px; height:672px; float: left; vertical-align:top; padding: 0px 0px 0px 10px; }
#sub_menu { font-size: 10pt; margin-top: 0px; padding: 10px 10px 10px 10px; }
#right_content4 { /*right column*/
width: 720px; float: left; height: 412px; vertical-align: top; }
/* form styling */
.contact_table { border: 0; }
.contact_desc_cell { border: 0; width: 200px; text-align: right; valign: top; font-size: 90%; font-weight: bold; }
.contact_input_cell { border: 2px #8a8a8a solid; }
.contact_input { border: 1px #404040 solid; background-color:#333333; width: 100%; color: #FFFFFF; }
.contact_input:focus { border: 1px solid #000000; }
.contact_textarea { font-size: 8pt; color: #FFFFFF; background-color: #333333; border: 1px solid #404040; width: 100%; }
.contact_textarea:focus { border: 1px solid #000000; }
.contact_input { font:"Bitstream Vera Sans", Arial, Verdana, sans-serif; font-size:12px; }
.contact_textarea { font:"Bitstream Vera Sans", Arial, Verdana, sans-serif; font-size:12px; }
.contact_submit { }
.border_button { border: 1px #505050 solid; }
.border_button:hover { filter:alpha(opacity=50); opacity:.5; }
/* common styling */
#nav { font-family: arial, sans-serif; position:relative; font-size:14px; z-index:100; font-size:14px; text-transform:uppercase; padding:0 0 0 16px; width: 1024px;}
#nav ul li a, #nav ul li a:visited { display:block; text-decoration:none; color:rgb(255, 51, 154); background:url(../img/gr-nav-bar.jpg) repeat-x; height:36px; color:#fff; line-height:20px; overflow:hidden; padding:4px 17px 4px; }
#nav ul { margin:0; list-style: none; padding:0; }
#nav ul li { float:left; position:relative; padding-left:2px; }
#nav ul li ul { display: none; width:200px; font-size:11px; padding:15px 0 0; }
/* specific to non IE browsers */
#nav ul li:hover a, #nav ul li:hover li:hover a { color:#fff; background:url(../img/gr-nav-bar-over.jpg) repeat-x; }
#nav ul li:hover ul { display:block; position:absolute; top:21px; left:0; width:200px; }
#nav ul li:hover ul li a.hide { background:#6a3; color:#FFF; }
#nav ul li:hover ul li:hover a.hide { background:url(../img/gr-nav-bar.jpg) repeat-x; color:#FFF; }
#nav ul li:hover ul li ul { display: none; padding:0; }
#nav ul li:hover ul li a, #nav ul li:hover ul li:hover li a { display:block; background:url(../img/gr-nav-bar.jpg) repeat-x; color:#FFF; width:199px; padding:0 0 0 17px; line-height:27px; }
#nav ul li:hover ul li a:hover, #nav ul li:hover ul li:hover li a:hover { background:url(../img/gr-nav-bar-over.jpg) repeat-x; color:#FF339A; }
#nav ul li:hover ul li:hover ul { display:block; position:absolute; left:207px; top:0; }
#nav ul li:hover ul li:hover ul.left { left:-200px; }
#nav ul li:hover ul li ul, #nav ul li:hover ul li ul li, #nav ul li:hover ul li ul li a { z-index:102; }
/*project nav */
.projectlisttype { padding-left: 10px; height: 39px; background-color: purple; width: 50px; }
#projectList ul { margin: 0px; list-style-type: none; padding: 3px; }
#projectList ul p { float: left; margin-left: 10px; }
#projectList ul img { float: left; }
#projectList li { display: block; background-color: #383838; height: 40px; margin-top: 10px; width: 200px; }
#projectList ul ul { position: absolute; left: 165px; display: none; padding: 0px; margin: 0px; background-color: #383838; }
#projectList ul:hover ul { display: block; }
#projectList li li { display: none; background-color: #383838; padding: 0 15px 0 15px; margin: 0px; text-align: center; }
#projectList li ul li:hover { background-color: #666666; margin: 0px; }
#projectList li:hover li { display: block; height: 25px; margin: 0px; background-color: #383838; padding: 0px 0px 0px 5px; }
/**
Stylesheet: Slideshow.css
CSS for Slideshow.
License:
MIT-style license.
Copyright:
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
HTML:
Notes:
These next four rules are set by the Slideshow script.
You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/
.slideshow { display: block; position: relative; z-index: 0; clear:both; }
.slideshow-images { display: block; overflow: hidden; position: relative; }
.slideshow-images img { display: block; position: absolute; z-index: 1; }
.slideshow-thumbnails { overflow: hidden; }
/**
HTML:
Notes:
The images div is where the slides are shown.
Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/
.slideshow-images { height: 500px; width: 1000px; }
.slideshow-images-visible { opacity: 1; }
.slideshow-images-prev { opacity: 0; }
.slideshow-images-next { opacity: 0; }
.slideshow-images img { float: left; left: 0; top: 0; }
/**
Notes:
These are examples of user-defined styles.
Customize these classes to your usage of Slideshow.
*/
.slideshow { margin: 0 auto; }
.slideshow a img { border: 0; }
/**
HTML:
...
Notes:
Customize the hidden / visible classes to affect the captions animation.
*/
.slideshow-captions { /*background: #000;*/ bottom: -30px; /*color: #FFF; font: normal 12px/22px Arial, sans-serif;*/ left: 0; overflow: hidden; position: absolute; text-indent: 10px; width: 100%; z-index: 10000; }
.slideshow-captions-hidden { height: 0; opacity: 0; }
.slideshow-captions-visible { height: 30px; opacity: .7; }
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the controller animation.
*/
.slideshow-controller { background: url(../gfx/slideshow-player/controller.png) no-repeat; height: 42px; left: 50%; margin: -21px 0 0 -119px; overflow: hidden; position: absolute; top: 50%; width: 238px; z-index: 10000; }
.slideshow-controller * { margin: 0; padding: 0; }
.slideshow-controller-hidden { opacity: 0; }
.slideshow-controller-visible { opacity: 1; }
.slideshow-controller a { cursor: pointer; display: block; height: 18px; overflow: hidden; position: absolute; top: 12px; }
.slideshow-controller a.active { background-position: 0 18px; }
.slideshow-controller li { list-style: none; }
.slideshow-controller li.first a { background-image: url(../gfx/slideshow-player/controller-first.gif); left: 33px; width: 19px; }
.slideshow-controller li.last a { background-image: url(../gfx/slideshow-player/controller-last.gif); left: 186px; width: 19px; }
.slideshow-controller li.next a { background-image: url(../gfx/slideshow-player/controller-next.gif); left: 145px; width: 28px; }
.slideshow-controller li.pause a { background-image: url(../gfx/slideshow-player/controller-pause.gif); left: 109px; width: 20px; }
.slideshow-controller li.play a { background-position: 20px 0; }
.slideshow-controller li.play a.active { background-position: 20px 18px; }
.slideshow-controller li.prev a { background-image: url(../gfx/slideshow-player/controller-prev.gif); left: 65px; width: 28px; }
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the loader animation.
*/
.slideshow-loader { height: 28px; right: 0; position: absolute; top: 0; width: 28px; z-index: 10001; }
.slideshow-loader-hidden { opacity: 0; }
.slideshow-loader-visible { opacity: 1; }
/**
HTML:
Notes:
Customize the active / inactive classes to affect the thumbnails animation.
Use the !important keyword to override FX without affecting performance.
*/
.slideshow-thumbnails { bottom: -96px; height: 0px; left: 0; position: absolute; width: 100%; }
.slideshow-thumbnails * { margin: 0; padding: 0; }
.slideshow-thumbnails ul { height: 0px; left: 0; position: absolute; top: 0; width: 10000px; }
.slideshow-thumbnails li { float: left; list-style: none; margin: 5px 5px 5px 0; position: relative; }
.slideshow-thumbnails a { display: block; float: left; padding: 5px; position: relative; }
.slideshow-thumbnails a:hover { background-color: #FF9 !important; opacity: 1 !important; }
.slideshow-thumbnails img { display: block; }
.slideshow-thumbnails-active { background-color: #9FF; opacity: 1; }
.slideshow-thumbnails-inactive { background-color: #FFF; opacity: .5; }
#slideshow-thumbnails-list { margin:5px 0 0; }
#slideshow-thumbnails-list a { display:block; float:left; margin:0 5px 5px 0; }
#eco-page .slideshow-captions { left:-341px; width:1000px; }
#eco-page .slideshow-captions span { font-size:14px !important; }