/*	=== === === === === === === === === ===

	Desc: *general* Screen Style Sheet
	Author: Modifications by Marcel Santilli 
	Date: 6/25/08
	+ Colours
	- *colour hex* *colour name* (*purpose*)
	
=== === === === === === === === === === */
/*=STRUCTURE
=== === === === === === === === === === */
* {
	margin:0;
	padding:0;	
}
body{
	height:100%;
	background:url(../images/bg_main.png) repeat-x top fixed;	
}
#content {
	margin-top:4em;
}
#wrapper {
	width:820px;
	margin:0 auto;
	padding:0px;
	top:0px;
}
#mastHead{
	width:100%;
	height:140px;
}
#mainMovie2{
	width:820px;
	display:block;
}
#mainMovie {
	width:820px;
	display:block;

}
#footer {
	margin-top:6em;
	clear:both;
	width:100%;
	
}
/*=STYLE
=== === === === === === === === === === */
body{
	background-color:#d1cec5;
}
img {
	border: none;
}
body, a:link, a:visited{
	color:#000000;
	font: normal normal 11.5px Arial, Helvetica, sans-serif;
	text-decoration:none;
}
p, .p, .contact #mainContent ul, .contact #mainContent2 p a{
	color:#5b5b5b;
	line-height:2em;
}
h2, .h2 {
	font-size:14px;
	margin-bottom:1em;
	font-weight:bold;
	letter-spacing:.05em;
	color:#444;
}

hr {
	background-color:#999999;
	color:#e7e4dc;
	height: 1px;
	border:none;
}
#shadowTop {
	height:6px;
	background:url(../images/shadow_top.png)no-repeat top;
}
#shadowBottom {
	height:6px;
	background:url(../images/shadow_bottom2.png)no-repeat bottom;
	margin-bottom:6em;
}
#img-wrapper{
	background:url(../images/shadow_sides.png)repeat-y;
	width:100%;
	padding-left:10px;
}
.style1 {
	color: #FF0099;
	font-weight: bold;
}
.style3 {font-size: 18px}
.style4 {
	color: #666666;
	font-size: 14px;
}
.style5 {
	color: #BBE900;
	font-weight: bold;
}

/*=HEADER
=== === === === === === === === === === */
.logo a{
	background:url(../images/logo.png) no-repeat;
	display:block;
	float:right;
	width:118px;
	height:80px;
}
.logo a span{
	display:none;
}
/*=MAINNAV
=== === === === === === === === === === */
#mainNav {
	width: 100px;
	height: 140px;
	background: url(../images/main_menu.png);
	float:left;
}

#mainNav li { 
	list-style: none; 
}
#mainNav a {
	width:100%;
	height:21px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}
#main1 a:hover {background:url(../images/main_menu.png)  -100px 0px no-repeat;}
#main2 a:hover {background:url(../images/main_menu.png)  -100px -21px no-repeat;}
#main3 a:hover {background:url(../images/main_menu.png)  -100px -42px no-repeat;}
#main4 a:hover {background:url(../images/main_menu.png)  -100px -63px no-repeat;}
#main5 a:hover {background:url(../images/main_menu.png)  -100px -84px no-repeat;}
#main6 a:hover {background:url(../images/main_menu.png)  -100px -105px no-repeat;}

/*=SUBNAV
=== === === === === === === === === === */
#subNav {
	width: 300px;
	height: 80px;
	background: url(../images/subNav.png);
	float:left;
}

#subNav li { 
	list-style: none; 
	float:left;
}
#subNav a {
	width:100px;
	height:80px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}

#web a:hover, #web .selected  {background: url(../images/subNav.png)  0px -80px no-repeat;}
#interactive a:hover, #interactive .selected {background: url(../images/subNav.png)   -100px -80px no-repeat;}
#others a:hover, #others a.selected {background: url(../images/subNav.png)  -200px -80px no-repeat;}
/*=CONTENT
=== === === === === === === === === === */

/*=CONTENT HOME
=== === === === === === === === === === */

.home #shadowBottom {
	height:6px;
	background:url(../images/shadow_bottom.png)no-repeat bottom;
	margin-bottom:2em;
}
.home #mainMovie {

	padding:1px;/*margin collpase hack*/
}
.home #mainContent {
	width:100%;
	float:left;
	margin-bottom:4em;
}
.home #mainContent2 {
	width:100%;
	float:left;
	margin-bottom:2em;
}
.home #subContent{
	float:right;
}

.home #subContent p{
	width:100%;
	height:73px;
	/*background:url(../images/home_num.png) no-repeat right;*/
	text-indent:-9999px;
	overflow:hidden;
	
}
#submit {
	border:none;
	height:30px;
	width:100px;
	background: url(../images/submit.png) no-repeat center bottom;
	font-size: 0;
	overflow: hidden;
	text-indent: -99999px;
	cursor:pointer;
	display:block;
	text-align:left;
}
#browse {
	border:none;
	height:30px;
	width:100px;
	background: url(../images/browse.png) no-repeat center bottom;
	font-size: 0;
	overflow: hidden;
	text-indent: -99999px;
	cursor:pointer;
	display:block;
	margin-left:1em;
}
#checkbox {
	display:block;
	text-align:left;
}
/*=CONTENT ABOUT
=== === === === === === === === === === */
.about #mainMovie {
	margin-bottom:2em;
	padding:1px;/*margin collpase hack*/
}
.about #mainContent {
	width:61%;
	float:left;
}
.about #subContent{
	width:27%;
	float:right;
}

