/* CSS Document */

/*------------------------------------------------------------------------------------------
Global Styles :
	
	List of Global Styles:
		1) Text Links
			a) Color
			b) Font, weight, size
			c) hover color
				
		2) Main Navigation
			(note: I have notes on this area below.)
			
		3) BG color of site wraper (.mainContainer)
		4) BG Color or image of body tag
		5) Add or remove colors to modules
		6) Sub-Header

------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
/*   Body Tag low down           
	1) Background: layout code
		background: #000000 url(imageURL) top left repeat-y; 
			 Ex: we need an image to go across the top of the site and fade into a solid color.
					
					background: #000000 		:: Sets BG color
								url(imageURL) 	:: URL of images
								top left 		:: Location in browser
								repeat-y; 		:: Repeats BG image on Y axis
								
								
	2) Padding and Margin = padding:0; margin:0;
		note: this will clear default browser margin and padding
			 
	3) font: 14px/18px "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
						
			  The key is to change over to EM rather than PX. But to do that we need to redo somethings
			  to the site to get well formed text.
			  
				 EX:  body {
						font-size:100%;
						line-height:1.125em;} 16×1.125=18

					  p {font-size:0.875em;}
			   
																							*/	
/*------------------------------------------------------------------------------------------*/

body{
	background: #000 url(../images/mainBG.jpg) no-repeat center 0;
	/*background:#000;*/
	padding:0;
	margin:0;
	text-align: left;  
	font: 14px/18px "Arial",Lucida Grande,Geneva,Verdana,sans-serif;  
	}
	
/* Changes All Text Links */
a{
	outline:none;!important
	text-declaration:none;
}/*No Touch*/	


a:link {
}

a:visited {
	}

a:hover {
	
}

a:active {
	}


/* H2 H3 Tags Text Color - This is only for open tags */
body h3, body h2{color:#fff;}

h1{
margin:0;
overflow: hidden;
font-size: 27px;
line-height:1.2em;
color:#fff;
}

h1 a:link, h1 a:hover, h1 a:visited, h1 a:active{
display: block;
text-indent: -100000px;
}


h2{padding:0 0 0 0; margin:10px 0 10px 0;}


h3{
margin:0;
overflow: hidden;
font-size: 14px;
font-weight:100;
line-height:2em;
color:#fff;
}

h3 a:link, h3 a:hover, h3 a:visited, h3 a:active{
display: block;
text-indent: -100000px;
}

h4{
margin:0;
overflow: hidden;
font-size: 11px;
font-weight:100;
line-height:1em;
color:#fff;
}

h4 a:link, h4 a:hover, h4 a:visited, h4 a:active{
display: block;
text-indent: -100000px;
}


/*------------------------------------------------------------------------------------------*/
/*  Main Content Container - Site BG                                                           */	
/*------------------------------------------------------------------------------------------*/
/* Instead of using a background image for the MainContentHolder I have set up a max-width.
This well still scale and takes less time to change the background color of a site.

NEW:
		background: #000; :: Color of BG
		max-width:1020px; :: Width of BG
		width:expression(document.body.clientWidth > 1020? "1020px": "auto" ); :: Width of BG IE - Mac
		margin:0 auto;    :: Sets DIV to center
 
OLD:			
		 .MainContentHolder{background:url(http://www.loopd.com/rfs/clients/proathletetemplate/community/holderbg.gif) center center repeat-y;} */
		 
/*------------------------------------------------------------------------------------------*/

 /*body .mainContainer {
	background:#000000;
	margin:0 auto;
	padding:90px 0 0 0;
	max-width:990px;
	width:expression(document.body.clientWidth > 990? "990px": "auto" )!important;
	}*/ 

	body .mainContainerWrapper{
		width:990px;
		margin:auto;
		}


/*------------------------------------------------------------------------------------------*/
/* header - Site BG     			                                                        */	
/*------------------------------------------------------------------------------------------*/

.headerWrapper{
	}
	
	.mainLogo{	
		background:url(../images/7logo.png)  center 100px no-repeat;
		height:200px;
		}


	.navContainer{
						height:40px;
						}
				 	
					.nav{
					    background:url(../images/mainBorderTop.jpg) no-repeat center 30px ;
						width:900px;
						height:40px;
						margin:auto;
						/*border:solid #fff;*/
						}
						
						.nav ul {
						margin:0;
						font-size:11px;
						/*font-weight:bold;*/
						padding:7px 0 0 0;
						list-style:none;
						}
						
						.nav li {
						float:left;
						/*background:#fff url(images/navleft_15.gif) no-repeat left top;*/
						/*margin-right:10px;*/
						padding:0 0 0 0;
						}
							
						
						.nav li#firstNav {
								float:left;
								/*background:#fff url(images/navleft_15.gif) no-repeat left top;*/
								/*padding:7px 0 0 0;*/
								/*border:solid #fff 1px;*/
								}
				
								.nav li#firstNav a {
									float:left;
									display:block;
									/*background:url(images/navright_16.gif) no-repeat right top;*/
									padding:5px 162px 7px 13px;
									text-decoration:none;
									color:#fff;							
									}
									
									
							.nav li#firstNav a:hover, .nav li#lastNav a:hover {
								color:#fff;
								text-decoration:underline;
								}			
									
		
						
							.nav li#lastNav {
								float:left;
								/*background:#fff url(images/navleft_15.gif) no-repeat left top;*/
								/*adding:7px 0 0 0;*/
								/*border:solid #fff 1px;*/
								}
				
								.nav li#lastNav a {
									float:left;
									display:block;
									/*background:url(images/navright_16.gif) no-repeat right top;*/
									padding:5px 5px 7px 6px;
									text-decoration:none;
									color:#fff;
									}
		
					
					
					
						.nav a {
						float:left;
						display:block;
						/*background:url(images/navright_16.gif) no-repeat right top;*/
						padding:5px 162px 7px 6px;
						text-decoration:none;
						color:#fff;
						}
						/* Commented Backslash Hack
						hides rule from IE5-Mac \*/
						.nav a {float:none;}
						/* End IE5-Mac hack */
						.nav a:hover {
						color:#fff;
						text-decoration:underline;
						}
						.clear{
						clear:both;
						}



