/* http://meyerweb.com/eric/tools/css/reset/ compressed */ body{margin:0;padding:0;border:0;outline:0;vertical-align:baseline}html,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,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}/* remember to define focus styles! */:focus{outline:0}/* remember to highlight inserts somehow! */ins{text-decoration:none}del{text-decoration:line-through}/* tables still need 'cellspacing="0"' in the markup */table{border-collapse:collapse;border-spacing:0}

/*
*
*	tags
*
*/

html { width: 100%; height: 100%; }

body { 
	width: 100%; 
	height: 100%; 
	background: #4b4b4b; 
	font-family: Lucida Grande, Helvetica, Arial, sans-serif; 
	color: #636363; 
	font-size: 14px;
	line-height: 16px;
}

h1 { 
	font-size: 24px; 
	padding: 10px 0 15px 0; 
	margin: 0; 
	color: #21549b;
}

h2 { font-size: 20px; padding: 10px 0 5px 0; margin:  0; }

a { color: #21549b; }

p { padding: 7px 0 7px 0; margin: 0; }

img { vertical-align: bottom; }

ul { list-style: disc; padding: 5px 0 0 25px; margin: 0; }

ul li { padding: 3px 0 3px 0; }

/*
*
*	end: tags
*
*/



/*
*
*	layout
*
*/



#wrapper { width: 795px; margin: 0 auto 0 auto; position: relative; }


#window { width: 716px; height: 588px; padding: 24px 40px 55px 39px; background: url(images/global/background-window.png) no-repeat; position: absolute; z-index: 1; top: 50px; } 

#header { width: 716px; height: 23px; text-align: center; }

#header p { padding: 5px 0 0 0; font-size: 12px; text-shadow: #ebebeb 0 1px 0; color: #000; line-height: 12px; }


#content { width: 700px; height: 550px; padding: 0 16px 0 0; overflow: hidden; }

.page { width: 660px; height: 510px; padding: 20px; overflow: hidden; }

.left-column, .right-column { float: left; overflow: hidden; }


#about .left-column, #contact .left-column { width: 425px; padding: 0 20px 0 0; }

#about .right-column, #contact .right-column { width: 215px; }


#portfolio .left-column { width: 450px; height: 510px; padding: 0 20px 0 0; }

#portfolio .right-column { width: 190px; height: 510px; }

#portfolio .right-column img { margin: 0 0 10px 0; }





#footer { width: 716px; height: 16px; }

#footer p { font-size: 9px; color: #000; }

p#percent, p#copy { float: left; display: inline-block; text-align: center; padding: 3px 0 0 0; line-height: 9px; }

p#percent { width: 63px; margin: 0 21px 0 0; }

p#copy { width: 170px; }


#toolbar { width: 53px; height: 396px; padding: 17px 6px 0 6px; background: url(images/global/background-toolbar.png) no-repeat; position: absolute; z-index: 2; top: 105px; left: -30px; }


#social { width: 53px !important; margin: 0 0 0 3px; }

#social a { float: left; margin: 0 4px 4px 0; }



#layers { width: 220px; position: absolute; z-index: 3; top: 250px; right: -150px; }

.top { width: 220px; height: 79px; overflow: hidden; background: url(images/global/background-layers-top.png) no-repeat; }

.middle { width: 193px; padding: 0 22px 0 5px; background: url(images/global/background-layers-middle.png) repeat-y;  }

.bottom { width: 220px; height: 27px; overflow: hidden; background: url(images/global/background-layers-bottom.png) no-repeat;  }


#swatches { width: 192px; height: 95px; padding: 30px 23px 27px 6px; background: url(images/global/background-swatches.png) no-repeat; position: absolute; z-index: 4; top: 105px; right: -145px; }

#swatches a { width: 11px; height: 11px; border-bottom: solid 1px #000000; border-right: solid 1px #000000; float: left; }


/* menu */

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

ul#menu li { padding: 0; margin: 0; border-bottom: solid 1px #888888; }

ul#menu li a { 
	width: 126px; 
	height: 23px; 
	padding: 9px 0 0 67px; 
	font-size: 9px; 
	background: url(images/global/menu-off.jpg) no-repeat left top; 
	text-decoration: none; 
	white-space: nowrap; 
	display: block; 
	color: #000; 
}

ul#menu li a.current { background: url(images/global/menu-on.jpg) no-repeat left top #b5d5ff; font-weight: bold; }

/* end: menu */


/* form */

input#name, input#email { height: 32px; }

input#name, input#email, textarea#comments { 
	width: 320px; 
	border: solid 1px #d7d7d7;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	clear: both;
	background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#ffffff));
	background: -moz-linear-gradient(top, #ececec, #ffffff);
	float: left;
	font-family: Lucida Grande, Helvetica, Arial, sans-serif;
	font-size: 18px;
	padding: 10px;
}

input#name:focus, input#email:focus, textarea#comments:focus { border-color: #666666; }

input#submit { margin: 20px 0 0 0; }

label { 
	font-size: 16px; 
	padding: 20px 0 5px 0; 
	float: left; 
	clear: both; 
}

label.error { font-weight: bold; font-style: italic; color: #FF0000; }

/* end: form */



/*
*
*	end: layout
*
*/


/* misc styles */

.border { border: solid 1px #5d5d5d; }

.clear { clear: both; height: 0; overflow: hidden; }