/* Basic Elements */
html, body {
	margin: 0;
	}
#smallcontainer {
	width: 706px;
	margin: 20px auto;
	background: url('../images/bg-container.gif') repeat-y 0 0;
	}

#container {
	width: 894px;
	margin: 20px auto;
	background: url('../images/bg-container.gif') repeat-y 0 0;
	}
#header {
	width: 706px;
	height: 84px;
	background: url('../images/header.gif') no-repeat 0 0;
	}
#wrapper {
	float: left;
	width: 674px;
	}
#content {
	width: 594px;
	margin-left: 44px;
	padding: 16px 18px 0 18px;
	}
#home_content {
	width: 593px;
	height: 246px;
	margin-top: 24px;
	margin-left: 44px;
	padding: 16px 18px 0 18px;
	background-color: #f9f9f9;
	border-right: 1px solid #434343;
	}
#right {
	float: right;  /* originally float: right, width: 20%; */
	width: 220px;
	}
#footer {
	width: 630px;
	height: 20px;
	clear: both;
	background: #fff;
	margin-left: 44px;
	padding: 5px 0;
	border-top: 1px solid #434343;
	color: #333;
	font: normal 0.9em "Trebuchet MS", Helvetica, sans-serif;
	}

/* Sidebar */
#sidebar {
	width: 187px;
	padding: 0 16px 16px 16px;
	background: url('../images/bg-sidebar.gif') repeat-y 0 0;
	border-top: 1px solid #434343;
	border-right: 1px solid #434343;
	border-bottom: 1px solid #434343;	
	}



/* title graphic */
#title {
	display: inline; /* Correct margin in IE6 */
	float: right;
	width: 182px;
	margin-top: 40px;
	margin-right: 36px;  /* check size of title font for page alignment */
	}

/*---Navigation---*/

#navigation {
	display: inline; /* Correct margin in IE6 */
	width: 230px;
	height: 84px;
	float: left;
	margin-left: 72px;
}

ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}

ul.menu li {
	text-indent:-5000px;
	position: relative;
	float: left;
	}

/* Styles for Menu Items */
ul.menu li a {
	display: block;
	background: #fff; /* IE6 Bug */
	padding: 0;
	}

#home a {
	width: 84px;
	height: 84px;
	background: transparent url('../images/nav-menu.gif') no-repeat 0px 0px;
	display: block;
	}
#home a:hover {
	background-position: 0px -84px;
	}

#about a {
	width: 62px;
	height: 84px;
	background: transparent url('../images/nav-menu.gif') no-repeat -84px 0px;
	display: block;
	}
#about a:hover {
	background-position: -84px -84px;
	}

#work a {
	width: 84px;
	height: 84px;
	background: transparent url('../images/nav-menu.gif') no-repeat -146px 0px;
	display: block;
	}
#work a:hover {
	background-position: -146px -84px;
	}

/* active states */

#home_active {
	width: 84px;
	height: 84px;
	background: transparent url('../images/nav-menu.gif') no-repeat 0px -168px;
	display: block;
	}

#about_active {
	width: 62px;
	height: 84px;
	background: transparent url('../images/nav-menu.gif') no-repeat -84px -168px;
	display: block;
	}

#work_active {
	width: 84px;
	height: 84px;
	background: transparent url('../images/nav-menu.gif') no-repeat -146px -168px;
	display: block;
	}


/* home slideshow area */

.slideshow {
	display: inline;
	width: 322px;
	height: 228px;
	float: right;
	margin: 0 0 18px 18px;
	padding: 0;
	border: 1px solid #434343;
	}
	
.slideshow img {  
    background-color: #f9f9f9;  
    width:  322px; 
    height: 228px; 
    top:  0; 
    left: 0 
} 	


#details {
	width: 100%;
	height: 140px;
	}



/* get in touch area */

#contact {
	display: inline;
	width: 35%;
	float: right;
	margin: 30px 0 18px 18px;
	padding: 12px;
	background-color: #fcfcfc;
	}

h2.contact {
	margin-top: 0.1em;
	}

.turquoise {
	font-style: italic;
	color: #3e868f;
	}

.gray {
	color: #666;
	}


/* work thumbnail area */

ul.worklist {
 	width: 594px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.worklist img {
	border: 1px solid #434343;
	}

.worklist p {
	font-size: 1em;
}


li.thumb {
	display: block;
	float: left;
	width: 186px;
	margin-bottom: 18px;
	margin-right: 17px;
}

li.thumb_lastchild {
	display: block;
	float: left;
	width: 186px;
	margin-bottom: 18px;
	margin-right: 0px;
}


div.category_name {
	clear: both;
	width: 618px;
	height: 50px;
	}




/* buttons */

#projectlist {
	width: 618px;
	margin-left: 44px;
	height: 24px;
	overflow: hidden;
	}

#backtotop {
	width: 618px;
	margin-left: 44px;
	margin-bottom: 20px;
	height: 24px;
	overflow: hidden;
	}
	
#viewwork {
	width: 25%;
	height: 24px;
	margin: 24px 0 24px 62px;
	overflow: hidden;
	}	
	
#learnmore {
	width: 25%;
	height: 24px;
	margin-top: 40px;
	overflow: hidden;
	}

/* left button */

a.button {
    background: transparent url('../images/button-a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px "Trebuchet MS", Helvetica, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('../images/button-span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 

a.button:hover {
    background: transparent url('../images/button-a-hv.gif') no-repeat scroll top right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:hover span {
    background: transparent url('../images/button-span-hv.gif') no-repeat;
} 

/* right button */

a.button_r {
    background: transparent url('../images/button-a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: right;
    font: normal 12px "Trebuchet MS", Helvetica, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button_r span {
    background: transparent url('../images/button-span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 

a.button_r:hover {
    background: transparent url('../images/button-a-hv.gif') no-repeat scroll top right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button_r:hover span {
    background: transparent url('../images/button-span-hv.gif') no-repeat;
} 



/* styles for project pages */

.piece {
	margin-bottom: 30px;
	margin-top: 4px;
	}

.piece img {
	border: 1px solid #434343;
	}

.piece p {
	margin-top: 0;
	}



/* style for animation on project pages */

#animation {
	display: block;
	width: 592px;
	float: left;
	margin-bottom: 24px;
	border: 1px solid #434343;
	}





/* footer text areas */

#copyright {
	float:left;
	height: 20px;
	}


#footer_menu {
	float:left;
	height: 20px;
	}

ul.bottom_nav {
	list-style-type: none;
	margin-left: 20px;
	margin-top: 0;
	padding: 0;
}

li.bottom_nav {
	display: inline;
	font-style: normal;
	padding-right: 10px;
	}




/* Additional styles */

p, td, li, ul, ol, h1, h2, h3, h4, h5, h6 {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	text-align: left;
	color: #282828;
	}

p {
	font-size: 0.8em;
	line-height: 1.5em;
	padding: 0;
	margin-top: 0.1em; /* was 10px */
	}

ul {
	list-style-type: square;
	font-size: 0.8em;
	font-weight: normal;
	line-height: 1.8em;
	padding-left: 24px;
}		
	
	
img {
	border: 0;
	}

h1 {
	display: none;	
	}

h2 {
	font-size: 1.3em;
	margin-top: 1.2em;
	}

h3 {
	font-size: 1.1em;
	margin-top: 0.8em;
	line-height: 1.5em;
	}	

a {
	color: #ff6600;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	}

a:hover {
	color: orange;
	}