@charset "UTF-8";
/* CSS Document */
/*  html, body   */
html {font-size: 62.5%; background-color:#E8E8E8}
html, body {margin:0; padding:0}
body {margin:0 auto; padding:0; font-family:verdana,"Lucida Grande",arial,helvetica,sans-serif; background-color:#FFFFFF;color:#000000}

/* Baseline values for browser consistency*/
div, h1, h2, h3, h4, ul, li, form, input, select, option {margin:0;padding:0;}
img {margin:0;padding:0;border:0;}
ul {list-style:none;}
a {outline:0;}

.clear {clear:both;}

/* Site Structure */

#nav_top {position:relative;width:968px;margin:0 auto;}
#menu_container {position:absolute;z-index:200; top:0;left:0;right:0;background-color:transparent;}
#menu {background:url(http://happenstanceproductions.com/images/common/menu_bar.png) repeat-x; height:40px; margin:0 auto;z-index:120; behavior: url(http://happenstanceproductions.com/iepngfix.htc)}
#menu_bottom {background:url(http://happenstanceproductions.com/images/common/menu_bar_bottom.png) repeat-x; height:16px; margin:0 auto;position:relative;z-index:200; behavior: url(http://happenstanceproductions.com/iepngfix.htc)}
.slide {margin: -10px 0 0 0;padding: 0;float:right}
.button_slide {width: 90px;height: 42px;margin: 0 auto;position:absolute;right:150px;z-index:210;}
#contact {width:102px; height:42px; margin-right:50px;}	
#contact img {position:relative;z-index:6;}
#tabs {width:950px; margin:0 auto;position:relative;}

/* Navigation */
.navigation {width:940px;margin:0 auto;padding-left:10px;}
.nav ul {list-style-type: none; display:block;}
.nav li {float:left;display:inline; margin-top:0.7em;margin-right:1.5em;font-size:1.8em;color:#FFFFFF; font-weight:normal}
.nav li a, .nav li a:link, .nav li a:visited {color:#FFFFFF;text-decoration:none; font-weight:normal}
.nav li a:hover, .nav li a.activelink {color:#FFFFFF; background:url(http://happenstanceproductions.com/images/common/nav_back.png) center no-repeat; font-weight:normal; behavior: url(http://happenstanceproductions.com/iepngfix.htc)}

/* Logo */
.top {height:130px; border-bottom:#727272 solid thin;padding:60px 0 0 0;position:relative; z-index:1}
#logo {width:940px; margin:-20px auto 0 auto; padding-left:10px; position:relative:z-index:1;}
#logo h1 img {position:relative; z-index:1}

/* Content */
.content {width:950px; margin:0 auto;position:relative; min-height:300px; padding-bottom:50px}
.content h1 {color:#000000; font-size:2.5em;margin-bottom:0.5em;}
.content h3 {color:#000000; font-size:1.6em;margin-bottom:0.2em;}
.content p {color:#727272; font-size:1.3em;margin-bottom:0.5em;}

a, a:link, a:visited {font-weight:bold; color:#3C6B26; text-decoration:none}
a:hover {color:#000000; text-decoration:underline}

/* Footer */
#footer {height:397px; margin:25px 0 0 0; background: #E8E8E8 url(http://happenstanceproductions.com/images/common/footer.jpg) repeat-x; background-position:top; color:#2E2E2E;padding-bottom:25px; position:relative}
#footer_container {width:950px; margin:0 auto;padding:50px 0; position:relative;}
#footer_left {float:left; width:298px; padding-right:10px; }
#footer_right {float:right; width:620px; padding-left:20px;border-left:#2E2E2E solid thin;}
#footer_bottom {margin:0 auto; position:absolute; bottom:0; left:auto; right:auto; width:950px;}
.copyright {float:left}
#footer_container h2 {color:#000000; font-size:1.5em}
#footer_container ht {color:#000000; font-size:1.2em}

.faktion {float:right}
.faktion a, .faktion a:link, .faktion a:visited, .faktion a:hover {color:#000000;text-decoration:none;font-weight:normal;letter-spacing:-0.085em;}


table#photos th {text-align:left;color:#000000; font-size:14px; font-weight:bold; font-family:verdana,"Lucida Grande",arial,helvetica,sans-serif; margin-bottom:0.2em;}
#portfolio h2 {margin:3px auto 10px 0;font-size:14px; font-weight:bold; font-family:verdana,"Lucida Grande",arial,helvetica,sans-serif; }
#portfolio .one, #portfolio .two, #portfolio .three {float:left; margin:5px 15px 5px 0;}
#portfolio .four {float:left; margin:5px 0 5px 0;}


/* Contact Page */
#contact_left_column {width:540px;float:left;}
#contact_right_column {width:400px;float:left;}
/*
#contact {margin-top:50px;}
*/

/* footer */

table#photos td {width:12.5%;}


/* About Page */
#about {margin-top:50px;}
#about_left_column {width:450px;float:left;margin:50px 0}
#about_right_column {width:450px;float:right;margin:50px 0}
.bio_img {float:left;margin:0 15px 15px 0}

/* Links Page */
#links {margin-top:50px;}


/* Arrows */
#arrows {width:950px;position:absolute; bottom:0; font-size:1.5em; font-weight:normal;line-height:20px;}
#arrows a, #arrows a:link, #arrows a:visited {color:#A5A5A5; text-decoration:none;}
#arrows a:hover {text-decoration:none; color:#000000;}
#left_arrow {float:left;width:450px;text-align:left;}
#left_arrow img {vertical-align: middle;  margin-right:5px;}
#right_arrow {float:right; width:450px;text-align:right;}
#right_arrow img {vertical-align: middle;  margin-left:5px;}

/* Lightview */
#lightview iframe a, #lightview iframe a:link, #lightview iframe a:visited {font-weight:bold; color:#3C6B26; text-decoration:none}
#lightview iframe a:hover {color:#3C6B26; text-decoration:none}

#lightview { position: absolute; top: 50%; left: 50%; height: 150px; width: 150px; margin: -75px 0 0 -75px; padding: 0; } /* The container that holds everything */ .lv_Container { position: relative; width: 100%; height: 100%; background: none; padding: 0; margin: 0; } .lv_Button { cursor: pointer; text-decoration: none; border: none; background: none; margin: 0; padding: 0; } /* The buttons on the side when you view a gallery */ .lv_Sides { position: absolute; top: 50%; left: 0; clear: both; width: 100%; padding: 0; margin: 0; } .lv_Sides * { padding: 0; margin: 0; } .lv_Sides li { list-style-type: none; position: relative; } .lv_PrevSide { float: left; } .lv_NextSide { float: right; } .lv_Sides .lv_Wrapper { width: 100%; height: 100%; cursor: pointer; } .lv_Sides .lv_Button { float: left; background: none; } /* The frames above and below the center, that hold the corners. It's recommended not to change anything here, a lot is done in javascript to build further upon this based on your settings. */ .lv_Frames { width: 100%; height: 100%; position: relative; padding: 0; margin: 0; } .lv_Frames li { list-style-type: none; margin: 0; padding: 0; } .lv_Frame { width: 100%; display: block; } .lv_Frame * { padding: 0; margin: 0; } .lv_FrameTop { position: absolute; left: 0; width: 100%; display: block; } .lv_FrameBottom { position: relative; float: left; clear: both; } .lv_Liquid { position: relative; float: left; width: 100%; overflow: hidden; clear: both; } .lv_Liquid .lv_Filler { position: absolute; height: 100%; width: 2px; top: 0; left: 50%; } .lv_Half { display: block; height: 100%; clear: both; line-height: 0px; } .lv_Half li { list-style-type: none; } .lv_Corner { float: left; position: relative; } .lv_CornerTr, .lv_CornerBr { float: right; } .lv_Fill { position: absolute; top: 0; width: 100%; height: 100%; } .lv_Half .lv_CornerWrapper { float: left; position: relative; width: 50%; height: 100%; overflow: hidden; } .lv_HalfRight .lv_CornerWrapper { float: right; } .lv_Corner { position: relative; } .lv_Corner canvas { position: relative; } .lv_HalfLeft .lv_Corner { float: left; } .lv_HalfRight .lv_Corner { position: relative; float: right; } /* To position content correctly in the center with correct rounded corner display we need a few wrappers. This is to get it right on all browsers. */ .lv_Center { position: relative; clear: both; height: 100%; overflow: hidden; background: none; padding: 0; margin: 0; } .lv_WrapUp { position: absolute; left: 0; height: 100%; width: 100%; overflow: hidden; padding: 0; margin: 0; } .lv_WrapDown { position: relative; height: 100%; width: 100%; overflow: hidden; padding: 0; margin: 0; } .lv_WrapCenter { position: relative; padding: 0; margin: 0; } /* The loading indicator */ .lv_Loading { position: absolute; top: 50%; left: 50%; } .lv_Loading .lv_Button { float: left; height: 100%; width: 100%; } .lv_MediaWrapper { position: relative; width: 100%; display: block; overflow: hidden; clear: both; padding: 0; margin: 0; } .lv_MediaWrapper img { position: relative; float: left; padding: 0; margin: 0; } /* The overlays on top of images that toggle the previous/next buttons */ .lv_PrevNext { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; } .lv_PrevNext * { padding: 0; margin: 0; } .lv_PrevNext .lv_Button { position: relative; height: 100%; } .lv_PrevButton { float: left; } .lv_NextButton { float: right; } /* The bar that holds title, caption, imagenumber, slideshow and closebutton */ .lv_MenuBar { clear: both; position: relative; width: 100%; float: left; font: 11px Arial, Helvetica, sans-serif; color: #808080; padding: 0; margin: 0; text-align:left; } .lv_MenuBar * { padding: 0; margin: 0; } /* When the Menubar is at the top, on (ajax/iframe/inline) content, it will also have this style. The margins are removed here for better alignment, and since it's at the top we switch the inner margins to the other side. */ .lv_MenuTop .lv_DataText div, .lv_MenuTop .lv_ImgNumber div { margin: 0; padding: 0; } #lightview .lv_MenuTop .lv_Close, #lightview .lv_MenuTop .lv_Data { margin: 0 0 6px 0; } .lv_Close, .lv_Data { margin: 6px 0 0 0; } .lv_Close { position: relative; float: right; overflow: hidden; width: 100%; height: 100%; } .lv_Data { position: relative; float: left; padding-bottom: 3px; line-height: 13px; } /* simulates padding-left inside .lv_Data */ .lv_DataText div, .lv_ImgNumber div { margin-left: 3px; } .lv_Data li { list-style-type: none; float: left; margin-top: 3px; } .lv_DataText { width: 100%; } .lv_DataText .lv_Title { font-weight: bold; margin-bottom: 2px; } .lv_DataText .lv_Caption { clear: both; } .lv_Data .lv_ImgNumber { color: #b8b8b8; margin-right: 5px; margin-top: 5px; } .lv_Data .lv_innerPrevNext, .lv_Data .lv_Slideshow { position: relative; border-left: 1px solid #efefef; padding: 0 5px; margin-top: 5px; vertical-align: middle; } .lv_Data .lv_Slideshow { padding-right: 0px; } .lv_Data .lv_innerPrevNext .lv_Button, .lv_Data .lv_Slideshow .lv_Button { /* play and stop */ float: left; background-position: center left; background-repeat: no-repeat; } /* the boxes that hold media or external content */ .lv_Media, .lv_External { position: relative; float: left; margin: 0; padding: 0; } #lightview iframe { border: 0; clear: both; padding: 0; margin: 0; background: none; } /* The container that hold buttons above the view, currently only topclose */ .lv_topButtons { position: absolute; left: 0; width: 100%; overflow: hidden; margin: 0; padding: 0; } .lv_topcloseButtonImage { cursor: pointer; } /* The error/warning/download message that will appear when a required plugin is not installed. */ #lightviewError p { padding: 0 0 10px 0; } #lightviewError div { padding: 6px; font: 11px Arial, Helvetica, sans-serif; } #lightviewError .message { background: #fcb5b5; color: #dd1f1f; margin-bottom: 3px; } #lightviewError .type { font-weight: bold; } #lightviewError .pluginspage { background: #b5fcbd; color: #21be30; } #lightviewError a, #lightviewError a:hover, #lightviewError a:visited {color: #21be30;text-decoration: none;background: none;font-weight: bold;border-bottom: 1px solid #7de689;} #lightviewError p {margin-left: 0;padding: 0;} #overlay {position: absolute; top: 0;left: 0;height: 100%;width: 100%;} * html #lightview {position: absolute;margin-top: expression( (-1 * this.offsetHeight / 2 + (document.documentElement ? document.documentElement.scrollTop : 0) + (Lightview.navbarHeight || 0)) + 'px');margin-left: expression( -1 * this.offsetWidth / 2 + (document.documentElement ? document.documentElement.scrollLeft : 0) + 'px');} html #overlay {position: absolute;height: expression(((window.Enumerable && window.Enumerable.max) ? [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight].max() : document.documentElement.scrollHeight) + 'px' );width: expression(((window.Enumerable && window.Enumerable.max) ? [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.clientHeight].max() : document.documentElement.scrollWidth) + 'px' );}