/* CSS designed by FAR Studio Designs */
/* Summer 2008 */

/*  dark blue: 		030e40
	aqua:			61c7d9
	dark aqua		023b44	023b44
	mauve border:  	24273d	24273d
	teal border:	245b6c
	Main teal		024651 
	Darkest Teal	000b0c
	Article Light	e3f0f1
	Main Light		d4e6e7
*/	
* {margin:0;padding:0;} 


html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}
		
body 	{color: #000b0c;  
		background: #000b0c url(FarArt/Main/bg_body.png) repeat-x fixed;
		background-position: 0;
		font-family: Verdana,  Arial, "Trebuchet MS", sans-serif;
		font-size: 62.5%;
		margin: 0px; padding: 0px;
		}


h1		{height: 198px;	/* image replacement */
		width: 200px;
		text-indent: -9000px;
		}

	
h2 		{
		
		color: #023b44;
		font-family:"Times New Roman", Times, serif;
		font-size: 2.6em;
		margin: 30px 0 20px;
		}
	
h3 		{
		color: #023b44;
		font-family:"Times New Roman", Times, serif;
		font-size: 2.2em;		
		margin: 10px 0 10px;
		}
	
h4 		{
		color: #023b44;
		font-family:"Times New Roman", Times, serif;
		font-size: 2.2em;		
		margin: 10px 0 10px;
		}




a:link		{color: #61c7d9; 
		text-decoration: none;
		font-style: italic;
		}
	a:visited {color: #023b44;
			text-decoration: none;
			}
	a:hover 	{color: #fff; background: #023b44; }
	a:active	{color: #067d8b;}


img		{
		border: none;
		
		}

li		{
		font-size: 1.2em;
		list-style: none; 
		}		

p		{
		font-size: 1.4em;
		margin: 20px 0;
		}


/* IDs  */



/* ------------------------------------------Header------------------------------------------ */
	
#wrap	{  
			background: #d4e6e7 url(FarArt/Main/bg_main2.jpg);
			margin-right: auto; 
			margin-left: auto;
			position: relative;
			width: 1000px;

			}

div#header	{
			background: url(FarArt/Main/bg_header2.jpg); 
			background-repeat: no-repeat;
			background-position: 0 0px;
			height: 206px;
			margin: 0;
			}
#logo		{
			background: url(FarArt/Main/logo_FAR.png) no-repeat;
			position: absolute;
			top: 50px;
			left: 40px;
			width: 490px;
			height: 186px;
			text-indent: -999px;
			margin: 0;
			}
			 

#menu		{
			font-size: 1.4em;
			font-family: Geneva, Arial, Helvetica, sans-serif;
			font-style: italic;
			right: 2px;
			position: absolute;
			text-transform: uppercase;			
			top: 156px;
			}

	#menu ul	{
		color: #fff;		
		}
	#menu li	{
		border: 1px solid #245b6c;
		float: left;
		list-style: none
		}
	#menu li a	{
		color: #d4e6e7;
		display: block;
		margin: 2px 20px;
		padding: 4px 40px;
		width: 52px;
		}
				



/* -------------------------------------------Main--------------------------------------------*/

#main	{  

			margin-bottom: 40px;
			margin-left: 10px;
			padding: 10px;
			position: relative;
			width: 610px
			}
						

/* screen Gallery 1 */

