@import "reset.css";
@import "colorbox.css";

body {
	font: 62.5% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	text-align: center;
	color: #e4e4e4;
	background-color: #000;
	background-repeat: repeat;
	background-position: 0 0;
}
a {
	color: #f7dc00;
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: underline;
}
p {
	font-size: 1.3em;
	margin-bottom: 5px;
}
.small {
	font-size: 1.2em;
	color: #dd0068;
	margin-bottom: 5px;
	margin-left: 10px;
}
.newsdate {
	font-size: 1.2em;
	color: #dd0068;
	margin-bottom: 5px;	
}
.news-list{
	margin-bottom:20px;
}
h1, h2, h3{ font-family: "Trebuchet MS",Verdana,Sans-Serif;}

h2 {
	font-size: 1.7em;
	margin-bottom: 10px;
	color: #f7dc00;
}
h3 {
	font-size:1.3em;
	margin-bottom: 10px;
	color: #f7dc00;
}
ul {
	margin-bottom: 5px;
	font-size: 1em;
}
#portfolio {
	padding: 4px;
	width: 400px;
	height: 285px;
	z-index:5;
}
#portfolio img.thumbnail, #portfolioSet img.thumbnail
{
	display: none;
}

#wrapper {
	width: 100%;
	padding-top: 3em;
}
#container {
	width: 900px;
	text-align: left;
	margin: 0 auto;
	border-bottom: 3px solid #505050;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
#header, #content {
	width: 900px;
}
#content {
	margin-top:10px;
}
#header {
	border-bottom: 3px solid #505050;
	height: 220px;
	position: relative;
}
#footer {
	width:100%;
}
.clear { 
	height: 0.1em; 
	clear: both;
}

#logo {
	margin: 0px 0 20px 0;
	float: left;
}
#h1 a:hover {
	cursor: hand;
	c\ursor: pointer;
}

h1 a {
	text-indent: -3000px;
	overflow: hidden;
	display: block;
	height: 200px;
	width: 200px;
	background-image: url(../../i/ofascia-logo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#colOne, #colTwo, #colThree {
	margin-top: 20px;
	float: left;
}
#colOne {
	width: 190px;
	margin-right: 20px;
	float: left;
}
#colTwo {
	width: 470px;
	margin-right: 20px;
	float: left;
}
#colThree, #colFour {
	width: 410px;
	float: left;
	display: block;
	margin-bottom: 10px;
}
#colThree {
	height: 290px;
}
#menuwrapper {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
/*---------- gallery ----------*/
#gallery {
	background-color: transparent;
	padding: 10px 10px 10px 0;
	width: 380px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; float: left; }
	#gallery li { padding: 0 10px 5px 0; }
	#gallery ul img {
		border: 5px solid #3e3e3e;
		border-width: 5px 5px 10px;
	}
	#gallery ul a:hover img {
		border: 5px solid #00AEEF;
		border-width: 5px 5px 10px;
		color: #fff;
	}
	#gallery ul a:hover { color: #00AEEF; }
	

/* Styles for the entire LavaLamp menu */
#menu {
	position: relative;
	/* width: 440px; */
	width: auto;
	background: url("../images/bg.html") no-repeat top;
	height: 40px;
	text-align: right;
	list-style-type: none;
}
    /* Force the list to flow horizontally */
    #menu li {
	list-style: none;
	display: inline;
	float: right;
    }
        /* Represents the background of the highlighted menu-item. */
        #menu li.backlava {
            background: url("../images/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            #menu li.backlava .leftlava {
                background: url("../images/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        #menu li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px "Trebuchet MS",Verdana,Sans-Serif;;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 1px;
            float: left; display: block;
            margin: auto 10px;
        }
		#menu li a:hover {
			color: #71C3E6;
		}
		#menu li a.current {
	color: #f7dc00;
		}
p.breather {
	margin-top: 10px;
}
#drop {
	color: #d5d5d5;
	cursor: pointer;
}
a.current {
	color: #20ACE2;
}

