@import url(typography.css);

html, body, object, iframe, span{
	margin: 0;
	padding: 0;
	border: 0;
}
*{
	padding:0;
	margin:0;
}

html, body {
	background-color: #a7a6a6;
	height:100%;
	background-image: url(../../images/pattern.gif); background-repeat: repeat;
	
}
#main {
	clear:left;
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	padding-bottom: 0px;
	overflow:hidden;
}
.bg {
	position:absolute; bottom:0; right:0;}
.bgL {position:absolute; bottom:0; left:0;}

#container {
	position: relative;
	min-height:100%
}
#containerPage {
	width:900px;
	position:relative;
	overflow:hidden;
	margin:0 auto;
	top: 0px;
	padding-bottom:100px
}
#content {
	float:left;
	width:800px;
	margin-top:86px;
	padding-left: 98px;
	position: relative;
}

#ftr {width:100%; position:absolute; bottom:0; background-color: #000; overflow: hidden; padding-bottom:10px; padding-top:10px;}
#ftr .content {width:900px; color:#FFF; background-color:#000; margin-right:auto; margin-left:auto;}

.col1 {width:190px; float:left; border-left: 1px solid #9a9ca6; padding-left: 30px;}

.col2 {
	float:left;
	width:190px;
	margin-left:100px;
}
.col3 {
	float:right;
	width:280px;
	border-left: 1px solid #9a9ca6;
	padding-left: 30px;
	height:69px
}
.copyright {
	color:#FFFFFF;
	padding-left:30px;
	font-size: 10px;
	background-color: #000000;
}
#logo {position:absolute; top: 30px; left:0px; z-index:3; width:80px; height:61px}
#logo a {background-image:url(../../images/jb-logo.jpg); background-repeat:no-repeat; background-position: 0px 0px; width:80px; height:61px; display:block; overflow:hidden; cursor:pointer}
#logo a:hover {background-position: -80px 0px}

/*#leftCol {
	float:left;
	width:208px;
	padding-left:12px;
	margin: 0px;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 10px;
}

#rightCol {
	float:right;
	width:400px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 0px;
}*/

/*
------------------------------------	
	MAIN MENU NAVIGATION
------------------------------------ */
#menuHorizontal {
	width:auto;
	position:absolute;
	top:50px;
	right:0px;
	z-index:3;
}
#menuHorizontal ul {
	padding: 0;
	margin: 0;
	font-size:3em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menuHorizontal li { display: inline;}
#menuHorizontal li a {
	display:block;
	color: #484d58;
	text-decoration: none;
	text-align: right;
	float:left;
}
.selected {
	display:block;
	color: #BC4F38;
	text-decoration: none;
	text-align: center;
	float: left;
	margin: 0px;
}
#menuHorizontal li a:hover {
	color: #fff;
}

#menuHorizontal ul ul {
	padding:0px;
	font-size:80%;
	margin: 0;
	width:500px
}

#menuHorizontal ul ul li a {
	color:#fff;
}
#menuHorizontal ul ul li a:hover {color:#484d58;}
/*----------------------------------------------------------------*/

.box {
	background-color:#e4e0d8;
	padding:6px;
	margin-bottom: 25px;
}
.clear {clear:both}


/**/
.projectRight {
	position:relative;
	width:500px;
	background-color:#000;
	margin-top:-54px;
	float:right;
	padding: 10px;
	margin-bottom: 10px;	/*min-height:120px*/
}
.projectLeft {
	position:relative;
	width:260px;
	background-color:#000;
	margin-top:-5px;
	float:left;
	padding:10px;
	text-align:right;
	font-size:80%
}
.txtBox {
	float:right;
	width:280px;
	padding:10px;
	background-color:#000;
	height: 163px;
}
.pic {
	float:left;
	margin-bottom:15px
}

.welcomeTxt  {
	font-size:2em;
	line-height:1.5em;
	color: #FFF;
	background-color: #484d58;
	padding-right: 5px;
	padding-left: 5px;
}
.welcomeTxt a {
	color:#9a9ca6
}
.welcomeTxt a:hover {color:#BC4F38}


/*
------------------------------------	
	PHOTO GALLERY THUMBS
------------------------------------ */
.pictures {}

.pictures, .pictures #contentColPic {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.pictures #contentColPic #screenThumb   {
	text-align:left;
	padding: 0px;
	margin-top: 0px;
}

.pictures #contentColPic #screenThumb .pictureBox {
	float:left;
	margin-right:0px;
	margin-bottom:0px;
	margin-top: 0px;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 0px;
}

.pictures #contentColPic #screenThumb .pictureBox .pictureInfo .pictureTitle {
	margin-top:3px;
	margin-bottom: 5px;
	color:#fff;
	text-align:left;
	background-color: #484d58;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 2px;
}

.pictures #contentColPic #screenThumb .pictureBox #thumb img {
	display: block;
	width: 148px;
	margin: 0px;
	padding:0px;
	border:solid 3px #484d58
}

.pictures #contentColPic #screenThumb .pictureBox #thumb img:hover {
	border:solid 3px #BC4F38
}
.line {
	border-bottom: 3px solid #484d58;
	margin: 0px;
	padding: 0px;
	height: 3px;
}
.year {
	font-size:130%;
	font-family: Arial, Helvetica, sans-serif;
	text-align:right;
	color:#fff;
	width:640px;
	background-color:#484d58;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-left: 10px;
}
/*
------------------------------------	
	FORMS
------------------------------------ */
.inputBox {border: 1px solid #000}

.cssform p{
	width:100%;
	margin-bottom: 5px;
	clear: left;
	padding-left: 155px; 
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	font-size:100%
}

.cssform label{
	float: left;
	margin-left: -155px;
	width: 150px;
	font-size: 125%;
	background-color: #9d9fa6;
	color: #3a3e48;
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
	width: 180px;
	border: 1px solid #fff;
	background-color:#fff;
	font-size:100%;
	color: #000;
}
.cssform textarea{
	width: 420px;
	height: 150px;
	border: 1px solid #fff;
	background-color:#fff;
	font-size:110%;
	color: #000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.inputButtons  {
	background-color:#484d58;
	border:none;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #FFFFFF;
	cursor:pointer;
	padding: 2px;
}