ul.gallery1, ul.gallery1 li, ul.gallery2, ul.gallery2 li, ul.gallery3, ul.gallery3 li{
			list-style: none;
			margin: 0 0 50px 0;
			padding:0;
			}
	ul.gallery1{
			width: 520px;
			height: 500px;
			margin:20px 0 80px;
			position: relative;
			background:  url(FarArt/Main/screen_Portfolio2.jpg) no-repeat;
			}
	ul.gallery2{
			width: 520px;
			height: 500px;
			margin:20px 0 80px;
			position: relative;
			background: url(FarArt/Main/screen_Gallery2.jpg) no-repeat;
			}
	ul.gallery3{
			width: 520px;
			height: 500px;
			position: relative;
			background: transparent url(FarArt/wc_3screen.jpg) no-repeat;
			}


	ul.gallery1 li, ul.gallery2 li, 	ul.gallery3 li{
			float: left;
			display: inline;
			padding: 0;
			margin: 400px 0 0 0;
			}
	ul.gallery1 a span, ul.gallery2 a span, ul.gallery3 a span {
			display: none;
			}
	ul.gallery1 a:hover, ul.gallery2 a:hover, ul.gallery3 a:hover {
			background: none;
			z-index: 100;
			}
	ul.gallery1 a:hover span, ul.gallery2 a:hover span, ul.gallery3 a:hover span{
			position: absolute;
			width:500px;
			height: 400px;
			float: left;
			top: 2px;
			left: 0;
			display: block;
			}								
	ul.gallery1	li	a:hover	span  em, ul.gallery2	li	a:hover	span  em, ul.gallery3 li a:hover span  em	{
				color: #023b44;
				display: block;
				font-size: 1.2em;
				height: auto  !important; /* min height hack for IE */  
				height: 32px; /* needs to match the min-height pixels above */
				min-height: 32px;
				left: 150px;
				position: absolute;
				text-decoration: none;
				top: 500px;
				width: 250px;
				}												

			

#sidebar	{
			position: absolute;
			top: 216px;
			right: 24px;
			width: 300px;
			}	
			

/* ------------------------------------------------ Footer ---------------------------------- */

#footer		{
			background: #3678ab url(FarArt/Main/bg_footer2.jpg) repeat-x;
			font-size: 1.2em;
			height: 100px;
			margin-top: -40px; /* negative value of footer height */
			padding: 40px 0px 10px 200px;
			position: relative;
			clear:both;} 

	#footer p	{
				color:	#fff;
				}

	#footer ul	{
				margin: 0 200px 0 0 ;
				}
	#footer li	{
				float: right;
				list-style: none; 
				padding: 0 10px;
				}
	#footer li a	{
				font: italic, 1.4em, Geneva, Arial, Helvetica, sans-serif;
				font-style: italic;
				padding: 2px 20px;
				}


/* -------------------------------------------Classes -------------------------------------- */

.article	{
			background-color: #e3f0f1;
			border-top: 2px solid #fff;
			border-left: 2px solid #deeced;
			border-right: 2px solid #deeced;
			border-bottom: 2px solid #b5d3d4;
			-moz-border-radius: 20px;	/* round corners for mozilla browsers */
			-webkit-border-radius: 20px;		/* round corners for webkit (Safari) browsers */
			margin: 20px 20px 0 20px;
			padding: 20px;
			}
.sbarticle	{
			background-color: #e7f4f5;
			border-top: 2px solid #fff;
			border-left: 2px solid #deeced;
			border-right: 2px solid #deeced;
			border-bottom: 2px solid #b5d3d4;
			-moz-border-radius: 10px;	/* round corners for mozilla browsers */
			-webkit-border-radius: 5px;		/* round corners for webkit (Safari) browsers */
			margin: 20px 0;
			padding: 16px;
			}

.points		{
			color: #000b0c;
			font-size: 1.6em;		
			margin: 20px 0 10px 20px;
			}
	.points li	{
				list-style-image: url(FarArt/Main/bullet_arrow.gif);
				margin: 0 0 0 20px;
				}			

.clearfloats	{clear: both;}


						
.caption	{font-size: .9em;
			text-align: center;
			margin: -2px 0 6px;
			}
			
.caption2	{
			color: #055348;
			font-size: .8em;
			margin: -5px 0px auto 20px;
			}						

.centtext	{
			text-align: center;
			}				

			
/* CLEAR FIX for sticky Footer Code*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */