@charset "UTF-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-color: #A1986B;
	background-image:url(../images/background.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #222;
	font-size: 13px;
	line-height: 1.25em;
}
p.home {
				width: 550px;
				padding: 0px 0px 0px 45px;
				}
p.head {
				width: 500px;
				padding: 0px 0px 0px 18%;
				}
#fadeshow2toggler{
			margin: 0px auto;
	    	text-align: center;
			clear:right;
			padding: 15px 0px 0px 0px;
		}
	

/*General links*/

p a:link {
	color: #874565;
	text-decoration: underline;
}
p a:visited {
	text-decoration: underline;
	color: #444;
}
p a:hover {
	font-weight: bold;
	text-decoration: underline;
	color: #874565;
}
p a:active {
	text-decoration: underline;
}
/*End general links*/

.mirthbody #container { 
	width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.mirthbody #header { 
	padding: 0px 0px 0px 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding; was 0px 10px 0 20px */
	margin: 0;} 


/*Navigation styling*/
.mirthbody #navigation {
	margin: 15px 1%; 
	float: left; 
	width: 100px; 
	font-size: medium;
	list-style-type: none;
	padding: 15px 0px;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width:100px
}

ul li {
	padding: 0px 0px -5px 0px;	
	position: relative;
	width:98px;
}
#portfolio a:hover {
		font-weight: bold;
		text-decoration: none;
		color: #874565;
		}

#clients a:hover {
		font-weight: bold;
		text-decoration: none;
		color: #738845;
		}
		
#about a:hover {
		font-weight: bold;
		text-decoration: none;
		color: #FAA21B;
		}
		
#contact a:hover {
		font-weight: bold;
		text-decoration: none;
		color: #7CA09C;
		}

/* keep folowing styles together..........................*/
* html ul ul {
	margin-left:-16px;/* ie5 fix */
	voice-family: "\"}\""; 
	voice-family: inherit;
}	
* html ul li {float:left;/* hide float from ie5*/}
* html ul ul {
	width:148px;	
	voice-family: "\"}\""; 
	voice-family: inherit;	
}
* html ul ul {margin-left:0;/* hide margin from ie5*/}

/* keep above styles together .............*/

li ul {
	display:none;
}
li ul li{border:none;}
/* Styles for Menu Items */
ul li a {
	display:block;
	text-decoration: none;
	color: #333;
	height:2em;	
	padding:0 5px;
}
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
   color: #777;
   background-color: none;
}

/* set dropdown to default */
li:hover li a, li.over li a {
    color: #333;
   background-color: none;
   height:1.5em;
}
/* Sub Menu Styles */
li ul li a { 
	height:1em;
        padding:0px 0px 0px 25px;
   }
#projects{
	height:2em;
} 
/* The magic */
li:hover ul, li.over ul { 	display:block  } 

/*End navigation styling*/


.mirthbody #mainContent { 
	margin: 0px 0px 25px 15%; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 15px 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	text-align: left;
	clear:both;
} 
.mirthbody #contactContent { 
	margin: 0px 0px 25px 15%; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 15px 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	text-align: left;
	width: 600px;
}
.mirthbody #clientsContent { 
	margin: 0px 0px 25px 15%; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 15px 0px 200px 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	text-align: left;
	width: 600px;
} 
#clientsContent ul{
				list-style-type: none;
				width: 800px;
				margin: 15px auto;		
				padding: 10px;	
				clear: left;	
			}

#clientsContent li {
				float: left;
				width: 800px;
				position: relative;
				margin: 0px;
				padding: 2px 0px;
			}
.mirthbody #footer { 
	text-align: center;
	font-size: small;
	clear: both;
} 
.mirthbody #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*Homepage and portfolio image styling by:
Sander van Leeuwen
http://home.react.nl/~sandervl/jquery-madness/
*/
  
	    img{
			border: none;
		}
	 
	    h2{
	    	font-size: medium;
			color: #333;
			text-align: left;
			padding: 0px 0px 0px 200px;
		}
	    #T-content{
			margin: 0px auto;
	    	text-align: center;
			clear:right;
			padding: 15px 0px 0px 0px;
		}
	
		ul#T {
				list-style-type: none;
				width: 432px;
				width: 492px;
				overflow: visible;
				margin: 0 auto;				
			}

		ul#T li {
				float: left;
				width: 144px;
				height: 183px;
				overflow: hidden;
				position: relative;
				margin: 20px 20px 0px 0px;
			}

		ul#T li:hover {
				overflow: visible;
				z-index: 200;
			}

		ul#T li img {
				position: absolute;
				left: -84px;
			}

		ul#T li a:hover img {
				z-index: 300;
			}

		ul#T li span.overlay {
				background: url(overlay.png) no-repeat left top;
				position: absolute;
				width: 144px;
				height: 183px;
				left: 0;
				top: 0;
				z-index: 20;
			}

		ul#T li p {
				color: #FFF;
				font: 14px Arial;
				position: absolute;
				float: left;
				left: 0;
				bottom: -15px;
				padding: 10px;
				background: #874565;
			}
		
/*End homepage image styling*/

/*Portfolio slideshow*/

#slideshow {
	margin: 0px auto;
    width: 350px;
	padding: 40px 0px 0px 0px;
	}
#fadeshow1 {
	border: 5px solid #874565;
	}
#slideshowtoggler {
	width: 350px;
	border-width:0;
	padding: 10px 0px;	
	text-align: center;
	}
.status {
	margin:0 50px; 
	font-weight: bold;
	font-size: small;
	text-align: center top;
	padding: 0px;
	}


/*End portfolio slider*/

    img{
			border: none;
		}
	 
	    h2{
	    	font-size: medium;
			color: #333;
			text-align: left;
			padding: 0px 0px 0px 200px;
		}
	    #pic1{
			margin: 0px auto;
	    	text-align: center;
			clear:right;
			padding: 15px 0px 0px 0px;
		}
	
		ul#pic2 {
				list-style-type: none;
				width: 432px;
				width: 492px;
				overflow: visible;
				margin: 0 auto;				
			}

		ul#pic2 li {
				float: left;
				width: 200px;
				height: 200px;
				overflow: hidden;
				position: relative;
				margin: 20px 20px 0px 0px;
			}

		ul#pic2 li:hover {
				overflow: visible;
				z-index: 200;
			}

		ul#pic2 li img {
				position: absolute;
				left: -84px;
			}

		ul#pic2 li a:hover img {
				z-index: 300;
			}

		ul#pic2 li span.overlay {
				background: url(overlay.png) no-repeat left top;
				position: absolute;
				width: 200px;
				height: 200px;
				left: 0;
				top: 0;
				z-index: 20;
			}

		ul#pic2 li p {
				color: #FFF;
				font: 14px Arial;
				position: absolute;
				float: left;
				left: 0;
				bottom: -15px;
				padding: 10px;
				background: #874565;
			}