﻿body {margin:0; padding:0;font-family: arial, sans-serif;background-color:#b7dee8;}

#all{background-color:#fff;width:990px; margin:auto; border:1px solid #ccc; min-height: 400px; height:auto !important; height:400px;padding-bottom:0px;}
#header img{border:none; float:left;margin-left:2px; }

/*MAIN NAVIGATION*/
#nav{float:right;width:315px; height:265px; margin-right:18px;}
#nav ul{margin:0; padding:0;}
#nav ul li{float:right; list-style-type:none; height: 265px !important; width:67px;display:block; margin-left:1px;}
#nav ul li a{ margin:0; padding:0;  height: 265px; width:67px; display:block; text-decoration:none;}

li#one a{background: url(images/contact.jpg) no-repeat;}
li#one a:hover, li#one a.on {background: url(images/contact_on.jpg) no-repeat;}

li#two a{background: url(images/webdesign.jpg) no-repeat;}
li#two a:hover, li#two a.on {background: url(images/webdesign_on.jpg) no-repeat;}

li#three a{background: url(images/photography.jpg) no-repeat;}
li#three a:hover, li#three a.on {background: url(images/photography_on.jpg) no-repeat;}

li#four a{background: url(images/about.jpg) no-repeat;}
li#four a:hover, li#four a.on{background: url(images/about_on.jpg) no-repeat;}

/*SUB LEVEL NAVIGATION*/
#subnav{background: url(images/subnav.jpg) no-repeat; width:990px; height:82px;}
#subnav ul{float:right; margin:30px 80px 0 0;}
#subnav li{font: 0.85em arial, sans-serif; list-style-type:none; float:left; margin-left:10px;text-align:center; width:175px;}
#subnav li a{text-decoration:none; color:#259cba;}
#subnav li a:hover, #subnav li a.on {font-weight:bold; color:#259cba;}

/*CONTENT*/
.left{float:left; width:250px; }
.right{float:right; width: 700px;margin-right:30px;}
.inner {width:900px; float:left; margin-left:25px;}
h1, h2, h3{text-transform:capitalize;}
h1{font-size:1em; color:#2a9fc2;}
h2{font-size:0.9em; color:#30adc9;font-weight:bold;}
p, li{font-size:0.85em; color:#606060; line-height:130%; margin-right:10px;}
p.intro{font-size:0.95em; color:#30adc9;}
a{color:#259cba;}

/*TABLE*/
table{font-size:0.9em;}
table th{background-color: #2a9fc2; color:#fff; font-weight:bold;text-align:center; width:150px; vertical-align:top;}
table td{background-color:#eaeaea;padding:5px; text-align:center;}
table td.leftalign{ text-align:left; padding-left:10px;}

/*FORMS*/

.form ul{width: 100%;color: #000000;height: auto;text-align: left;text-decoration: none;list-style-type: none;}
.form li{list-style:none;padding-top:5px;padding-bottom:5px; font-size:0.85em; color:#606060;}
.form label{width: 4em;float: left;text-align: left;margin-right: 4em;display: block; }
.form input{font-size: 90%;width:230px; font-size:1.1em; color:#606060;border:1px solid #2a9fc2;}
.form textarea{width:230px;font-size:1em; color:#606060;font-family:Arial, Sans-Serif;border:1px solid #2a9fc2;}
.form checkbox{border: 1px, #e6308f;}
.form input.submit {width: 100px;margin-left: 0px; border:1px solid #2a9fc2;background-color:#fff;}

dt{width:15%; float:left; display:block; font-size:0.85em; color:#606060; padding-bottom:10px; font-weight:bold;}
dd{width:76%; float:left; display:block; font-size:0.85em; color:#606060; padding-bottom:10px;}

/*GALLERY*/
div.content {/* The display of content is enabled by a javascript generated style on the page.
	   This is so that the slideshow content won't display unless javascript is enabled. */
	display: none;float:right; margin-right:150px;	width:400px;}
div.content a, div.navigation a {text-decoration: none;color: #606060;}
div.content  a:focus, div.content  a:hover, div.content  a:active {text-decoration: underline;}
div.controls {margin-top: 5px;height: 23px;}
div.controls a {padding: 5px; font-size: 0.7em;}
div.ss-controls {float: left;}
div.nav-controls {float: right; }
div.loader {	background-image: url('loader.gif');background-repeat: no-repeat;background-position: center;width:400px;	height: 350px; }

div.slideshow {	clear: both; }
div.slideshow span.image-wrapper {float: left;padding-bottom: 12px;}
div.slideshow a.advance-link {padding: 2px;	display: block;border: 1px solid #ccc;}
div.slideshow img {border: none;display: block;}

div.download {float: right;}
div.embox {clear: both;border: 1px solid #ccc;background-color: #eee;	padding: 12px; }
div.image-title {font-weight: bold;	font-size: 1em; color:#606060;}
div.image-desc {line-height: 1.3em;padding-top: 12px;	font-size: 0.7em; color:#606060;}

div.navigation {	/* The navigation style is set by a javascript generated style on the page.
	   This is so that the javascript specific styles won't be applied unless javascript is enabled. */}
ul.thumbs {	clear: both;	margin: 0;padding: 0;}
ul.thumbs li {	float: left;padding: 0;	margin: 5px 10px 5px 0;	list-style: none;}
a.thumb {padding: 2px;	display: block;border: 1px solid #ccc;}
ul.thumbs li.selected a.thumb {background: #69bbd0;}
a.thumb:focus {outline: none;}
ul.thumbs img {border: none;display: block;}

div.pagination {clear: both;}
div.navigation div.top {margin-bottom: 12px;height: 11px;}
div.navigation div.bottom {	margin-top: 12px;}
div.pagination a, div.pagination span.current {display: block;	float: left;margin-right: 2px;padding: 4px 7px 2px 7px;border: 1px solid #ccc;}
div.pagination a:hover {background-color: #eee;text-decoration: none;}
div.pagination span.current {font-weight: bold;background-color: #2a9fc2;border-color: #529cba;color: #fff;}


/*FOOTER*/
#footer{background: url(images/footer.jpg) no-repeat; width:990px; height:82px; padding-top:25px; color:#606060; }

#footer .lhs{width:35%; float:left; margin-left:100px; text-align:left; font-size: 0.7em; }
#footer .rhs{width:35%; float:right;margin-right:100px; text-align:right; font-size: 0.7em;}
#footer .lhs a, #footer .rhs a{color:#606060; }

.clear{clear:both;}
span.hide{visibility:hidden;}
span.highlighted{font-weight:bold;}
