/* 
Theme Name: MESstudios 4.0
Theme URI: http://www.messtudios.com
Description: This theme was created by Owen Piccirillo for MESstudios.
Version: 4.0
Author: Owen Piccirillo
Author URI: http://www.messtudios.com
*/

/* Main and Reset
---------------------------------------------------------------------------------*/
* {margin: 0; padding: 0; outline:none;}
ul, li {list-style-type: none }
.clr {clear:both;}
img {border:0;}
a:link, a:visited, a:hover, a.selected { color:#FFF; text-decoration:none;}

.left {float:left;}
.right {float:right;}

body { 
	font:13px Arial, Helvetica, sans-serif;
	background:url(images/bg.gif);
	color:#FFF;
	overflow-x:hidden;
}
p { padding-bottom:10px;}
/* Header
---------------------------------------------------------------------------------*/
#bg-fix {
	background:url(images/bg-head.gif) repeat-x;
}
#header-wrapper {
	background:url(images/bg-big.jpg) no-repeat top center;
	}
#header {
	width:962px;
	margin:0 auto;
	position:relative;
	height:235px;
}
.logo {
	margin:77px 0px 0px 15px;
}
.hire {
	position:absolute;
	top:0;
	right:0;
	background:url(images/employ-hire-owen-piccirillo.gif) no-repeat;
	height:75px;
	width:211px;
}
.hire a:link, .hire a:visited{
	display:block;
	height:75px;
	width:211px;
}

/* Navigation
---------------------------------------------------------------------------------*/
.navigation {
	padding-top:15px;
}
.navigation li {
	display:inline;
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	padding:0px 3px 0px 3px;
}
.navigation li a:link, .navigation li a:visited{
	color:#979797;	
}
.navigation li a:hover{
	color:#666;
}
.padadjust {
	padding:0px;
}
.contactnav {
	color:#ccc;
}
.contactnav a:link, .contactnav a:visited {
	text-decoration:underline;
	color:#ccc;	
}
.el {color:#333;}

/* Content
---------------------------------------------------------------------------------*/
#content {
	width:962px;
	background:url(images/bg-content.gif) repeat-y;
	margin:0 auto;

}
#left {
	width:580px;
	float:left;
	display:inline;
}
.frontend {
	background:url(images/front-end-web-design.gif);
	height:158px;
	width:557px;
	margin:5px 0px 20px 19px;
}

#right {
	display:inline;
	float:right;
	width:345px;
	margin-right:2px;
	background-color:#f8f8f8;
}
.intro {
	background-color:#f8f8f8;
	padding:5px 10px 5px 0px;
}
.servicesright {
	background-color:#f8f8f8;
	padding:10px 10px 0px 0px;
}
#right h2 {
	color:#000;
	font-size:14px;
	text-transform:uppercase;
	font-family:"Times New Roman", Times, serif;
	font-weight:100;

}
#right p{
	color:#666;
	line-height:20px;
	font-size:13px;
	font-family:"Times New Roman", Times, serif;

}
/* Portfolio
---------------------------------------------------------------------------------*/
.portfolio-top {
	background:url(images/bg-port-top.gif) no-repeat bottom;
	color:#000;
	margin:0px 1px 0px 1px;
	height:55px;
	width:960px;
	position:relative;
} 
.payment {
	position:absolute;
	top:7px;
	right:12px;
}
.portfolio-top h2{
	color:#000;
	font-size:18px;
	text-transform:uppercase;
	font-family:"Times New Roman", Times, serif;
	font-weight:100;
	text-indent:-9999px;
	padding:10px 0px 10px 20px;
	background:url(images/portolio-title.gif) no-repeat 15px;
} 
.portfolio-wrapper{
	margin:0 auto;
	width:962px;
	background:url(images/bg-port.gif);
} 
.portfolio-wrapper li{
	float:left;
	margin:23px 23px 0px 23px; 
	display:inline;
} 
/* Testimonials
---------------------------------------------------------------------------------*/
.testimonials-top {
	background:url(images/bg-port-top.gif) no-repeat top #FFF;
	color:#000;
	padding-top:10px;
	margin:0px 1px 0px 1px;
	height:55px;
} 
.testimonials-top h2{
	color:#000;
	font-size:18px;
	text-transform:uppercase;
	font-family:"Times New Roman", Times, serif;
	font-weight:100;
	padding:35px 0px 0px 20px;
	text-indent:-9999px;
	background:url(images/testimonials-title.gif) no-repeat 15px;
} 

.testimonials{
	width:962px;
	margin:0 auto;
	padding-bottom:15px;
	color:#666;
	background:url(images/bg-content-test.gif);
}
.testimonials li{
	padding:10px 23px 10px 23px;
		color:#666;
	line-height:20px;
	font-size:13px;
	font-family:"Times New Roman", Times, serif;
}
.testname {
	color:#4d9dc2;
	text-transform:uppercase;
}

/* Footer
---------------------------------------------------------------------------------*/
#footer {
	background:url(images/bg-footer.gif);
	height:98px;
}
#footer p{
	color:#999;
	font-size:10px;
	font-family:Verdana, Geneva, sans-serif;
	padding:45px 0px 0px 25px;
	}
/* Carousel
---------------------------------------------------------------------------------*/
#carousel {
	width:557px;
	height:345px;
	overflow:hidden;
	position:relative;
	margin:5px 0px 10px 18px;
}

#slides {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:557px;
	height:341px;
}

/* remove the list styles, width : item width * total items */	
#slides ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;	
	width:1671px;			
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
	width:557px;
	height:341px;	
	float:left;
}

#slides li img {
}

/* Styling for prev and next buttons */
#buttonswrap {
	position:relative;
}
#buttons {
	padding:0 0 5px 0;
	position:absolute;
	top:0;
	right:0;
	z-index:0;
}

#buttons a {
	display:block; 
	width:31px; 
	height:32px;
	text-indent:-999em;
	float:left;
	outline:0;

}

a#prev {
	background:url(images/arrow.gif) 0 -31px no-repeat; 
}

a#prev:hover {
	background:url(images/arrow.gif) 0 0 no-repeat;
}

a#next {
	background:url(images/arrow.gif) -32px -31px no-repeat;
}

a#next:hover {
	background:url(images/arrow.gif) -32px 0 no-repeat;
}