/*---------------------------------------------------------------

Style Sheet: rhodesyman.com
Version:   1.0

-----------------------------------------------------------------*/

/*---------------------------- RESET ----------------------------*/

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,textarea { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

/*---------------------------- COMMON ---------------------------*/

body{
	background: #B3B3B3;
}

p, a, h2, h3{
	font-family: calibri, arial, sans-serif;
	font-size: 15px;
	text-decoration: none;
}

p{
	margin-bottom: 10px;
	color: #000;
}

a{
	color: #C1272D;
	font-weight: bold;
}

a:hover{
	text-decoration: underline;
}

h2{
	font-size: 24px;
	font-weight: bold;
	margin: 0px;
	color: #C1272D !important;
	text-shadow: 1px 1px 0 #999999;
}

h3{
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
	color: #777777;
}

h1{
	height: 0;
	overflow: hidden;
	position: relative;
}

/*---------------------------- STRUCTURE ----------------------------*/

#container{
	margin: 20px auto 0 auto;
	width: 900px;
	overflow: hidden;	
}


#top{
	margin: 0;
	width: 900px;
	height: 150px;
	background: url('../images/top.gif') no-repeat;
	z-index: 0;
	position: relative;
}

#content{
	margin: -1px 0;
	width: 900px;
	background: url('../images/middle.gif') repeat-y;
	position: relative;
}

#bottom{
	margin: 0px auto 20px auto;
	width: 900px;
	height: 100px;
	background: url('../images/bottom.gif') no-repeat;
}

#bottom p{
	color: #666;
	top: 55px;
	left: 380px;
	width: 400px;
	position: relative;
	font-weight: bold;
	text-shadow: 0 1px 0 #EEEEEE;
}


/*---------------------------- Navigation ----------------------------*/

#menu_container{
	width: 400px;
	height: 30px;
	left: 426px;
	top: 143px;
	overflow: hidden;
	position: relative;
	z-index: 5000;
}

#menu_container #nav{
	margin: 0;
	padding: 0;
}

#menu_container #nav li{
	display: inline;
}

#menu_container #nav li a, #menu_container #nav li span{
	float: left;
	height: 0px;
	padding-top: 30px;
	overflow: hidden;
	background-image: url('../images/menu.gif'); 
	background-repeat: no-repeat;
}

/* Buttons */

#menu_container #nav li#nav-home a{ background-position: 0px 0px; width: 75px; }
#menu_container #nav li#nav-portfolio a{ background-position: -75px 0; width: 125px; }
#menu_container #nav li#nav-pricing a{ background-position: -200px 0; width: 103px; }
#menu_container #nav li#nav-contact a{ background-position: -303px 0; width: 97px; }

/* Over */

#menu_container #nav li#nav-home a:hover{ background-position: 0px -30px; }
#menu_container #nav li#nav-portfolio a:hover{ background-position: -75px -30px; }
#menu_container #nav li#nav-pricing a:hover{ background-position: -200px -30px; }
#menu_container #nav li#nav-contact a:hover{ background-position: -303px -30px; }

/* Pressed */

#menu_container #nav li#nav-home a:active{ background-position: 0px -60px; }
#menu_container #nav li#nav-portfolio a:active{ background-position: -75px -60px; }
#menu_container #nav li#nav-pricing a:active{ background-position: -200px -60px; }
#menu_container #nav li#nav-contact a:active{ background-position: -303px -60px; }

/* On */

#menu_container.home #nav li#nav-home a{ background-position: 0px -90px !important; }
#menu_container.portfolio #nav li#nav-portfolio a{ background-position: -75px -90px !important; }
#menu_container.pricing #nav li#nav-pricing a{ background-position: -200px -90px !important; }
#menu_container.contact #nav li#nav-contact a{ background-position: -303px -90px !important; }


/*---------------------------- HOME ----------------------------*/

#welcome{
	margin-left: 75px;
}

.split{
	float: left;
	width: 360px;
	min-height: 100px;
	margin: 10px 0 0 0;
	display: inline;
}

.splitleft{
	margin-left: 75px;
	margin-right: 15px;
}