.about #subContent p a{
	display:block;
	width:100%;
	height:73px;
	background:url(../images/about_num.png) no-repeat right;
	text-indent:-9999px;
	overflow:hidden;
	margin-top: 3em;
	margin-bottom: 13em;
}
/*=CONTENT WORK
=== === === === === === === === === === */
.work {
	width:100%;
	background:url(../images/project_num.png) no-repeat;
}
.work li{
	list-style-type:none;
}
.work li a {
	display:block;
	width:84%;
	height:80px;
	padding-left: 16%;

}
.work li a img{
	margin-top: 2px;
	margin-left: 2px;
	float:left;
	
}
.h2{
	position:absolute;
	margin-bottom:.3em;
	padding-top:.4em;
	height: 14px;
}
.h2, .p {
	width:523px;
	line-height:1.3em;
}
.p {

	position:absolute;
	padding-top:1em;
}
.shadow {
float:left;
	width:101px;
	height:65px;
	margin-top:.8em;
	margin-right:2em;
	background:url(../images/portfolio/shadow_pics2.png);
}
#proj1 a:hover {background:url(../images/project_num.png)  -820px 0px no-repeat;}
#proj2 a:hover {background:url(../images/project_num.png)  -820px -80px no-repeat;}
#proj3 a:hover {background:url(../images/project_num.png)  -820px -160px no-repeat;}
#proj4 a:hover {background:url(../images/project_num.png)  -820px -240px no-repeat;}
#proj5 a:hover {background:url(../images/project_num.png)  -820px -320px no-repeat;}
#proj6 a:hover {background:url(../images/project_num.png)  -820px -400px no-repeat;}
#proj7 a:hover {background:url(../images/project_num.png)  -820px -480px no-repeat;}
#proj8 a:hover {background:url(../images/project_num.png)  -820px -560px no-repeat;}
#proj9 a:hover {background:url(../images/project_num.png)  -820px -640px no-repeat;}
#proj10 a:hover {background:url(../images/project_num.png)  -820px -720px no-repeat;}
/*=CONTENT WORK PROJ
=== === === === === === === === === === */
.workProj #mainContent, .fromQuestionnaire #mainContent {
	margin-bottom:5em;
}
/*=CONTENT CONTACT
=== === === === === === === === === === */
.contact #mainMovie {
	margin-bottom:2em;
	padding:1px;/*margin collpase hack*/
}
.contact #mainContent {
	width:100%;
	float:left;
	margin-bottom:2em;
}
.contact #mainContent li{
	list-style-type:none;
	
}
.contact #mainContent2 {
	width:49%;
	float:right;
	margin-bottom:2em;
}
.contact #mainContent2 li{
	list-style-type:none;
}
.contact #mainContent3 {
	width:49%;
	float:left;
	margin-bottom:2em;
}
.contact #mainContent3 li{
	list-style-type:none;
}
.contact #subContent{
	width:27%;
	float:right;
}

.contact #subContent p{
	width:100%;
	height:73px;
	background:url(../images/contact_num.png) no-repeat right;
	text-indent:-9999px;
	overflow:hidden;
	margin-top: 3em;
	margin-bottom: 10em;
}
.shadow3 {
	float:left;
	width:400px;
	height:100px;
	background:url(../images/portfolio/s_shadow2.png) no-repeat;
	text-align: center;
	padding-top:.15em;
	margin-right:1em;
}
.shadow4 {
float:right;
	width:400px;
	height:100px;
	margin-top:4em;
	margin-right:.5em;
	background:url(../images/portfolio/s_shadow2.png) no-repeat;
}


/*=FOOTER
=== === === === === === === === === === */
#footer {
	clear:both;
}
#footer a{
	color:#5b5b5b;
}
#footer span{
 	color:#5b5b5b;
}
#footer p, #footer a {
	font-size:10.5px;
}

/*=FORM QUESTIONNAIRE
=== === === === === === === === === === */
.formQuestionnaire p{
	margin-bottom:3em;

}
fieldset {
  margin: 1em 0; /*  space out the fieldsets a little*/
  padding: 1em;
  border : 1px solid #bbb;
}
label {
	float:left;
	width:17em;
	padding-right:2em;
}
.radioBtn label {
	display:inline;
	float: none;
	margin-left:.3em;
}
.radioBtn p {
	margin-bottom: 0em;
}
input:focus, textarea:focus {
  background: #ebeae7;
}
label .note {
  font-size: 0.95em;
  color:#760000;
}
input.radio, input.checkbox, input.submit {
  width: auto;
}