/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

:focus {
	outline: 0;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


/* SETUP
---------------------------------------------------*/

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, section, nav, article {
	display: block;
}

@font-face {
	font-family: 'ArtBrushMedium';
	src: url('Artbrush.eot');
	src: local('ArtBrush Medium'), local('ArtBrush'), url('Artbrush.ttf') format('truetype');
}

body{
	background:url(../images/background.jpg) #d7e5f0 no-repeat 50% top fixed;
	color:#535353;
	font: 13px/22px Helvetica, Arial, sans-serif;
}

#container {
	margin: 0 auto;
	width: 810px;
}

h1,
h2{
	font-family: 'ArtBrushMedium', Helvetica, Arial, sans-serif;;
	letter-spacing:0.5px;
}


h1{
	color:#1f5d98;
	font-size: 40px;
	margin-bottom:20px;

}

header h2 {
	color: #fff;
	font-size: 33px;
	line-height:30px;
	padding-top:8px;
	text-align: left;
	text-indent:30px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);


}

h3 {
	font-size: 28px;
	line-height: 22px;
	padding: 11px 0;
}

#about h3{
	color:#1f5d98;
}

#contact h3{
	color:#98130a;
}

.inner{
	margin:5px 20px 0px 20px;
}

p {
	margin-bottom:10px;
}





/* SECTIONS + RIBBONS
---------------------------------------------------*/

section{
	background:#FFF;
	clear: both;
	margin: 0px auto;
	padding-bottom:40px;
	position: relative;
	width: 750px;
	z-index: 90;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

header {
	float: left;
	height: 40px;
	position: relative;
	left:-15px;
	width: 780px;
	z-index: 100;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-khtml-border-top-right-radius: 4px;
	-khtml-border-top-left-radius: 4px;
	-moz-border-top-right-radius: 4px;
	-moz-border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;

}

section#top header{
	-moz-box-shadow:none;
 	-khtml-box-shadow: none;
  	-webkit-box-shadow:none;
}

.triangle-l,
.triangle-r {
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	z-index: -1;
	
}

.triangle-l {
	left: -30px;
	top: 25px;
	*top:-15px; /*IE 7*/
}

.triangle-r {
	left: 750px;
	top: -5px;
	*top:-45px;/*IE 7*/
}

#about {background:url(../Images/BlueGrad.gif) repeat-x 0 40px #fff; margin-top:10px; position:relative;}
#about header{background:url(../Images/h2AboutBG.gif) #2c67a9 repeat-x;}
#about .triangle-l{ border-color: transparent #0e3c6d transparent transparent;}
#about .triangle-r{ border-color: transparent transparent transparent #0e3c6d }
#about {border-right:2px solid #7da0c4; border-left:2px solid #7da0c4;}

#portfolio {background:url(../Images/greenGrad.gif) repeat-x 0 40px #fff;}
#portfolio header{background:url(../Images/h2PortfolioBG.gif) #4fa92c repeat-x;}
#portfolio .triangle-l{ border-color: transparent #215e0a transparent transparent;}
#portfolio .triangle-r{ border-color: transparent transparent transparent #215e0a }
#portfolio {border-right:2px solid #7ca494; border-left:2px solid #7ca494;}

#contact {background:url(../Images/redGrad.gif) repeat-x 0 40px #fff;}
#contact header{background:url(../Images/h2ContactBG.gif) #b40706 repeat-x;}
#contact .triangle-l{ border-color: transparent #871208 transparent transparent;}
#contact .triangle-r{ border-color: transparent transparent transparent #871208;}
#contact {border-right:2px solid #ac98a5; border-left:2px solid #ac98a5;}

#photographs {background:url(../Images/yellowGrad.gif) repeat-x 0 40px #fff;}
#photographs header{background:url(../Images/h2PhotographstBG.gif) #d2ae30 repeat-x;}
#photographs .triangle-l{ border-color: transparent #a68108 transparent transparent;}
#photographs .triangle-r{ border-color: transparent transparent transparent #a68108; }
#photographs {border-right:2px solid #bbbfa6; border-left:2px solid #bbbfa6; border-bottom:2px solid #bbbfa6; margin-bottom:20px;}


/* ABOUT
---------------------------------------------------*/

#about p{
	width:70%;
}

article {
	position:absolute;
	bottom:0px;
	left:505px;
	width:287px;
	height:252px;
	background:url(../Images/polaroid.png);
}



/* PORTFOLIO
---------------------------------------------------*/

#portfolio ul li {
	float:left;
	width:335px;
	margin:0 35px 25px 0px;
	*margin:0 28px 25px 0px;/*IE 7*/
	*padding:2px;/*IE 7*/
	*border:1px solid #CCC;/*IE 7*/
}

#portfolio ul li:hover {
	*border:1px solid #999;/*IE 7*/
}

#portfolio ul li a {
		display:block;
		-webkit-transition: -webkit-transform .15s linear;
		-moz-transition: -moz-transform .15s linear;
		-khtml-transition: -moz-transform .15s linear;
		
}

#portfolio ul li.even {
	margin-right:0px;
	/*css3 would use nth-child(even) but ie don't like it*/
}

#portfolio ul li a:hover{
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-khtml-transform: scale(1.03);
	position: relative;
	z-index: 5;
}

#portfolio ul li a img { 
	width:335px;
	height:270px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	
}

#folioItems{
	display:none;
}


/* CONTACT
---------------------------------------------------*/

#contact .inner{ 
	overflow:hidden;
}

#contactLinks h3,
#contactLinks a{
	color:#98130a;
}

#contact_form{}