/*--------- FORM ----------*/
label {font-size: 1.2em; clear:left; display:block; float:left; width:70px; text-align:left; padding-right:10px; color:#888; margin-bottom:0.5em;}
input {
	border:1px solid #505050;
	background:#888;
	padding-left:0.5em;
	margin-bottom:0.6em;
	display: inline;
}
select {margin-left:0.5em;}
textarea {width:300px; height:11em; border:1px solid #505050; padding:0.5em; overflow:auto; background:#888;}
#button1, #button2 {color:#fff; padding-right:0.5em; cursor:pointer; width:150px; margin-left:8px;}
#button1:hover, #button2:hover {background-position:center left; color:#000;}
#submitter { padding:2px 5px; font:bold 15px/15px "Trebuchet MS",Verdana,Sans-Serif; margin: 10px 0 0 80px; }

.outer {
	width: 350px;
	float: left;
	margin: 10px 0 0 0;
}
.inner {
	width: 410px;
	float: left;
	margin: 10px 10px 0 80px;
}
#footer {
	height: 30px;
	width: 900px;
	color: #505050;
	padding: 10px 0;
	margin: 0 auto;
	text-align: left;
	clear: both;
}



/**************************************************************

	MultiBox
	v1.3

**************************************************************/

.MultiBoxContainer {
	position: absolute;
	border: 20px solid #000;
	background-color: #FFF;
	display: none;
	z-index: 20000;
	text-align: left;
	/*overflow: hidden;*/
}

.MultiBoxLoading {
	background: url(../images/loader.gif) no-repeat center;
}

.MultiBoxContent {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.MultiBoxClose {
	position: absolute;
	top: -26px;
	right: -26px;
	background: url(../images/close.png) no-repeat;
	width: 24px;
	height: 24px;
	cursor: pointer;
}


.MultiBoxControlsContainer {
	overflow: hidden;
	height: 0px;
	position: relative;
}

.MultiBoxControls {
	width: 100%;
	height: auto;
	position: relative;
	background-color: #000000;
}


.MultiBoxPrevious {
	position: absolute;
	background: url(../images/left.png) no-repeat;
	width: 24px;
	height: 24px;
	left: 0px;
	margin-top: 5px;
	cursor: pointer;
}

.MultiBoxNext {
	position: absolute;
	background: url(../images/right.png) no-repeat;
	width: 24px;
	height: 24px;
	right: 0px;
	margin-top: 5px;
	cursor: pointer;
}

.MultiBoxNextDisabled {
	cursor: default;
	background: url(../images/rightDisabled.png) no-repeat;
}

.MultiBoxPreviousDisabled {
	cursor: default;
	background: url(../images/leftDisabled.png) no-repeat;
}

.MultiBoxTitle {
	position: relative;
	margin: 10px 0 0 35px;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	font-weight: bold;
	text-align: left;
}

.MultiBoxNumber {
	position: relative;
	width: 50px;
	margin: 10px 35px 0 0;
	float: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	text-align: right;
}

.MultiBoxDescription {
	clear: left;
	position: relative;
	margin: 0 35px 0 35px;
	padding-top: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	text-align: left;
}



/*************************************************************/

.jdGallery
{
	overflow: hidden;
	position: relative;
}

.jdGallery img
{
	border: 0;
	margin: 0;
}

.jdGallery .slideElement
{
	width: 100%;
	height: 288px;
	background-color: #505050;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('../images/loading-bar-black.html');
}

.jdGallery .loadingElement
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('../images/loader.gif');
}

.jdGallery .slideInfoZone
{
	position: absolute;
	z-index: 10;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 90px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

* html .jdGallery .slideInfoZone
{
	bottom: -1px;
}

.jdGallery .slideInfoZone h2
{
	padding: 0;
	font-size: 120%;
	margin: 0;
	margin: 5px 10px;
	font-weight: bold;
	color: #fff;
}

.jdGallery .slideInfoZone p
{
	padding: 0;
	font-size: 12px;
	margin: 2px 10px;
	color: #eee;
}

.jdGallery .slideInfoZone h3
{
	padding: 0;
	font-size: 25px;
	margin: 2px 5px;
	color: #eee;
}

.jdGallery div.carouselContainer
{
	position: absolute;
	height: 135px;
	width: 100%;
	z-index: 10;
	margin: 0px;
	left: 0;
	top: 0;
}

.jdGallery a.carouselBtn
{
	position: absolute;
	bottom: 0;
	right: 30px;
	height: 20px;
	/*width: 100px; background: url('../images/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
}

.jdGallery .carousel
{
	position: absolute;
	width: 100%;
	margin: 0px;
	left: 0;
	top: 0;
	height: 115px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

.jdExtCarousel
{
	overflow: hidden;
	position: relative;
}

.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
	position: absolute;
	width: 100%;
	height: 78px;
	top: 10px;
	left: 0;
	overflow: hidden;
}

.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
	position: relative;
}

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
	cursor: pointer;
	background: #000;
	background-position: center center;
	float: left;
	border: solid 1px #fff;
}

.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
	margin-bottom: 10px;
}

.jdGallery .carousel .label, .jdExtCarousel .label
{
	font-size: 13px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	padding: 0;
	margin: 0;
}

.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
	font-size: 10px;
	position: absolute;
	bottom: 5px;
	right: 10px;
	padding: 1px 2px;
	margin: 0;
	background: #222;
	border: 1px solid #888;
	cursor: pointer;
}

.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
	color: #b5b5b5;
}

.jdGallery a
{
	font-size: 100%;
	text-decoration: none;
	color: inherit;
}

.jdGallery a.right, .jdGallery a.left
{
	position: absolute;
	height: 99%;
	width: 25%;
	cursor: pointer;
	z-index:10;
	filter:alpha(opacity=20);
	-moz-opacity:0.2;
	-khtml-opacity: 0.2;
	opacity: 0.2;
}

* html .jdGallery a.right, * html .jdGallery a.left
{
	filter:alpha(opacity=50);
}

.jdGallery a.right:hover, .jdGallery a.left:hover
{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.jdGallery a.left
{
	left: 0;
	top: 0;
	background: url('../images/fleche1.html') no-repeat center left;
}

* html .jdGallery a.left { background: url('../images/fleche1-2.html') no-repeat center left; }

.jdGallery a.right
{
	right: 0;
	top: 0;
	background: url('../images/fleche2.html') no-repeat center right;
}

* html .jdGallery a.right { background: url('../images/fleche2-2.html') no-repeat center right; }

.jdGallery a.open
{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.withArrows a.open
{
	position: absolute;
	top: 0;
	left: 25%;
	height: 99%;
	width: 50%;
	cursor: pointer;
	z-index: 10;
	background: none;
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.withArrows a.open:hover { background: url('../images/open.html') no-repeat center center; }

* html .withArrows a.open:hover { background: url('../images/open-2.html') no-repeat center center;
	filter:alpha(opacity=80); }
	
	
/* Gallery Sets */

.jdGallery a.gallerySelectorBtn
{
	z-index: 15;
	position: absolute;
	top: 0;
	left: 30px;
	height: 20px;
	/*width: 100px; background: url('../images/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
	opacity: .4;
	-moz-opacity: .4;
	-khtml-opacity: 0.4;
	filter:alpha(opacity=40);
}

.jdGallery .gallerySelector
{
	z-index: 20;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
}

.jdGallery .gallerySelector h2
{
	margin: 0;
	padding: 10px 20px 10px 20px;
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}

.jdGallery .gallerySelector .gallerySelectorWrapper
{
	overflow: hidden;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid #888;
	padding: 5px;
	height: 40px;
	color: #fff;
	cursor: pointer;
	float: left;
}

.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
	background: #333;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
	background: #000;
	background-position: center center;
	float: left;
	border: none;
	width: 40px;
	height: 40px;
	margin-right: 5px;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
	margin: 0;
	padding: 0;
	font-size: 25px;
	font-weight: normal;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
	color: #aaa;
}

#log {
	margin: 10px 0;
}
#colTwo .small li {
	padding-bottom: 3px;
}
#colFour h3 {
	font-size: 1.2em;
}
#header #contactinfo {
	position: absolute;
	top: 30px;
	right: 10px;
	text-align: right;
}
#address {
	margin: 20px 0px 20px 10px;
	font-weight: bold;
	font-size: 1.2em;

}
.radiobuttons input {
	display:inline;
	width: auto;
	background:none;
	border: none;
}
.radiobuttons label {
	display:inline;
	width: auto;
	float:none;
}
#survey-form-container {
	margin-top: 20px;
}
#survey-form textarea{
	width: 240px;
	height: 5em;
	background-color: #FDFBCA;
}
#message { width:180px;margin:60px 0 0 100px; }

#checkmark { position:relative;top:-60px;left:-60px; }
#palette {
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	height: 90px;
}
#news-summaries{
	float:right;
	width: 300px;
}
#news-story-body{
	width: 500px;
	float: left;
}