/*  Wexcode Style Sheet
    --------------------------------------------------------------
    Coded by: Wex ( http://www.wexcode.com/ )
*/

html {
	font-size: .625em; /* 10px */
	line-height: 1;
}

body {
	font-family: Georgia;
	color: #fff;
	font-size: 10px;
	background: #171e2c;
	text-align: center; }
a { color: #fff; }
	
/* Container
-------------------------*/
#container {
	position: relative;
	text-align: left;
	width: 712px;
	margin: 30px auto 0; }

/* Logo
-------------------------*/
h1#logo {
	background: url(_img/logo.png) 0 0 no-repeat;
	position: absolute;
	left: 45px;
	top: -12px;
	width: 109px;
	height: 62px; }
#logo a {
	width: 109px;
	height: 62px;
	text-indent: -10000px;
	display: block; }


/* Navigation
-------------------------*/
#navigation {
	background: url(_img/bg_nav_left.gif) 0 4px no-repeat;
	float: right;
	position: relative;
	margin: 0 21px -21px 0;
	padding: 0 0 0 14px;
	height: 54px;
	display: block; }
#navigation ul {
	background: url(_img/bg_nav_right.gif) 100% 4px no-repeat;
	float: left;
	padding: 0 14px 0 0;
	height: 54px;
	display: block; }
#navigation li { float: left; }
#navigation li a {
	float: left;
	font-family: Verdana;
	font-size: 1.1em;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	margin: 0 10px;
	padding: 0 0 0 24px;
	display: block; }
#navigation li a span {
	float: left;
	padding: 21px 24px 21px 0;
	height: 12px; /* 54 - 42 */ }
#navigation li a:hover,
body#home li.nav-home a,
body#portfolio li.nav-portfolio a,
body#about li.nav-about a,
body#contact li.nav-contact a { background: url(_img/bg_nav_over_left.gif) 0 0 no-repeat; }
#navigation li a:hover span,
body#home li.nav-home a span,
body#portfolio li.nav-portfolio a span,
body#about li.nav-about a span,
body#contact li.nav-contact a span { background: url(_img/bg_nav_over_right.gif) 100% 0 no-repeat; }

/* Main
-------------------------*/
#main { 
	background: #858c98 url(_img/bg_main_left.gif) 0 0 repeat-y;
	clear: both;  }
#main .wrap { background: url(_img/bg_main_right.gif) 100% 0 repeat-y; }

#main .m-top {
	background: url(_img/bg_main_top.gif) 0 0 repeat-x;
	height: 220px;
	margin: 0 0 -180px; }
#main .m-bot {
	background: url(_img/bg_main_bottom.gif) 0 100% repeat-x;
	height: 217px;
	margin: -180px 0 0; }

/*----- Corners ----------*/
.c-top, .c-top span, .c-bot, .c-bot span { 
	background-repeat: no-repeat;
	display: block; }
.c-top, .c-bot { background-image: url(_img/bg_main_corners_left.gif); }
.c-top span, .c-bot span { background-image: url(_img/bg_main_corners_right.gif); }
.c-top, .c-top span { height: 220px; }
.c-bot, .c-bot span { height: 217px; }
.c-top { background-position: 0 0; }
.c-top span { background-position: 100% 0; }
.c-bot { background-position: 0 100%; }
.c-bot span { background-position: 100% 100%; }

/* Content
-------------------------*/
#content { 
	position: relative;
	padding: 0 41px 0 36px;
	width: 635px; /* 712 - 41 - 36 */
	min-height: 361px;
	height: auto !important;
	height: 361px; /* Min height = 361px */  }
	
#content .javascript_css {
	position: absolute;
	text-align: center;
	left: 100px;
	width: 512px;
	bottom: -15px; }

/* Pages
-------------------------*/
.page {
	overflow: auto;
	position: relative;
	clear: both; }

/*----- Home ----------*/
#home .page, #about .page { padding: 32px 20px 17px 22px; }
#home .page .text, #about .page .text  {
	float: left;
	width: 330px; }
#home .page .text h2 {
	font-size: 3.6em;
	font-weight: bold;
	margin-bottom: 30px;
	width: 330px; }
#home .page .text p {
	font-size: 1.4em;
	margin: 0 0 15px;
	width: 330px;
	clear: both; }
#home .page .text ul{
	font-size: 1.4em;
	list-style: square;
	margin: 5px 0 0 10px;
	clear: both; }
#home .page img { float: right; }
	
/*----- Portfolio ----------*/
#portfolio .page .clients {
	position: relative;
	overflow: hidden;
	margin: 24px 0 24px 40px;
	width: 555px; }
#portfolio .clients li { float: left; }

#portfolio .view-all, #portfolio .view-less { 
	text-align: center;
	margin: 0 0 10px;
	clear: both;}
#portfolio .view-all a, #portfolio .view-less a { 
	outline: 0;
	display: block; }

/* Small Slideshow */
#portfolio #small { display: none; }
#small .clients ul {
	position: relative;
	left: 0;
	width: 10000px; }
#small #arrow-left, #small #arrow-right {
	position: absolute;
	top: 50%;
	margin: -28px 0 0 0;
	width: 39px;
	height: 57px; }
#small #arrow-left { left: 1px; }
#small #arrow-right { right: 1px; }
#small #arrow-left a, #small #arrow-right a {
	background: none 0 0 no-repeat;
	width: 39px;
	height: 57px;
	outline: 0;
	text-indent: -10000px;
	display: block; }
#small #arrow-left a { background-image: url(_img/arrow_left.png); display: none; }
* html #small #arrow-left a { background-image: url(_img/arrow_left.gif); }
#small #arrow-right a { background-image: url(_img/arrow_right.png); }
* html #portfolio .page #arrow-right a { background-image: url(_img/arrow_right.gif); }

/* Enlarged Image */
#big { position: relative; height: 0; width: 0; overflow: hidden; }
#big ul { position: relative; float: left; width: 10000px; }
#big ul li { position: absolute; left: 0; visibility: hidden; }
#big ul li img { visibility: hidden; }

/* Thumbnails */
#portfolio #thumbnails { display: block; }
#portfolio #thumbnails ul {
	margin: 0 auto;
	width: 540px;
	padding: 0 0 0 5px; }
#thumbnails li {
	float: left; 
	width: 240px;
	padding: 10px;
	margin: 0 10px 0 0; }
#thumbnails .current { background: #171e2c; }
#thumbnails li a.t-img {
	float: left;
	width: 50px; }
#thumbnails li p {
	font-size: 1.2em;
	line-height: 1.6em;
	float: right;
	width: 185px; }
	
	
/*----- Contact ----------*/
#contact #content {
	padding: 30px 0; }
#contact #content h2 {
	font-size: 3.6em;
	font-weight: bold;
	margin: 0 0 30px 70px;
	width: 330px; }
#contact fieldset {
	border: 0;
	margin: 0 0 0 70px;
	clear: both; }
#content fieldset label {
	float: left;
	margin: 0 0 7px;
	clear: both; }
#content label span {
	float: left; 
	width: 75px;
	display: block; }
#contact input, #contact textarea {
	float: left;
	padding: 5px;
	width: 420px;
	font-family: Helvetica, sans-serif;
	font-size: 1.4em;
	margin-left: 15px;
	border: 2px solid #ccc; }
#contact label textarea {	height: 90px; }
#contact textarea:focus, #contact input:focus {	border: 2px solid #900; }
#contact #captcha-area { 
	float: left;
	margin: 30px 0 0 80px;
	clear: left; }
#contact input.submit-button {
	width: 100px;
	margin: 50px 0 0 30px;
	float: left; }