/* CSS Document */

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

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold; }
em { font-style:italic; }
a img { border:none; } /* Gets rid of IE's blue borders */
a	{outline:none;}

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

html, body {height: 100%;}
body {font-size: 85.5%; font-family:Trebuchet, Geneva, Tahoma, sans-serif; color:#CCC; background-color:#000;}

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

#pagewrap	{background:url(images/bg.jpg) repeat; width: 950px; margin: 0px auto -20px; min-height: 100%; height: auto !important; height: 100%;}
#push		{height: 20px;}

/* HEADER */
/* ----------------------------------------- */
#banner		{background:url(images/bg-banner.png) top left repeat-x; height:143px;}
a.logo		{float:left; }

/* NAVIGATION */
/* ----------------------------------------- */
#infomenu	{height:230px; }
ul#nav		{float:right; }
ul#nav li	{display:inline; }
ul#nav li a	{display:block; height:161px; text-indent:-9999px; float:left; margin:20px; border:5px #ccc; }

	ul#nav li.design a {
				width: 162px;
				background: url(/images/nav-anatomy.gif) top center no-repeat;
			}
			
	ul#nav li.price a {
				width: 162px;
				background: url(/images/nav-bottomline.gif) top center no-repeat;
			}
	ul#nav li.contact a {
				width: 162px;
				background: url(/images/nav-contactabout.gif) top center no-repeat;
			}
	ul#nav li a:hover  {background-position: bottom center;}

/* BAR */
/* ----------------------------------------- */
#bar		{background:url(images/bg-bannershort.png) top left repeat-x; height:80px;}
p.bar		{float:left; padding:22px; font-size:x-large;}

/* FOOTER */
/* ----------------------------------------- */
#footer		{margin: 0 auto; height:20px; background:url(images/bg-banner.png) repeat-x; padding-top:1px;}
p.footer	{text-align:center; color:#000000; font-size:x-small;}


/* CONTACT FORM */
/* ----------------------------------------- */
#contactform {
	width:860px;
	min-height:450px;
}

#contact-info {
	width: 200px;
	float:left;
	margin:25px 0px 25px 25px;
	text-align:justify;
	background:url(/images/bg-content.png);
	padding:15px;
}

#contact-info-tag {width:471px; float:right; margin-top:25px;}
	

.contactpic {margin-bottom:20px;}

#contact-area {
	width: 600px;
	margin-top: 25px;
	float:right;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 471px;
	font-family: Helvetica, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
	background:url(images/black-70.png);
	display: inline-block;
	padding: 5px 10px 6px;
	margin-top:10px;
	color: #ccc;
	text-decoration: none;
	font-style:color:#CCCCCC;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

#contact-area input.submit-button:hover {background:url(images/bg-content.png);}


label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}

/* MODALS */
/* ----------------------------------------- */
#modal			{width:800px; }
#modalgraphic	{width:540px; padding:20px 15px 0px 20px; float:left}
#modalinfo		{width:220px; padding:15px 0px 0px 0px; margin-top:10px; height:309px; float:right;}
p.modal			{color:#CCCCCC; margin-bottom:5px;}
p.launch		{color:#FFFFFF; margin:8px 0px 15px 0px;}
.pic			{border:5px solid #333333; padding:5px;}

.button {
	background:url(images/black-70.png);
	display: inline-block;
	padding: 5px 10px 6px;
	margin-top:10px;
	color: #ccc;
	text-decoration: none;
	font-style:color:#CCCCCC;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

.button:hover {background:url(images/bg-content.png);}
	

/* PORTFOLIO AREA */
/* ----------------------------------------- */
#portfolioarea		{height:240px; margin-top:20px; }
ul#portfolio		{float:left; }
ul#portfolio li		{display:inline; }
ul#portfolio li a	{
	display:block;
	height:100px;
	float:left;
	margin:10px 8px;
	filter:alpha(opacity=40);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
	-moz-opacity:0.4;
	-khtml-opacity: 0.40;
	opacity: 0.4;
	}
	
ul#portfolio li a:hover{
	filter:alpha(opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-moz-opacity:100;
	-khtml-opacity:1.00;
	opacity:1;
}

/* BOTTOM LINE MODAL */
/* ----------------------------------------- */
#bottomlinemodal {
	width:750px;
	padding:25px 25px 50px 25px;
}
ul.bottomline {padding:0px 0px 5px 30px;}


/* TYPOGRAPHY */
/* ----------------------------------------- */

.alert { background:red; color:white; } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes. */

h1.banner	{float:left; padding:30px 30px 20px 20px; font-weight:bold; font-size:xx-large;}
h2			{background:url(images/bg-content.png); font-weight:bold; padding:5px; font-size:large; text-transform:uppercase;}
h3			{padding:10px; color:#FFFFFF;}
p.bottomline	{padding:0px 15px 5px 15px; text-align:justify;}