/* ======================== */
/* = Eric Meyer CSS Reset = */
/* ======================== */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}

body{
	background-color: #e8ebec;
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	color: #787878;
	text-shadow: 1px 1px 1px #fff;
}

strong{
	font-weight: bold;
}

em{
	font-style: italic;
}

a{
	text-decoration: none;
	color: #b64926;
}

h1{
	font-size: 40px;
	font-weight: bold;
	margin: 20px 23px;
	color: #ccc;
	text-align: center;
	width: 680px;
	overflow: hidden;
}

div#wrapper{
	width: 726px;
	margin: 20px auto;
}

div.box-top, div.box-bottom{
	background: #e8ebec url(../img/box-top.jpg) bottom center no-repeat;
	width: 726px;
	height: 18px;
	float: left;
}

div.box-bottom{
	background: #e8ebec url(../img/box-bottom.jpg) top center no-repeat;
}

div.box-middle{
	background: #e8ebec url(../img/box-middle.jpg) top center repeat-y;
	width: 726px;
	float: left;
}

div#mainbody{
	margin: 20px 0 5px 0;
}

.button{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-image: -moz-linear-gradient(top, #fff, #eee);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 10%, from(#fff), to(#eee));
	display: block;
	
}

div#header{
	float: left;
	margin-left: 23px;
	width: 680px;
	border-bottom: 1px solid #ddd;
	-moz-box-shadow: 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 0 #fff;
}

h1.logo span{
	margin-left: -9999px;
}

h1.logo{
	background: transparent url(../img/logo.png) top left no-repeat;
	height: 29px;
	width: 172px;
	float: left;
	margin: 6px 0 0 0;
	border: 0;
}

ul#main-nav{
	float: right;
	margin: 10px 0 26px 0;
}

ul#main-nav li{
	float: right;
	margin-left: 15px;
}

ul#main-nav li a{
	border: 1px solid #ccc;
	background-color: #eee;
	-moz-box-shadow: 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 0 #fff;
	padding: 8px 20px;
	font-size: 13px;
	font-weight: bold;
}

ul#main-nav li a:hover{
	background: #f2f2f2;
	border-color: #ccc;
}

ul#main-nav li a.active{
	background-color: #b64926;
	background-image: none;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 10%, from(#973d20), to(#b64926));
	color: #fff;
	text-shadow: none;
	border-color: #923c09;
}

div#content{
	position: relative;
	float: left;
}

/* ============= */
/* = HOME PAGE = */
/* ============= */
#tag span{
	margin-left: -9999px;
}

#tag{
	background: transparent url(../img/tag.png) center center no-repeat;
	width: 726px;
	height: 45px;
	float: left;
	margin-top: 20px;
}

#carousel-container{
	width: 654px;
	margin: -10px 0 0 36px;
	float: left;
}

#carousel-container ul li{
	padding-bottom: 20px;
}

#carousel-container ul li h3{
	font-size: 30px;
	font-weight: bold;
	color: #545454;
}


#carousel-container ul li p{
	margin: 10px 0;
	line-height: 22px;
}

.scrollArrow span{
	margin-left: -9999px;
}

.scrollArrow{
	height: 66px;
	width: 41px;
	display: block;
	position: absolute;
	top: 190px;
}

.scrollRight{
	background: transparent url(../img/arrow-right.png) top left no-repeat;
	right: -20px;
}

.scrollRight:active{
	background-position: 0 -71px;
}

.scrollLeft{
	background: transparent url(../img/arrow-left.png) top left no-repeat;
	left: -20px;
}

.scrollLeft:active{
	background-position: 0 -71px;
}

.portfolio-image{
	width: 654px;
	display: block;
	margin: 0 auto;
	padding: 24px 0;
}

.viewsite{
	margin: 20px 0 0 0;
	border: 1px solid #ccc;
	background-color: #eee;
	-moz-box-shadow: 0 1px 0 #fff;
	-webkit-box-shadow: 0 1px 0 #fff;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: bold;
	display: block;
	float: right;
	color: #b64926;
}

.viewsite:hover{
	color: #8e2800;
	background: #f2f2f2;
}

/* ========= */
/* = ABOUT = */
/* ========= */
ul#aboutme{
	font-size: 26px;
	font-weight: bold;
	margin: 23px;
	border: 1px solid #ddd;
	border-top: 1px solid #ddd;
}

ul#aboutme li{
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ddd;
	width: 680px;
}

ul#aboutme li a.expand{
	color: #545454;
	width: 100%;
	display: block;
	padding: 20px;
	width: 640px;
	background: -moz-linear-gradient(top, #f5f5f5, #eee);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#eee));
}

ul#aboutme li a.expand:hover{
	color: #7da729;
	background: -moz-linear-gradient(top, #fff, #f5f5f5);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f5f5f5));
}

ul#aboutme li:last-child{
	border-bottom: 1px solid #fff;
}

.aboutmedesc p{
	font-weight: normal;
	padding: 10px 23px;
	font-size: 22px;
	line-height: 26px;
	background: #eee;
}

.aboutmedesc p a:hover{
	text-decoration: underline;
}

/* ============== */
/* = CONTACT ME = */
/* ============== */
#form-container{
	margin: 23px;
}


/* ========== */
/* = FOOTER = */
/* ========== */

#footer-middle{
	padding: 10px 0;
}

.contactme{
	background: transparent url(../img/btn-contactme.png) top right no-repeat;
	display: block;
	float: right;
	height: 53px;
	width: 173px;
	margin-right: 20px;
}

.contactme span{
	margin-left: -9999px;
}

#footer h4{
	float: left;
	margin-left: 20px;
	color: #b64926;
	font-size: 36px;
	font-weight: bold;
	margin-top: 10px;
}