/*======================================
      Copyright: BANSEcreative
      Author: Klaus Banse
======================================*/

/**************************************\
|------------COLOR SCHEME--------------|
|--------------------------------------|
- dark		#323232
- medium	#656565
- light		#e6e6e6
- green		#a8fe17
\**************************************/


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

/*              GLOBALS               */

/**************************************/
html {}
body { margin:0; padding:0; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 2em; }
html,body { /* height:100%; */ }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section{display: block;}
#wrapper { width:830px; margin:0 auto; /* min-height:100%; height:auto!important; height:100%; */ }
#wrapper .clearfooter { height:160px; }
a {color: #f00; text-decoration: none;}
a img { border:0; }
.hidden { display:none; }
.spacer{height: 45px;}

h1 {color:#666; font-size:4em; margin-bottom: 25px;}

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

/*              HEADER                */

/**************************************/
header { height:40px; }
.logo {}
/**************************************/

/*             NAVIGATION             */

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

nav{margin-top:65px;}
nav ul{margin: 0; padding: 0;}
nav li{list-style: none; margin: 0 15px; padding: 0; height: 40px; float:left; border: none;}
nav li a{text-indent:-999em; height: 30px; display: block;}
nav li a.about{width: 105px; background: url(../images/nav.jpg) 0 0 no-repeat;}
nav li a.portfolio{width: 135px; background: url(../images/nav.jpg) -160px 0 no-repeat;}
nav li a.contact{width: 125px; background: url(../images/nav.jpg) -330px 0 no-repeat; }

nav li a.about:hover, nav li.active a.about{background-position: 0 -36px;}
nav li a.portfolio:hover, nav li.active a.portfolio{background-position: -160px -36px;}
nav li a.contact:hover, nav li.active a.contact{background-position: -330px -36px;}

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

/*            MAIN CONTENT            */

/**************************************/
#content { min-height:400px; height:auto!important; height:400px; }
.pagepad p{font-size: 1.2em;}

/*  Thumbnails  */

.thumb{float:left; position: relative; width: 185px; height: 164px; overflow: hidden; margin-right: 30px;}
.thumb span {width: 185px; height: 164px; display: block; position: absolute; top: 0px; left: 0; background: url(../images/thumbframe.png) no-repeat; }
.thumb img {}

.colorbox {float: left; clear: left;}
article.portfolio h2 {font-size: 2.5em;}
article.portfolio p {float: left; width: 400px; margin-bottom: 0px;}
article.portfolio {margin-bottom: 15px;}

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

/*               FOOTER               */

/**************************************/
footer { clear:both; }
footer .divider{margin: 0 auto; width: 950px; height:20px; background: url(../images/bg-footer.jpg) no-repeat;}
footer section{margin: 0 auto; width: 950px;}
footer .copyright{display:block; margin-left: 95px;/*  margin-top: 15px; */ color: #ccc;}

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

/*            SLIDING PANEL           */

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

/***** clearfix *****/
.clear { clear:both; height:0; line-height:0; }
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }

/* End hide from IE-mac */
.clearfix { height:1%; }
.clearfix { display:block; }

/* Panel Tab/button */
.tab { background:url(../images/bg-tab.png) no-repeat 10px 0px; height:40px; 
/* float: right; */
position:relative; top:0; right:10px; z-index:999; text-align:right; width:auto; }
.tab ul.contactform { display:block; position:relative; float:right; clear:right; height:40px; width:auto; font-weight:bold; line-height:40px; margin:-2px 60px 0 0 ; color:#fff; font-size:80%; text-align:center; }
.tab ul.contactform li.left { background:url(../images/panel/tab_l.png) no-repeat; height:40px; width:30px; padding:0; margin:0; display:block; float:left; }
.tab ul.contactform li.right { background:url(../images/panel/tab_r.png) no-repeat left 0; height:40px; width:30px; padding:0; margin:0; display:block; float:left; }
.tab ul.contactform li { text-align:center; padding:0; margin:0; display:block; float:left; height:40px; background:url(../images/panel/tab_m.png) repeat-x 0 0;}
.tab ul.contactform li a { color:#000; text-decoration: none;}
.tab ul.contactform li a:hover { color:#666; }
.tab .sep { color:#414141; }
.tab a.open,.tab a.close { height:20px; line-height:20px!important; padding-left:0px!important; cursor:pointer; display:block; width:80px; position:relative; top:-2px; text-transform:uppercase; color:#000; font-size: 2em;}
.tab a.open { background:url(../images/bt_open.png) no-repeat left 0; }
.tab a.close { background:url(../images/bt_close.png) no-repeat left 0; }
.tab a:hover.open { background:url(../images/bt_open.png) no-repeat left -19px; }
.tab a:hover.close { background:url(../images/bt_close.png) no-repeat left -19px; }

/* sliding panel */
#toppanel { position:absolute; 
/*Panel will overlap  content */

/*position: relative;*/

/*Panel will "push" the content down */
top:0; width:840px; z-index:999; text-align:center; margin-left:0; margin-right:auto; }
#panel { width:100%; height:280px; color:#999999; overflow:hidden; position:relative; z-index:3; display:none; background:#fff url(../images//bg-panel.jpg) left bottom no-repeat; }
#panel h1 { font-size:2em; padding:5px 0 5px; margin:0; color:#000; }
#panel h2 { font-size:1.7em; padding:5px 0 5px; margin:0; color:#000; }
#panel p { margin:5px 0; padding:0; font-size: 1.2em;}
#panel a { text-decoration:none; color:#666; }
#panel a:hover { color:#000; margin: 0;}
#panel a-lost-pwd { display:block; float:left; }
#panel .content { width:900px; margin:10px 0 auto; padding-top:0px; text-align:left; font-size:.85em; }
#panel .content .left { width:320px; float:left; padding:0 15px; margin-left: 20px;}
#panel .content .left hr { width:auto; margin-left:-15px; margin-top:10px; }
#panel .content .left h2{margin-top: 0;}
#panel .content .left img{float:left; margin-right:5px; margin-top:4px;border:1px #1A1A1A solid;}
#panel .content .right { }
#panel .content form { margin:0 0 10px; }
#panel .content label { float:left; clear:left; padding-top:8px; font-size:1em; width:65px; display:block; text-align:right; text-transform:uppercase; margin-right:3px; }
#panel .content input.field{ float:left; border:1px #1A1A1A solid; background:#ddd; margin-right:5px; margin-top:4px; width:230px; color:#000; height:16px; font-size: 1.1em; }
#panel .content input.captchafield{ float:left; border:1px #1A1A1A solid; background:#ddd; margin-right:5px; margin-top:8px; width:95px; color:#000; height:16px; font-size: 1.1em; }
#panel .content textarea.field{float:left; border:1px #1A1A1A solid; background:#ddd; margin-right:5px; margin-top:4px; width:230px; color:#000;font-size: 1.1em; height:70px;}
#panel .content input:focus.field, #panel .content textarea:focus.field { background:#eee; outline: 2px #f00;}

/* BUTTONS */

/* Login and Register buttons */
#panel .content input.bt_login,#panel .content input.bt_register { display:block; float:left; clear:left; height:24px; text-align:center; cursor:pointer; border:none; font-weight:bold; margin:10px 0; margin-left:70px; }
#panel .content input.bt_login { width:74px; background:transparent url(../images/panel/bt_login.jpg) no-repeat 0 0; }
#panel .content input.bt_login:hover {color: #fff; background:transparent url(../images/panel/bt_login_over.jpg) no-repeat 0 0; }
#panel .content input.bt_register { width:94px; color:white; background:transparent url(../images/bt_register.png) no-repeat 0 0; }
#panel .lost-pwd,#panel .lost-user,#panel .become-member { display:block; float:left; clear:right; padding:10px 15px 0; font-size:1em; text-decoration:underline; color:#ccc; }

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

/*            SLIDE SHOW              */

/**************************************/
#slideshowContainer { float:left; width:840px; height:508px; /* background:transparent url(../images/slideshow/bg_slideshow.jpg) no-repeat 0 0; */ }
#slideshow { margin:0 auto; width:840px; height:350px; position:relative; }
#slideshow #slidesContainer { margin:0px auto; width:700px; height:410px; overflow-y:auto; overflow-x: hidden;
/* allow scrollbar */
position:relative; }
#slideshow #slidesContainer .slide { margin:0 auto; width:700px; 
/* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:330px; }
#slideshow #slidesContainer h1 { color:#666; font-size:4em; margin-bottom: 25px;}
#slideshow #slidesContainer .slide h2 { color:#323232; font-size:2.2em; }
#slideshow #slidesContainer .slide p.head { float:left; font-size:2em; color:#323232; line-height:1em; width:49%; margin:20px 0 20px 0; /* clear:left; */}
#slideshow #slidesContainer .slide p { float:left; font-size:1.4em; color:#656565; line-height:1.5em; width:49%; margin:0 0 15px 0; /* clear:left; */}
#slideshow #slidesContainer .slide .sample{float:right; position: relative; width: 350px; height: 310px; overflow: hidden;}
#slideshow #slidesContainer .slide span {width: 350px; height: 310px; display: block; position: absolute; top: 0px; left: 0; background: url(../images/imageframe.png) no-repeat; }
#slideshow #slidesContainer .slide img {margin-top: 10px;}
/** 
 * Slideshow controls style rules.
 */
.control { display:block; width:39px; height:330px; text-indent:-10000px; position:absolute; cursor:pointer; }
#leftControl { top:75px; left:0; background:transparent url(../images/slideshow/control_left.jpg) no-repeat 0 0; }
#rightControl { top:75px; right:0; background:transparent url(../images/slideshow/control_right.jpg) no-repeat 0 0; }
#slideIndex {}
#slideIndex .numbers{margin:0 5px;}

#slideIndex .numbers { width:20px; height:20px; background:#fff; display:inline-block; color:#666;  text-align:center; margin:1px; cursor:pointer; padding-top: 3px; font:normal 12px Arial; }
#slideIndex .active { color:#000; background:#fff url(../images/bg-numbers.jpg) no-repeat;}


#error { width: 950px; margin: 0 auto; margin-bottom:20px; border:1px solid #efefef; background-color: #f8dbdb; z-index: 1000;}
#error ul { list-style:square; padding:5px; font-size:11px; }
#error ul li { list-style-position:inside; line-height:1.6em; color: #000;}
#error ul li strong { color: #f00; }
#error.valid ul li strong { color:#93d72e;}