/*------------------------------------
Project: = Marti Stone Photography
Author: Jason Andreoni
Created: = 7/1/09
Version: 1.0
------------------------------------ */

/*
TOC

1. LAYOUT
2. NAVIGATION
3. TYPOGRAPHY
4. IMAGES
----------------------- */



/*
1. LAYOUT----------------------------------------------------*/



body {
	background: #253338 url(../images/bgPattern.png) top left repeat;
	color: #333;
	font-family: Arial;
	
}
.clear {
	clear: both;
}
#wrapper {
	width: 780px;
	margin: 10px auto 5px;
	background-color: #DDD;
	border: 3px solid #FCFFFD;
}
#header {
	background: url(../images/header2.png) top center no-repeat;
	height: 142px;
	margin:  auto 0;
	width: 100%;
	overflow: hidden;
	left: 0;
	top: 0;
}
#leftWell {
	float: left;
	width: 230px;
}
#rightWell {
	float: left;
	width: 500px;
	margin:0 0 20px 20px;
}
#monoSlideshow {
	padding:0;
}

#slideshow {
	border:2px solid #AAA;
	height:675px;
	width:450px;
	margin: 20px 0 20px 40px;
}
#aboutContent {
	margin: 20px 0 0 0;
	float: left;
}
#aboutContent p {
	line-height: 1.4em;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
#footer {
	font-size: 60%;
	padding-top: 5px;
	color: #FFF;
	margin: 0 auto 30px;
	width: 780px;
}
#footer a {
	color: #FFF;
}
#leftExtraContent {
	background-color: #DDD;
	border-top: 1px solid #AAA;
	margin-left: 20px;
	padding-top: 20px;
}
#footer span.left {
	float: left;
	margin-left: 20px;
}
#footer span.right {
	float: right;
	text-align: right;
	margin-right: 20px;
}

/*
2. NAVIGATION----------------------------------------------------*/

#navigation {
	font-size: 110%;
	text-align: left;
	padding: 5px 0 20px;
	font-weight: 700;
	margin: 20px 0 0 20px;
	list-style: none;
}
#navigation li {
	padding: 3px 10px;
}
#navigation a:link,
#navigation a:visited {
	text-decoration: none;
	color: #242629;
}
#navigation a:hover {
	border-bottom: 2px solid #FFF;
	padding-bottom: 2px;
}
#portfolio #navigation .portfolio a,
#about #navigation .about a,
#contact #navigation .contact a,
#clients #navigation .clients a {
	border-bottom: 2px solid #FFF;
}
a:link, a:visited {
	color: #666;
	text-decoration: none;
}
a:hover {
	color: #333;
	text-decoration: underline;
}
.introMessage a:link, a:visited {
	text-decoration: underline;
}
.introMessage a:hover {
	color: #6d1511;
	text-decoration: underline;
	border: none;
}
.newsFacebook {
	margin-right: 6px;
}
/*
3. TYPOGRAPHY----------------------------------------------------*/


h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
	}

#thankyouMessage {
	width: 200px;
	background-color: #333;
	color: #FFF;
	padding: 10px;
	font-size: 90%;
	margin-top: 40px;
	line-height: 1.4em;
}

#contactAddressInfo {
	border-bottom:1px solid #AAAAAA;
	color:#242629;
	margin: 20px 0 0 40px;
	width:415px;
	padding-bottom: 30px;
}
.introMessage {
	background-color: #DDD;
	color: #000;
	font-size: 78%;
	line-height: 1.4em;
	font-style: italic;
	font-weight: 100;
	padding-left: 10px;
}
ul.clientList {
	margin-bottom: 20px;
}
.clientType {
	list-style: none;
	font-weight: 700;
	text-transform: capitalize;
}
.client {
	margin-left: 20px;
	font-size: 80%;
}

/*
4. IMAGES----------------------------------------------------*/

#marti {
	background: url(../images/marti.jpg) top left no-repeat;
	width: 180px;
	height: 180px;
	margin: 0 auto 20px;
	border: 3px solid #AAA;
}

/*
4. PORTFOLIO SLIDER----------------------------------------------------*/

#portfolioWrapper {
    width: 760px;
    margin: 0 auto;
}

#intro {
    margin: 40px 0;
}

h2 {
    margin: 0;
    margin-bottom: 14px;
    padding: 0;
}

#slider {
    width: 500px;
    margin: 20px 20px 0 0;
    position: relative;
    font-size: 60%;
}

.scroll {
    height: 380px;
    width: 500px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
    background: #FCFFFD url(../images/content_pane-gradient.gif) repeat-x scroll left bottom;
    margin-bottom: 40px;
}

.scrollContainer div.panel {
    padding: 20px;
    height: 510px;
    width: 460px;
    color: #000;
}

#shade {
    background: #EDEDEC url(../images/shade.jpg) no-repeat 0 0;
    height: 50px;
}

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 9px;
}

ul.navigation li {
    display: inline;
    margin-right: 5px;
}

ul.navigation a {
    padding: 10px;
    color: #242629;
    text-decoration: none;
}

ul.navigation a:hover {
    background-color: #f6f6f6;
    color: #000;
    text-decoration: underline;
}

ul.navigation a.selected {
    background-color: #fff;
    text-decoration: underline;
    color: #000;
}

ul.navigation a:focus {
    outline: none;
}

.scrollButtons {
    position: absolute;
    top: 150px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -20px;
}

.scrollButtons.right {
    right: -20px;
}

.hide {
    display: none;
}

.portfolioTable1 td,
.portfolioTable2 td,
.portfolioTable3 td,
.portfolioTable4 td,
.portfolioTable5 td,
.portfolioTable6 td {
	padding: 0 6px;
}
.portfolioTable1 tr,
.portfolioTable2 tr,
.portfolioTable3 tr,
.portfolioTable4 tr,
.portfolioTable5 tr,
.portfolioTable6 tr {
	margin-bottom: 6px;
}
.portfolioTable1 img,
.portfolioTable2 img,
.portfolioTable3 img,
.portfolioTable4 img,
.portfolioTable5 img,
.portfolioTable6 img {
	border: 2px solid #AAA;
	margin-bottom: 10px;
	width: 100px;
	height: 100px;
}
.portfolioTable1 img a:hover,
.portfolioTable2 img a:hover,
.portfolioTable3 img a:hover,
.portfolioTable4 img a:hover,
.portfolioTable5 img a:hover,
.portfolioTable6 img a:hover {
	background: url(../images/hoverOverlay.png) top left repeat;
}

/*
CONTACT FORM ----------------------------------------*/
#contact-wrapper {  
    border:1px solid #e2e2e2;
    margin: 10px 0 0 40px;
}  
#contact-wrapper div {  
    clear:both;  
    margin:1em 0;  
}  
#contact-wrapper label {  
    display:block;  
    float:none;  
    font-size:16px;  
    width:auto; 
    color: #000;
}  
.error {
	color:#FF0000 !important;
}
form#contactform input {  
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;  
    border-style:solid;  
    border-width:1px;  
    padding:5px;  
    font-size:16px;  
    color:#333;  
    width:400px; 
}  
form#contactform textarea {  
    font-family:Arial, Tahoma, Helvetica, sans-serif;  
    font-size:100%;  
    padding:0.6em 0.5em 0.7em;  
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;  
    border-style:solid;  
    border-width:1px;
    width:400px; 
}
.submit {
	width: 130px !important;
	}