/* Global Styles */

html, body {
	background: url(../../lib/img/bk.jpg) top center no-repeat;
		background-color: #000000;
	font-family: myriad, sans-serif;
	font-size: 12px;
	color: #ffffff;
}

.houdini {
	display: none;
	visibility: hidden;
}

#contentContainer {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 1;
}

/* End Global Styles */

/* Header Styles */

#header {
	overflow: hidden;
	height: 104px;
}

a#headerTitle {
	background: url(../../lib/img/benjamin-gordon-portfolio.png) 0 0 no-repeat;
	width: 536px;
	height: 35px;
	display: block;
	margin-top: 40px;
	float: left;
}

#aboutContainer {
	overflow: hidden;
	float: right;
	margin-top: 25px;
}

div#aboutContainer img {
	float: left;
}

#aboutTxt, div#aboutTxt li { 
	float: left;
}

div#aboutTxt li {
	margin: 8px 4px 0 0;
}

div#aboutTxt {
	width: 160px;
	font-size: 11px;
	margin-left: 10px;
	line-height: 14px;
}

a#hireme {
	background: url(../../lib/img/available-for-freelance.png) 0 0 no-repeat;
	width: 146px;
	height: 146px;
	display: block;
	right: 0;
	position: absolute;
	z-index: 100;
}

/* End Header Styles */

/* Portfolio Styles */

#portfolioContainer, #projectContainer {
	overflow: hidden;
}

div#projectContainer {
	margin-top: 10px;
}

div#portfolioContainer li, div#projectContainer li {
	background: url(../../lib/img/portfolio-btm.png) bottom no-repeat;
	height: 157px;
	float: left;
	margin: 0 17px 14px 0;
}

a.external {
	position: relative;
	bottom: 0px;
	display: block;
	padding: 5px 0px 0px 10px;
}

div#portfolioContainer a, div#projectContainer a {
	color: #ffffff;
	text-decoration: none;
}

div#portfolioContainer a:hover , div#projectContainer a:hover {
	text-decoration: underline;
}

li.last {
	margin-right: 0px !important;
}

div#projectContainer h2 {
	background: url(../../lib/img/project-management.png) 0 0 no-repeat;
	width: 222px;
	height: 23px;
	margin-bottom: 20px;
}

/* jQuery Lightbox Styles */

#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

/* End jQuery Lightbox Styles */ 

/* jQuery Bubble Info Styles */

.bubbleInfo {
    position: relative;
}
.trigger {
    position: absolute;
}

/* Bubble pop-up */

.popup {
	background: url(../../lib/img/bubble.png) 0 0 no-repeat;
    position: absolute;
    display: none;
    z-index: 50;
    border-collapse: collapse;
    width: 134px;
    height: 51px;
    color: #333333 !important;
    padding: 12px 0 0 12px;
    font-size: 11px;
    text-shadow: #aeaeae 2px 1px 2px;

}

div.popup h3 {
	font-size: 12px;
	font-weight: bold;
	margin: 3px 0 2px 0;
}


/* End jQuery Bubble Info Styles */

/* End Portfolio Styles */

/* Applications Styles */

#appsWrap {
	float: left;
	width: 437px;
}

#appsContainer, #onlineappsContainer, #skillchartContainer {
	margin-top: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	z-index: 2;
}

div#appsContainer h2 {
	background: url(../../lib/img/applications.png) 0 0 no-repeat;
	width: 138px;
	height: 24px;
	margin-bottom: 20px;
}

div#appsContainer ul {
	width: 321px;
}

div#appsContainer li, div#onlineappsContainer li {
	float: left;
	margin: 0 15px 15px 0;
	width: 64px;
	height: 63px;
}

div.bubbleInfo li {
	position: relative;
}

div#onlineappsContainer h2 {
	background: url(../../lib/img/online-applications.png) 0 0 no-repeat;
	width: 214px;
	height: 24px;
	margin-bottom: 20px;
}

/* End Applications Styles */

/* Skill Chart Styles */


#skillchartContainer {
	float: left;
}

div#skillchartContainer h2 {
	background: url(../../lib/img/skills.png) 0 0 no-repeat;
	width: 61px;
	height: 19px;
}

#skillchart {
	background: url(../../lib/img/skillchart.png) 0 25px no-repeat;
	width: 523px;
	height: 545px;
}

/* End Skill Chart Styles */

/* Footer Styles */

#footer {
	font-size: 11px;
	padding: 20px 0;
	float: right;
	line-height: 18px;
}

div#footer a {
	color: #fff;
}

/* End Footer Styles */