.splitright{
	margin-left: 10px;
}

.split p{
	margin-top: 5px;
	margin-left: 0px;
	margin-bottom: 20px;
}

#quotes{
	float: left;
	margin-left: 75px;
	width: 750px;
	display: inline;
}

#quotes ul{
	margin: 20px auto 0 auto;
	width: 395px;
}

#quotes ul li{
	display: inline;
	float: left;
	width: 360px;
	padding: 10px;
	border: 2px solid #CCCCCC;
	margin: 10px auto 0 auto;
	background: #EEE;
}

#quotes ul li p, #quotes ul li p a{
	font-size: 13px;
	margin-top: 5px
}

#quotes ul li p a{
	color: #C1272D;
}

#quotes ul li p a:hover{
	text-decoration: underline;
}

/****** PORTFOLIO ********/

.site{
	float: left;
	width: 233px;
	height: 200px;
}

.margin{
	margin-left: 75px;
	margin-right: 75px;
}

.end{
	margin-right: 0px !important;
}

.site a{
	text-decoration: none;
	display: block;
	color: #C1272D;
	text-align: center;
}

.site a p{
	margin-top: 0px;
	margin: 0px !important;
	color: #C1272D;
	font-size: 16px;
}

.site a:hover{
	text-decoration: underline;
}

.site a img{
	position: relative;
	margin-top: 15px;
	height: 150px;
	border: 1px solid #DDDDDD;
}

/* Easy Slider */

    /* image replacement */
        .graphic, #header h1, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */

/* clearfix */

		#content:after, ul:after{
			content:"."; 
			display:block; 
			height:0; 
			clear:both; 
			visibility:hidden;
			}
		#content, ul{
			display:block;
			}
		/*  \*/
		#content, ul{
			min-height:1%;
			}
		* html #content, * html ul{
			height:1%;
			}

    /* // clearfix */

.sliders{
	width: 750px;
	margin-left: 75px;
	position: relative;
}

.sliders p{
	margin-bottom: 20px;
}

#slider{
	margin: 20px 0 20px 25px;
	background: #EEEEEE;
	border: 2px solid #CCCCCC;
	overflow:hidden;
	position: relative;
}

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:700px;
		height:200px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn{ 
		display:block;
		width:25px;
		height:77px;
		position:absolute;
		left:0px;
		top: 108px;
		}	
	#nextBtn{ 
		left:729px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:25px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}												

/* // Easy Slider */

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

label { width: 10em; float: left;}
label.error { float: right; color: red !important; padding-left: .5em; vertical-align: top; width: 150px !important;}
.cmxform p { clear: both; }
.submit { margin-left: 10em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

#result{
	margin-top: 20px;
	text-align: center;
}

form.cmxform{
	margin: 20px auto 0 auto;
	border: 2px solid #CCCCCC;
	width: 370px;
}

form.cmxform fieldset{
	margin: 10px 10px 5px 10px;
}

form.cmxform label{
	display: inline-block;
	line-height: 20px;
	vertical-align: top;
	font-size: 14px;
	font-family: arial, sans-serif;
	color: #C1272D;
	text-align: right;
	margin-right: 10px;
}

form.cmxform fieldset ul{
	margin: 0px;
	padding: 0;
}

form.cmxform fieldset li{
	list-style: none;
	padding: 1px;
	margin: 0;
	margin-bottom: 5px;
}

form.cmxform label {
	width: 70px; /* Width of labels */
}

form.cmxform .submit{
	height: 30px;
	width: 84px;
	background: url('../images/submit.gif') no-repeat;
	color: transparent;
	text-transform: capitalize;
	cursor: pointer;
	border: 0px solid #FFFFFF;
	float: right;
	text-indent: -9999px;
	margin: 0px 10px 5px 250px;
}

form.cmxform .submit:hover{
	background-position: 0px -30px;
}

form.cmxform input, form.cmxform textarea{
	width: 260px;
	font-size: 14px;
	font-family: calibri, arial, sans-serif;
	color: #000;
	border: 1px solid #CCCCCC;
}

form.cmxform textarea{
	height: 140px;
	resize: none;	
}