#contact_form {
	float:left;
	width:44%;
	margin-right:15px;
}

form fieldset {
	border:none;
}

form fieldset legend {}

label {}

form fieldset p {
	margin:0 0 10px 0;
}

label.error {
	font-weight:normal;
	text-align:left;
	width:100%;
	padding:2px 0 2px 22px;
	background: transparent url(../images/cancel.gif) no-repeat scroll left;
	color:#CC0033;
	font-size:0.9em;
	text-transform:none;
}

input.text-input,
textarea {
	font-size:1.3em;
	width:98%;
	color:#333;
	border:1px solid #999;
	-moz-box-shadow: inset 1px 1px 10px #dfdfdf;
	-webkit-box-shadow: inset 1px 1px 10px #dfdfdf;
	-khtml-box-shadow: inset 1px 1px 10px #dfdfdf;
}

input.text-input {
	padding:5px 0px 0px 5px;
	height:31px;
}

textarea {
	height:100px;
	padding:2px;

}

label {
	text-transform:uppercase;
	font-size:1.2em;
}
input.button {
	font-family: 'ArtBrushMedium', Verdana, Geneva, sans-serif;
	border:none;
	padding:5px 10px;
	margin:5px 0px 0px 0px;
	color:#fff;
	background:#98130a;
	float:right;
	width:120px;
	font-size:20px;
	letter-spacing:1px;
	-moz-box-shadow: inset 1px 1px 10px #690606;
	-webkit-box-shadow: inset 1px 1px 10px #690606;
	-khtml-box-shadow: inset 1px 1px 10px #690606;

}
input.button:hover {
	background:#ebccca;
	color:#98130a;
	-moz-box-shadow: inset 1px 1px 10px #c9a7a7;
	-webkit-box-shadow: inset 1px 1px 10px #c9a7a7;
	-khtml-box-shadow: inset 1px 1px 10px #c9a7a7;

}

#messageToUser {}
#messageToUser h4 {
	font-size:20px;
	color:#98130a;
}

#contactLinks{float:left; width:53%;}


#contactLinks ul.social {
	margin:10px 0 0 15px;
}
#contactLinks ul.social li {
	text-indent:30px;
	margin-bottom:15px;
	height:24px;
	background: no-repeat left;
}

#contactLinks ul.social li#em {
	background: no-repeat left url(../images/email-24x24.png);
}

#contactLinks ul.social li#cv {
	background: no-repeat left url(../images/pdf-24x24.png);
}

#contactLinks ul.social li#fb {
	background: no-repeat left url(../images/facebook-24x24.png);
}
#contactLinks ul.social li#tw {
	background: no-repeat left url(../images/twitter-24x24.png);
}
#contactLinks ul.social li#li {
	background: no-repeat left url(../images/linkedin-24x24.png);
}
#contactLinks ul.social li#fl {
	background: no-repeat left url(../images/flickr-24x24.png);
}

#contactLinks ul.social li a {
	text-decoration:none;
	padding:1px 2px;
	border-bottom:1px dotted #d5d5d5;
}

#contactLinks ul.social li a:hover {
	border-color:#98130a;
	background-color:#ebccca;
}

/* PHOTOGRAPHS
---------------------------------------------------*/

div.content {
	display: none;
	float: right;
	width: 530px;
}

div.slideshow-container {
	position: relative;
	clear: both;
	height: 540px;
	background:#f6f6f6;
	border:1px solid #cdcdcd;
}

div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 530px;
	height: 540px;
}

div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

div.slideshow a.advance-link {
	display: block;
	width: 530px;
	height: 540px;
	line-height: 540px;
	text-align: center;
}

div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {
	text-decoration: none;
}

div.slideshow img {
	vertical-align:middle;
	text-align:center;
	border: 3px solid #000;
}

#thumbs {
	width:170px;
	overflow:hidden;
}

#thumbs .pagination {
	margin-bottom:2px;

}

#thumbs .pagination span.current,
#thumbs .pagination a {
	text-align:center;
	display:inline-block;
	width:auto;
	padding:1px 2px;
	margin:5px;
}


#thumbs .pagination span.current {
	font-weight:bold;
	font-size:larger;
	color:c0980e;
}

#thumbs .pagination a {
	color:#c0980e;
	text-decoration:none;
	border-bottom:1px dotted #d5d5d5;
}

#thumbs .pagination a:hover {
	border-color:#c0980e;
	background-color:#f3e3ac;
}

#thumbs ul {}

#thumbs ul li {
	float: left;
	margin: 0px 12px 11px 2px;
}
#thumbs ul li a {
  display:block;
   -webkit-transition: -webkit-transform .15s linear;
   -moz-transition: -moz-transform .15s linear;
   -khtml-transition: -moz-transform .15s linear;
}

#thumbs ul li a img {
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

#thumbs ul li a:hover {
  -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -khtml-transform: scale(1.08);
  position: relative;
  z-index: 5;
}

#thumbs ul li.even {
	margin-right:0px;
	/*css3 would use nth-child(even) but ie don't like it*/
}


/* FOOTER
---------------------------------------------------*/

section#bottom{
	background:none;
	-moz-box-shadow:none;
 	-khtml-box-shadow: none;
  	-webkit-box-shadow:none;
	padding-bottom:10px;
}

section#bottom p{
	text-align:right;
	font-size:smaller;
}

section#bottom p a{
	color:#37559c;
	text-decoration:none;
	padding:1px 2px;
	border-bottom:1px dotted #d5d5d5;
}

section#bottom p a:hover{
	border-color:#37559c;
	background-color:#ccd7f1;
}