@charset "utf-8";
/* CSS Document */

body, html {
margin:0;
padding:0;
background-color:#61615f; 
background-image: url(images/background.jpg);
background-repeat:no-repeat;
background-position:center top;
}

p {font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #bbb;
line-height: 22px;
letter-spacing: .25px;
margin: 0;
padding: 0;}





h1, .yellow {font-family: Helvetica, Arial, sans-serif;
color: #f8fc7a; 
font-size:12px;
}


h2 {font-family: Helvetica, Arial, sans-serif;
font-size:16px;
color: #4fbed9;}

ul, li, a, img {font-family: Helvetica, Arial, sans-serif;
color: #f8fc7a; 
font-size:12px;
text-decoration: underline;
border:none;
list-style: none;
letter-spacing: .5px;
}

.fontTwelve {
font-size: 12px;
line-height: 18px;
letter-spacing: 0px;}

 /* Navigation */
 	#navPos {
	float:right;
	margin:-19px 58px 0px 0px;
	}
	
    #navigation {
    background: url(images/grid.png) no-repeat;
    width:464px;
    height:76px;
    margin:0;
    padding:0;
    }

    #navigation span {
    display: none;
    }

    #navigation li, #navigation a {
    height:70px;
    display:block;
    }

    #navigation li {
    float:left;
    list-style:none;
    display:inline;
    }

    #home {width: 67px;}
    #interactive {width: 121px;}
    #print {width: 80px;}
    #resume {width: 100px;}
	#contact {width: 96px;}

    #home a:hover {background: url(images/grid.png) 0px -77px no-repeat; }
    #interactive a:hover {background: url(images/grid.png) -67px -77px no-repeat; }
    #print a:hover {background: url(images/grid.png) -188px -77px no-repeat; }
    #resume a:hover {background: url(images/grid.png) -268px -77px no-repeat; }
	#contact a:hover {background: url(images/grid.png) -368px -77px no-repeat; }
	
	

.home_hot {background: transparent url(images/grid.png)
0px -77px no-repeat;}

.interative_hot {background: transparent url(images/grid.png)
-67px -77px no-repeat;}

.print_hot {
background: transparent url(images/grid.png)
-188px -77px no-repeat;}

.resume_hot {
background: transparent url(images/grid.png)
-268px -77px no-repeat;}

.contact_hot {
background: transparent url(images/grid.png)
-368px -77px no-repeat;}

/*  CONTENT  */

#wrap {
width: 980px;
margin:0 auto;
}

#logo {
padding-left: 45px;
padding-top: 36px;
padding-bottom: 20px;
}

.mainImagePos {
padding-top: 15px;
}

#center {
display:block;
margin-left: auto;
margin-right: auto;
}

#main {
width: 864px;
margin-left: 58px; 
background-image:url(images/mainPanel.png);
background-repeat: repeat-y;
overflow: hidden;
}

.divider {background-image:url(images/divider.png);
margin-bottom: 20px;}

#content {
padding: 4px 20px 5px 20px;
width:500px;
float:left;
text-align: justify;
}

#content ul, li {
text-decoration:none;
color: #bbb;
}

.contactBackgroundBorder {padding-left: 58px;}


#sidebar {
float:right;
padding: 4px 20px 5px 10px;
width:294px;
text-align: justify;
}


#footer {
background:#748c8b;
background-image:url(images/black.gif);
color: #444;
padding-left:212px;
width: 100%
height:50px;
clear:both;
}
 
#bottomNav a {
color:#bbb;
}


 
/*  RESUME DOWNLOAD CSS   */

.cssnav	{
position:relative;
float: left;
margin-bottom: 5px; 
padding-bottom: 5px;
font-family: arial, helvetica, sans-serif;
background: url(images/pdfIcon.png) no-repeat;
width: 55px;
height: 55px;
overflow:hidden;	
			}
			
#cssnav2 {background: url(images/wordIcon.png) no-repeat;}
#cssnav3 {background: url(images/txtIcon.png) no-repeat;}		
	
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 55px;
height: 55px;
display: block;
float: left;
color: black; 
text-decoration: none;
overflow:hidden;
}

.cssnav a:hover {
color: #ffffff;
}
			

.cssnav img {width: 55px; height: 55px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

.cssnav span {
position: absolute;
left: 30px;top: 15px;
text-align: center;
width: 150px;
cursor: pointer;   
}					     


 
 /*  Social Networking icons  */
	
#icons {
width:197px;
padding-top: 15px;
}
			

			
#iconOn2 {background:url(images/facebookIcon.png) no-repeat;}
#iconOn3 {background: url(images/linkedinIcon.png) no-repeat;}
			
.iconOn	{
position:relative;
float: left;
background:url(images/twitterIcon.png) no-repeat;
width: 197px;
height: 40px;
padding-bottom: 10px;
overflow:hidden;	
}	
			

.iconOn a {
display: block;
color: #000000;
font-size: 11px;
width: 197px;
height: 40px;
overflow:hidden;
}
			
			

			
.iconOn a:hover img{visibility:visible}
.iconOn a:hover img{visibility:hidden}

		
		
/*		GALLERIA CSS	*/	

#gallery {
width: 864px;
margin-left: 58px; 
background-image:url(images/mainPanel.png);
background-repeat: repeat-y;
overflow: hidden;
}

.demo {width:800px;}	
	

	a:hover{color:#67a;}
	.caption{color:#999999;position:absolute;top:250px;left:39px;width:200px;}
	.demo{position:relative;margin-top:2em; padding-left: 20px;}
	.gallery_demo{width:200px;float:left;}
	.gallery_demo li{width:55px;height:70px;border:2px double #111 ;margin: 0 2px 2px 0;}
	.gallery_demo li.hover{border-color:#888;}
	.gallery_demo li.active{border-style:solid;border-color:#f8fd58;}
	.gallery_demo li div{left:140px}
	.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
	
	.galleria_container{height:345px; width:484px;float:right; margin-top: 18px; margin-right:20px; border-style:solid;border-color:#111; background-image:url(images/projects/interactive/cssZen.jpg);}
	
	.nav{padding-top:15px;clear:both;}
	
	.info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
	.info p{margin-top:1.6em;}
	
	.galleria{list-style:none;width:186px}
	.galleria li{display:block;width:45px;height:45px;overflow:hidden;float:left;margin:3px 0px 6px 3px;}
	.galleria li a{display:none}
	.galleria li div img{cursor:pointer}
	.galleria li.active div img,.galleria li.active div{display:block}
	.galleria li img.thumb{cursor:pointer;display:block;}
	.galleria li .caption{display:block;padding-top:.5em}
	* html .galleria li div span{width:400px}