/* CSS Document */

/* 
blue: #0099CC
grey: #333
light grey: #e6e6e6
*/
html 
{overflow-y: scroll;}

body
{margin: auto; text-align: center; background-color: #e6e6e6; color: #333; font-family: "helvetica", sans-serif;
font-size: 12px; line-height: 20px; padding: 0px; /*background-image: url(images/bg.gif); background-repeat: repeat-x;*/}

.wrapper
{font-family: "helvetica", sans-serif; margin: auto; text-align: left; width: 900px;}

.head
{text-align: left; float: left; height: 150px; width: 900px; margin: 0px 0px 5px 0; border-bottom: 4px solid #e6e6e6; }

.logo
{float: left; margin: 0px 0 5px 0px; padding: 0px;}

.nav
{float: left; width: 625px; margin: 104px 0 0 50px; text-align: right; letter-spacing: -0.3px; 
font-weight: bold; font-size: 18px; color: #A7A7A7;}

.nav a, .nav a.red, .nav a.green, .nav a.blue, .nav a.yellow, .nav a.purple, .nav a.orange
{color: #A7A7A7; text-decoration: none; margin: 0 px}

.nav a:hover
{color: #000; text-decoration: none; margin: 0 px;}

.nav a.current
{color: red; text-decoration: none; margin: 0 px}

.nav a:hover.red
{color: red; text-decoration: none; margin: 0 px}

.nav a:hover.green
{color: green; text-decoration: none; margin: 0 px}

.nav a:hover.blue
{color: blue; text-decoration: none; margin: 0 px}

.nav a:hover.yellow
{color: yellow; text-decoration: none; margin: 0 px}

.nav a:hover.purple
{color: purple; text-decoration: none; margin: 0 px}

.nav a:hover.orange
{color: orange; text-decoration: none; margin: 0 px}

.image
{float: left; height: 150px; width: 900px; padding: 0px; margin: 10px 0 0 0;}

.content
{float: left; width: 900px; padding: 0px; margin: 10px 0;}

.leftcontent
{float: left; width: 225px; padding: 0px; margin: 0px; text-align: right}

.leftcontent a
{text-decoration: underline; color: #333;}

.leftcontent a:hover
{text-decoration: none; color: #000; }

h1.lefttitle
{color: #000; margin: 0px 0px 0px 0px; padding: 0px 0 0px 0; font-size: 25px; font-weight: bold; 
letter-spacing: -0.3px; text-align: right; line-height: 25px}

.rightcontent
{float: left; width: 625px; margin: 0px 0px 0px 50px;}

.rightcontent p
{margin: 0px 0 22px 0; padding: 0px; line-height: 30px; font-size: 13px}

.rightcontent a
{text-decoration: underline; color: #333;}

.rightcontent a:hover
{text-decoration: none; color: #000;}

h2.righttitle
{color: #000; margin: 0px 0px 5px 0px; padding: 0px 0 0px 0; font-size: 20px; font-weight: bold; 
letter-spacing: -0.3px;}

h2.righttitle a
{color: #000; text-decoration: none; margin: 0px 0 5px 0; padding: 0px;}

h2.righttitle a:hover
{color: #000; text-decoration: underline; margin: 0px 0 5px 0; padding: 0px;}

.footer
{text-align: center; width: 900px; height: 40px; color: #fff; clear: both;  padding: 10px 0; 
margin: 20px 0 0 0; background-image: url(images/footer-bg.jpg); background-repeat: no-repeat;}

.footer a
{text-decoration: underline; color: #fff;}

.footer a:hover
{text-decoration: underline; color: #0099CC;}

img{border:none}

.workleft
{float: left; width: 300px; margin: 10px 0 0 15px; text-align: center;}

.workright
{float: left; width: 300px; margin: 10px 0 0 10px; text-align: center;}

.workexample
{float: left; width: 300px; margin: 0 0 5px 0; text-align: center;}


/* Gallery styles start */

#gallery
{-moz-box-shadow:0 0 3px #AAA; -webkit-box-shadow:0 0 3px #AAA; box-shadow:0 0 3px #AAA; -moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; border:1px solid white;
	background:url(images/panel.jpg) repeat-x bottom center #ffffff; width:500px; overflow:hidden;}

#slides 	/* This is the slide area */
{height:400px; width:500px; overflow:hidden;}

.slide
{float:left;}

#menu 	/* This is the container for the thumbnails */
{height:45px;}

ul
{margin:0px; padding:0px;}

li 	/* Every thumbnail is a li element */
{width:40px; display:inline-block; list-style:none; height:45px; overflow:hidden; float: left;}

li.inact:hover 	/* The inactive state, highlighted on mouse over */
{background:url(images/pic_bg.png) repeat;}

li.act,li.act:hover /* The active state of the thumb */
{background:url(images/active_bg.png) no-repeat;}

li.act a
{cursor:default;}

.fbar 	/* The left-most vertical bar, next to the first thumbnail */
{width:2px; background:url(images/divider.png) no-repeat right;}

li a
{display:block; background:url(images/divider.png) no-repeat right; height:35px; padding-top:10px;}

a img
{border:none;}

#main 	/* The main container */
{margin:15px auto; 	text-align:center; width:500px; position:relative;}

/* Gallery styles end