/*------------------------------------------------------------------------------------------
If you need to use a Background image, just uncomment this area and hide the code above.

.main_content{background:url(http://some link) center center repeat-y;}
------------------------------------------------------------------------------------------*/
	
	.mainContent{ 
				   background:#fff;
				   width:990px;
				   margin: 0 auto;
				   height:400px;
				}
	
			
	
		.content{
				position:relative;
				 z-index: 0;
				 height:420px;
				 background:#000;
				 }


/*------------------------------------------------------------------------------------------*/
/*  Home Top Project Showcase                                                               */
/*------------------------------------------------------------------------------------------*/

		.topShowcaseWrapper{
			width:900px;
			height:315px;
			margin:auto;
			background: #070707;
			/*border-left:solid #FF0000 1px;
			border-right:solid #FF0000 1px;*/		
			}
			
			.topShowcaseLeft{
				background: #070707 url(../images/mainFeaturedProject.jpg) no-repeat;
				float:left;
				/*border:solid #fff 1px;*/
				width:625px;
				height:280px;
				margin:0 0 0 10px
				}
			
			
			/*for anything in the /web directory*/
			
				.topShowcaseLeftWeb{
				background: #070707 ;
				float:left;
				/*border:solid #fff 1px;*/
				width:605px;
				height:280px;
				margin:0 0 0 30px
				}
			
				
			.topShowcaseRight{
				float:right;
				/*border:solid #fff 1px;*/
				height:310px;
				width:250px;
				padding: 0 5px 0 0;
				}
			.topShowcaseRight p {margin:10px 0 0 0; display:block}
			.topShowcaseRight a {color:#fa7549; text-decoration:none; line-height: 3em;}	
			.topShowcaseRight h1 {float:left; width:250px}
			.topShowcaseRight h3 {float:left; display:block;}			

/*------------------------------------------------------------------------------------------*/
/*  Home Bottom Project Showcase                                                               */
/*------------------------------------------------------------------------------------------*/

		#bottomHead{padding:5px 0 5px 25px;}
		.bottomShowcaseWrapper{
			width:900px;
			height:500px;
			margin:auto;
			background: #070707;
			
		

			}
			
			.bottomShowcaseLeft{
				border-top:1px solid #666666;
				width:850px;
				height:300px;
				margin:auto;
				}
				
			.bottomShowcaseRight{
				float:right;
				border:solid #fff 1px;
				height:300px;
				width:250px;
				}





/*------------------------------------------------------------------------------------------*/
/*  Thumb nail of galleries                                                                 */
/*------------------------------------------------------------------------------------------*/


/*.thumbContainerLeft{
	 height:420px;
	 background-color:#ff8888;
	 width:488px;
	 float:left;
	}

	.logowrapper { background:#000 url(../images/galLogo.gif) no-repeat center; 
				height:72px;
				margin:120px;
				 }


.galDivide{ background:url(../images/galDivider.gif) center;
			height:420px;
			width:2px;
			float:left;
			}
*/
div.thumbContainerRight { 
  /*border:2px dashed #333333;*/
  padding: 15px 0px 0 30px;
  height:420px;
  width:810px;
  }


div.thumbContainerRight img{
	border:none;
}


/*div.spacer {
  clear: both;
  height: 30px;
  }*/

/*div.galleryLogo {
  background:url(../galleries/artwork/images/galleryLogo.gif) no-repeat top;
  height:21px;
  width:127px;
  margin:50px 60px 40px;
	}*/

div.thumb {
	float:right;
	padding:0 27px 0 0;
	width:175px;
	margin:0 0 0 0;
  }
  

  
  
div.thumb p {
   text-align: center;
   margin:5px;
   }


/*------------------------------------------------------------------------------------------*/
/*  use for 3 column layout in galleryTBC.php                                               */
	#leftcontent {
				position: absolute;
				left:0px;
				width:201px;
				height:400px;
				background:#fff;
				border-top: 10px solid #ff8888;
				border-bottom: 10px solid #ff8888;
					}
	

				 
	#centercontent {
			background:#fff;
			margin-left: 199px;
			margin-right:199px;
			border:10px solid #ff8888;
			voice-family: "\"}\"";
			voice-family: inherit;
			margin-left: 201px;
			margin-right:201px;
			height:400px;
				}
			html>body #centercontent {
			margin-left: 201px;
			margin-right:201px;
				}	

	
	#rightcontent {
			position: absolute;
			right:0px;
			top:0px;
			height:400px;
			width:201px;
			background:#fff;
			border-top: 10px solid #ff8888;
			border-bottom: 10px solid #ff8888;
				}


