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

* Filename: style.css
* Version: 1.0.0 (2009-05-16) YYYY-MM-DD
* Author: Shaking Paper
* Description: Stylesheet for Andronas Architecture.

*/

/* 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,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: Arial, Helvetica, Sans-serif;	
	font-size: 100%;
	font-style: inherit;
	font-weight: 100;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}

ul, ol {
	list-style:none;
}

a {
	text-decoration: none;
}

/* End CSS Resset */

/* Begin Structure */

body {
	background: #FFFFFF none repeat scroll 0 0;
	color: #585453;
	padding: 63px 0 0 70px;
}

#wrapper {
	height:auto;
	width: 840px;
}

	#sidebar {
		height:480px;
		width: 120px;
	}
	
		#sidebar p {
			color: #92908F;
			font-size: 10px;
			padding: 5px 0;
		}

		ul#navigation { /* main site navigation */
			margin: 63px 0 130px 0;
			width: 100px;
		}
	
		ul#navigation li a {
			color: #92908F;
			font-size: 12px;
			line-height: 20px;
		}
		
		ul#navigation li a:hover, ul#navigation li.current a, .bold {
			color: #000;
		}
		
		#sidebar input#yuulik-yuulik {
			border: 1px solid #92908F;
			height:18px;
			padding: 3px 0 0 2px;
			width:120px;
		}
		
		#sidebar input.submit {
			background-color: #FFF;
			color:#92908F;
			height: 26px;
			border: 1px solid #92908F;
			margin-top: 5px;
			width: 70px;
		}
		
		#sidebar input.submit:hover {
			background-color:#DCDCDC;
			color:#000;
		}
	
	#content { /* container element for left/right floated site content */
		font-size: 11px;
		min-height:488px;
  		height:auto !important;
  		height:488px;
  		line-height: 16px;
  		padding-top: 122px;
		width: 720px;
		/clear:both;
	}
	
	body#home #wrapper #content {
		min-height:488px;
  		height:auto !important;
  		height:488px; 
		padding: 50px 0 72px 65px;
		width: 655px;
	}
	
	body.selected_works #wrapper #content {
		padding-top: 0;
	}
	
		#show {
			position: relative;
			width: 650px;
			height: 410px;
			overflow: hidden;
		}
		
		#show img {
			position: absolute;
			left: 0;
			top: 0;
			width: 650px;
			height: 410px;
		}
	
		#content p {
			padding-bottom: 16px;
		}
		
		#content p.last_para { /* adds padding to last paragraph on page */
			padding-bottom: 50px;
		}
		
		#content a {
			color: #000;
			text-decoration: underline;
		}
		
		#content a:hover {
			text-decoration: none;
		}
	
		#left_220 {
			padding-right: 20px;
			width:220px;
		}
		
		body.selected_works #wrapper #content #left_220 {
			padding-top: 120px;
		}
		
			#left_220 ul li a {
				color: #92908F;
				line-height: 20px;
				text-decoration: none;
			}
			
			#left_220 ul li a:hover, #left_220 ul li.current a {
				color: #000;
			}
		
		#right_480 {
			width: 480px;
		}
		
		body.selected_works #wrapper #content #right_480 {
			padding-top: 27px;
			height: 593px;
		}
		
			/* structure/style for selected works gallery */
			
			.mask {
				position:relative;
				width:480px;
				height:420px;
				overflow-x: hidden;
			}
			
			#works {
				position:absolute;
			}
			
			#works div{
				width:480px;
				height:410px;
				float:left;
			}
			
			#works div p {
				display: none;
			}
			
				span.credit {
					color: #B7B5B5;
					font-size: 10px;
				}
			
			#works div .landscape {
				padding-top: 90px;
			}
			
			p#handles4 { /* sliding image controls */
				padding-top: 8px;
			}
			
			p#handles4 span {
				color: #92908F;
				padding: 3px 2px 3px 4px;
				margin: 4px;
				cursor: pointer;
				text-align: center;
			}
			
			p#handles4 span.active {
				background-color: #e6e5e5;
				color: #585453;
			}
			
		/* Contact form structure/styles */
			
		#right_480 form {
			color: #92908F;
			font-size: 12px;
			padding-top: 96px;
		}
		
		.contact_382 {
			width:382px;
			font-size: 16px;
			padding: 5px 0 0 2px;
		}
		
		.contact_182 {
			width: 182px;
			font-size: 16px;
			padding: 5px 0 0 2px;
		}
		
		#right_480 input {
			color:#92908F;
			height: 26px;
			border: 1px solid #92908F;
			margin: 0;
		}
		
		#right_480 textarea {
			color: #92908F;
			height: 86px;
			font-family: arial, helvetica, sans-serif;
			padding: 5px 0 0 2px;
		}
		
		#right_480 p.right {
			padding-right: 96px; 
		}
		
		input.send { 
			background-color: #FFF;
			color: #92908F;
			width: 60px;
		}
		
		input.send:hover {
			color: #000; 
			background-color: #DCDCDC;
		}
		
		p.message {
			clear: both;
			}		
		
		#left_360 {
			padding-right: 70px;
			width: 360px;
		}
		
		#right_290 {
			width: 290px;
		}
		
		#left_500 {
			width: 500px;
		}
		
			#left_500 img {
				margin-bottom: 4px;
			}
		
		#right_150 {
			width: 150px;
		}
		
	.clear {
		height: 1px;
		width: 840px;
		clear: both;
	}

	#footer {
		height: 20px;
		width:600px
		clear: both;
		margin-bottom: 15px;
	}
	
		#footer p, #footer a {
			color: #92908F;
			font-size: 10px;
		}
		
		#footer a:hover {
			text-decoration: underline;
		}

	.left { /* applies left float to any element with this class */
		float:left;
	}
	
	.right { /* applies right float to any element with this class */
		float:right;
	}
	
	.underline {
		text-decoration: underline;
		color: #000;
	}
	
	.italic {
		font-style: italic;
	}