@charset "UTF-8";
/* CSS Document */

a:link { color: #339999; text-decoration: none; }
a:visited { color: #33cccc; text-decoration: none; }
a:hover { color: #336666; text-decoration: none; }
a:active { color: #33cccc; text-decoration: none; }

body {
	background-color: #e5f4f4;
	color: #434343;
	font: normal 62.5% Verdana, Arial, sans-serif;
}

p {	font-size: 1.4em; line-height: 135%; }
h1 { color: #CA3263; font: normal 5.0em Georgia, serif; }
h2 { clear: both; color: #CA3263; font: normal 3.6em Georgia, serif; margin: 0 0 5px 0; }
h3 { color: #333333; font: bold 1.6em Verdana, Arial, sans-serif; margin: 0 0 10px 0; }

strong, b { font-weight: bold; }

.clear { clear: both; }

/*************** HEADER ***************/

#header {
	background: #351109 url("../images/header.jpg") repeat-x top left;
	height: 188px;
}

#header-content {
	background: url("../images/glow.png") no-repeat top left;
	margin: 0px auto;
	width: 960px;
	height: 175px;
}

 /* For IE6 ONLY */
* html #header-content {
	background: none;
}

.logo {
	position: absolute;
	width: 317px;
	height: 68px;
	margin: 70px 0 0 20px;
}

ul#nav {
	position: absolute;
	margin: 0 0 0 470px;
	padding: 50px 0 50px 0;
}

ul#nav li {
	display: inline;
	font: 2.8em Georgia, serif;
	padding: 50px 10px;
	*padding: 50px 3px 50px 10px;
	margin: 0 2px;
	*margin: 0 5px;
}

ul#nav li.selected { background: url("../images/nav-gradient.png") repeat-x; }
ul#nav li a:visited, ul#nav li a:active { color: #339999; }
ul#nav li a:hover {	background: url("../images/nav-gradient.png") repeat-x; color: #339999; }


/*************** MAIN CONTENT AREA ***************/

#main { background: #E5F4F4 url("../images/main-gradient.gif") repeat-x top left; }

#main-content, #portfolio-content, #about-content, #contact-content {
	margin: 0px auto;
	padding: 20px 0;
	text-align: left;
	width: 960px;
}

#about-content p, #contact-content p { margin: 0 0 20px 0; }
#portfolio-content p { margin: 0 0 15px 0; }
#main-content p a:hover, #portfolio-content p a:hover, #about-content p a:hover, #contact-content p a:hover { background-color: #ccc; }
#about-content h1, #contact-content h1 { font: normal 4.5em Georgia, serif; margin: 0 0 5px 0; }
#portfolio-content h1 { font: normal 4.5em Georgia, serif; margin: 0px 0px 30px 0px; }
#about-content h2, #contact-content h2 { font: normal 3.1em Georgia, serif; }
#portfolio-content h2 { color: #333; font: bold 1.6em Verdana, Arial, sans-serif; margin: 0 0 3px 0; }
#main-content h2 a:hover, #portfolio-content h2 a:hover, #about-content h2 a:hover, #contact-content h2 a:hover { background-color: #ccc; }

.adobeIcon { margin: 0 0 -3px 2px; }

.checklist {
	font-size: 1.4em;
	line-height: 165%;
	margin: 0px 0px 15px 0px;
}

.checklist li {
    background: transparent url(../images/bullet.png) no-repeat;
    background-position: 0 7px;
	padding-left: 15px;
}

.home-features li {
	display: inline;
	float: left;
	margin: 0 35px 10px 0;
	width: 285px;
}

.home-features li img {
	margin: 0 0 10px 0;
	width: 270px;
	height: 70px;
}

.home-features li a img { border: 7px solid #CCC; }
.home-features li a:hover img { border: 7px solid #9d9d9d; }
.home-features li p { margin: 0 0 10px 0; }

.intro {
	font-size: 1.7em;
	line-height: 135%;
}

.portfolio-features li {
	display: inline;
	float: left;
	margin: 0 35px 25px 0;
	width: 285px;
}

.portfolio-features li img {
	width: 270px;
	height: 170px;
	margin: 0 0 10px 0;
}

.portfolio-features li a img { border: 7px solid #CCC; }
.portfolio-features li a:hover img { border: 7px solid #9d9d9d; }
.portfolio-features li span { font-size: 1.1em; margin: 0; }

.portfolio-main {
	border: 10px solid #ccc;
	width: 650px;
	height: 450px;
}

.portrait {
	float: left;
	width: 273px;
	height: 213px;
	margin: -7px 10px 20px -12px;
}

#sidebar {
	float: right;
	width: 250px;
	margin: 40px 0px 0px 30px;
}


/*************** FOOTER ***************/

#footer-bar { background-color: #2a0c05; border-bottom: 1px solid #cce2e1; clear: both; height: 15px; }

#footer { background-color: #81b7b4; }

#footer-content {
	margin: 0px auto;
	min-height: 91px;
	text-align: left;
	width: 960px;
}

.copyright {
	float: left;
	font-size: 1.2em;
	width: 775px;
	margin: 10px 0 0 0;
}

.social {
	float: left;
	font-size: 1.2em;
	width: 160px;
	height: 30px;
	margin: 7px 0 0 0;
}

.social img { margin: 0px 0px -7px 0px; width: 24px; height: 24px; }

/*************** FORM ***************/

form { border-top: 1px solid #bcbcbc; width: 650px; }
label { margin: 10px 0px 5px 0px; display: block; }
textarea { margin: 5px 0px 10px 0px; display: block; }


/*************** STEP CAROUSEL ***************/

.stepcarousel {
	position: relative; /*leave this value alone*/
	border: 10px solid #ccc;
	overflow: scroll; /*leave this value alone*/
	width: 650px; /*Width of Carousel Viewer itself*/
	height: 450px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt {
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}

.stepcarousel .panel {
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 0; /*margin around each panel*/
	width: 650px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

#mygallery-paginate { padding: 10px 0 0 0; text-align: center; width: 670px; }