/*------------------------------------------------------------------------------------------*/
/*  Contact page			                                                                */
/*------------------------------------------------------------------------------------------*/

				fieldset { border:0;margin:0;padding:0; }
				label { display:block; }
				input.text,textarea { width:300px;font:12px/12px 'courier new',courier,monospace;color:#333;padding:3px;margin:1px 0;border:1px solid #ccc; }
				input.submit { padding:2px 5px;font:bold 12px/12px verdana,arial,sans-serif; }
				
		.contactLeft{
			text-align:left;
			color:#fff;
			/*padding-top:70px;
			padding-left:10px;*/
			float:right;
			width:375px;
			}

		.contactRight{
			float:left;
			width:450px;
			height:250px;
			/*border:solid #fff;*/
			padding:10px 0 0 30px;
			}
/*------------------------------------------------------------------------------------------*/
/*  Footer                                                                                  */
/*------------------------------------------------------------------------------------------*/
	
		.footerWrapper{
				background:#000 url(../images/mainBorderBottom.jpg) top no-repeat;
				width:900px;
				margin:auto;
				color:#fff;
				height:20px;
				font-size:10px;
				font-weight:normal;
				}
			
			.footerContent{
				padding:15px 0 0 25px;
				float:left;
				}
		
			.footerContentR{
			    color:#999999;
				padding:0 10px 0 0;
				float:right;
				}
				.footerContentR a{
					color:#ccc;
					}
		
		
					.navFooter{
						width:270px;
						height:40px;
						margin:auto;
						padding: 15px 0 0 0;
						/*border:solid #fff;*/
						}
						
						.navFooter ul {
						margin:0;
						/*font-size:11px;
						font-weight:bold;
						padding:7px 0 0 0;*/
						list-style:none;
						}
						
						.navFooter li {
						float:left;
						/*background:#fff url(images/navleft_15.gif) no-repeat left top;*/
						/*margin-right:10px;*/
						padding:0 15px 0 0;
						}
	
	
						.navFooter a {
						float:left;
						display:block;
						/*background:url(images/navright_16.gif) no-repeat right top;
						padding:5px 162px 7px 6px;*/
						text-decoration:none;
						color:#fff;
						}
						/* Commented Backslash Hack
						hides rule from IE5-Mac \*/
						.navFooter a {float:none;}
						/* End IE5-Mac hack */
						.navFooter a:hover {
						color:#fff;
						text-decoration:underline;
						}