@import url(button.css);
@import url(customer.css);

* {
  margin: 0;
  padding: 0;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

img {
  border: none;
}

a {
  color: #000;
}

a:link {
  color: #000;
}

a:visited {
  color: #000;
}

a:hover {
  color: #dd8203;
}

html, body {
  background: #322f26 url(../img/bg.png) top left repeat-x;
  font-family: Arial, Verdana, sans-serif;
  padding-top: 2px;
}

#wrapper {
  margin: 0 auto;
  text-align: center;
  background: url(../img/bg_cnt1_default.png) top left no-repeat;
  width: 1000px;
  height: 720px;
 
}

/* =HEADER
----------------------------------------------- */

#header {
  text-align: left;
  width: 980px;
  height: 106px;
  margin: 0 10px;
}

#header h1 {
  position: relative;
  top: 36px;
  left: 25px;
  font-size: 1em;
  width: 215px;
  height: 65px;
  float: left;
}

#header h1 a{
  display: block;
  height: 65px;
  margin: 0;
  padding: 0;
  /*text-indent: -9999px;*/
  text-decoration: none;
  outline: none;
}

#username
{
	clear:right;
	float:right;
	height:20px;
	font-family : Arial;
	font-size:11px;
	color:#322f26;
	top: 20px;
	padding-right:10px;
	text-align:right;
	position:relative;	
}
/* =NAVIGATION
----------------------------------------------- */

ul#mmenu{
  height: 42px;
  width: 407px;
  background: transparent url(../img/bg_menu_default.png) top left no-repeat;
  position: relative;
  float: right;
  top: 10px;
}

ul#mmenu li{
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
 
}

ul#mmenu li,ul#mmenu a{
  height: 42px;
  display: block;
  outline: none;
}

ul#mmenu li a{
 
  text-decoration: none;
  font-size:14px;
  font-weight:bold;
  line-height:38px;
  vertical-align:middle;
  text-align:center;
}


#mHome a{color:#4F4C45;}
#mHome {left: 0;width: 82px;}
#mHome a:hover,body#start #mHome { color:#000000;background: transparent url(../img/bg_menu_default.png) 0 -42px no-repeat;}

#mKontakt a{color:#4F4C45;}
#mKontakt {left: 82px;width: 87px;}
#mKontakt a:hover,body#kontakt #mKontakt { color:#000000;background: transparent url(../img/bg_menu_default.png) -82px -42px no-repeat;}

#mRegister a{color:#4F4C45;}
#mRegister {left: 168px;width: 115px;}
#mRegister a:hover { color:#000000;background: transparent url(../img/bg_menu_default.png) -168px -42px no-repeat;}

#mLogin a {color:#fff;}
#mLogin {left: 286px;width: 120px;}
#mLogin a:hover {color:#fff; background: transparent url(../img/bg_menu_default.png) -286px -42px no-repeat;}


/* =NAVIGATION Login
----------------------------------------------- */


ul#mmenulogin{
  height: 42px;
  width: 378px;
  background: transparent url(../img/bg_menu.png) top left no-repeat;
  position: relative;
  float: right;
  top: 10px;
}

ul#mmenulogin li{
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
}

ul#mmenulogin li,ul#mmenulogin a{
  height: 42px;
  display: block;
  outline: none;
}

ul#mmenulogin li a{
 
  text-decoration: none;
  font-size:14px;
  font-weight:bold;
  line-height:38px;
  vertical-align:middle;
  text-align:center;
}

#mmenulogin #mHome a {color:#4F4C45;}
#mmenulogin #mHome {left: 0;width: 80px;}
#mmenulogin #mHome a:hover,body#start #mHome {color:#000;background: transparent url(../img/bg_menu.png) 0 -43px no-repeat;}

#mmenulogin #mKontakt a {color:#4F4C45;}
#mmenulogin #mKontakt {left: 80px;width: 84px;}
#mmenulogin #mKontakt a:hover,body#kontakt #mKontakt {color:#000;background: transparent url(../img/bg_menu.png) -80px -43px no-repeat;}

#mmenulogin #mFAQ a {color:#4F4C45;}
#mmenulogin #mFAQ {left: 164px;width: 70px;}
#mmenulogin #mFAQ a:hover,body#register #mRegister {color:#000;background: transparent url(../img/bg_menu.png) -164px -43px no-repeat;}

#mmenulogin #mMyLounge a {color:#4F4C45;}
#mmenulogin #mMyLounge {left: 164px;width: 104px;}
#mmenulogin #mMyLounge a:hover,body#register #mRegister {color:#000; Background: transparent url(../img/bg_menu.png) -164px -43px no-repeat;}

#mmenulogin #mLogout a {padding-left:15px;color:#fff;}
#mmenulogin #mLogout {left: 268px;width: 110px;}
#mmenulogin #mLogout a:hover,body#register #mRegister {color:#fff;background: transparent url(../img/bg_menu.png) -268px -43px no-repeat;}


/* =FORMS
----------------------------------------------- */

.form{
	color: #666;
	font-weight: bold;
	margin: 20px 0 0 0;
}

fieldset{
	border: none;
	padding: 15px 0 0 0;
    width: 460px;
    margin: 20px 0 0 20px;
}

.fLeft{
	float: left;
	padding-right: 0px;
	display: inline;
}

input,textarea{
	color: #000;
	border: 0px solid #CCC;
	width:20px;
	margin: 0;
	padding: 0;
	background-image: none;
	background-color: #FFF;
    font-size: 20px;
    font-family: arial;
}

textarea{
	width: 382px;
	height: 80px;
	margin-left: 0px;
	overflow: auto;
    font-size: 18px;
    border: 1px solid #CCC;
}

/* submit button */
.submitBtn{
	width: 160px;
    height: 44px;
	background: #fff url("../img/btn_senden.png") repeat-x;
	color: #333;
	font-weight: normal;
	cursor: pointer;
	padding: 0 0 5px 0;
	font-size: 18px;
	text-align: center;
	line-height: 1em;
    border: none;
}
.inputfield
{	color: #000;
	border: 1px solid #CCC;
	width:175px;
	margin: 0;
	padding: 0;
	background-image: none;
	background-color: #FFF;
    font-size: 20px;
    font-family: arial;
}
.box {
	border: none;
	
	margin: 10px 5px 0px 6px;
	padding: 0;
	background-color: #FFF;
	width:20px;
}

/* =CONTENT
----------------------------------------------- */

#content {
  text-align: left;
  width: 980px;
  height: 442px;
  margin: 0 10px;
  background-color: #fff;
}

#leftArea {
  width: 490px;
  height: 442px;
  float: left;
  
}



#rightArea {
  width: 490px;
  height: 442px;
  float: right;
 
}

#leftArea h1 {
  font-size: 24px;
  font-weight: normal;
  color: #55524b;
  margin: 35px 0 0 40px;
}

#rightArea h1 {
  font-size: 24px;
  font-weight: normal;
  color: #55524b;
  margin: 33px 0 0 40px;
}

#leftArea img.steps {
  margin: 2px 20px 0 0;
}

#rightArea img.steps {
  margin: 2px 20px 0 0;
}

#leftArea #kv {
  background: url(../img/bg_roll.jpg) top left no-repeat;
  width: 480px;
  height: 328px;
  margin-top: 20px;
}

#leftArea #kv a.btn_demo {
  background: url(../img/btn_demostarten.png) top left no-repeat;
  width: 160px;
  height: 45px;
}
#leftArea #kv a.btn_demo:hover {
  background: url(../img/btn_demostarten_over.png) top left no-repeat;
  width: 160px;
  height: 45px;
}

/* =Content TEXT STUFF
----------------------------------------------- */

#leftArea h1, #rightArea h1  {
  font-size: 24px;
  font-weight: normal;
  color: #55524b;
  margin: 32px 0 0 40px;
}

#leftArea p.steps {
  font-size: 14px;
  font-weight: normal;
  color: #666;
  margin: 30px 10px 0 40px;
}

#rightArea p.steps {
  font-size: 16px;
  font-weight: normal;
  color: #666;
  margin: 30px 30px 0 40px;
}

#leftArea p {
  font-size: 14px;
  font-weight: normal;
  color: #666;
  margin: 15px 30px 0 40px;
  line-height: 20px;
}

#rightArea p {
  font-size: 12px;
  font-weight: normal;
  color: #666;
  margin: 15px 30px 0 40px;
}




.registerDemo {
    text-decoration: none;
    border: 0;
    padding: 0;
    display: block;
    text-indent: -9999px;
    letter-spacing: -9999px;
    font-size: 0;
    width: 187px;
    height: 45px;
    background: url(../img/test.png) no-repeat;

    position: relative;
    top: 20px;
    left: 260px;
}

.registerDemo:hover{
    background-position:-187px 0;
}

/* =Multi Purpose
----------------------------------------------- */

#multiPurpose {
  text-align: left;
  width: 980px;
  height: 140px;
  margin: 0 10px;
}

#multiPurpose #boxA {
  width: 320px;
  height: 140px;
  float: left;
}

#multiPurpose .ab10 {
  background: url(../img/btn_ab10.png) 238px 50px no-repeat;
}

#multiPurpose #boxB {
  width: 325px;
  height: 140px;
  float: left;
}

#multiPurpose .dvdPhone {
  background: url(../img/icn_dvdPhone.png) 235px 45px no-repeat;
}

#multiPurpose #boxC {
  width: 335px;
  height: 140px;
  float: left;
}

#multiPurpose .clock {
  background: url(../img/icn_clock.png) 250px 45px no-repeat;
}

#multiPurpose h3 {
  color: #404040;
  font-size: 18px;
  font-weight: normal;
  margin: 25px 0 10px 20px;
}

#multiPurpose p {
  color: #676869;
  font-size: 12px;
  margin: 0 0 0 20px;
  width: 210px;
}


/* =FOOTER
----------------------------------------------- */

#footer {
  font-size: 11px;
  color: #545657;
  text-align: left;
  margin: 0 25px;
}

#footer a {
  color: #545657;
}

#footer a:hover {
  color: #dd8203;
}

.disclaimer

{	float:left;
	font-size:10px;
	text-align:center;
	color:Gray;
	width:100%;
}
/* =TABS
----------------------------------------------- */

#tabContainer {
    padding: 0;
    margin: 0;
}

#tabContainer #tabContent {
	width: 980px;
    padding: 0;
    margin: 0;
}


/*
#gooey:after {
	content:				".";
    display:				block;
    height:					0;
    clear:					both;
    visibility:				hidden;
}*/


/*  Structure */
/*
#home #wrapperWit { background-color:	#fff;	background-image: none; border-top: 1px solid #fff;}
#home #wrapperWit #gooey {	background: transparent url(/images/design/wrapper_solid_bottom.gif) bottom left no-repeat; }
#home #wrapperWit #content {	padding-top:12px;	padding-left: 12px;width: 900px;}
#home #wrapperWit #shell { background-color: #fff; background-image: none; }*/

/*
#home #content {
	xwidth: 900px;
}*/

#container-1 h2 {
    font-size: 24px;
    font-weight: normal;
    color: #55524b;
    margin: 0 0 20px 0;
}

#container-1 p {
    color: #666;
    line-height: 18px;
    padding-bottom: 10px;
    font-size: 12px;
}

.demoMovie {
    width: 400px;
    padding: 0;
    float: left;
    margin: 30px 0 0 30px;
}

.demoStart {
    width: 400px;
    padding: 0;
    float: left;
    margin: 0px 0 40px 30px;
}

.demoStart #kv {
  background: url(../img/roll.png) top left no-repeat;
  width: 400px;
  height: 279px;
  margin-top: 0px;
}


#section-1 .text {
  width: 420px;	padding: 40px 90px 0 0; float:right;font-size:14px;
}

#section-2 .text {
  width: 420px;	padding: 40px 90px 0 0; float:right;font-size:14px;
}

#section-3 .text {
  width: 420px;	padding: 40px 90px 0 0; float:right;font-size:14px;
}

#section-4 .text {
  width: 420px;	padding: 40px 90px 0 0; float:right;font-size:14px;
}

#section-5 .text {
  width: 420px;	padding: 40px 90px 0 0; float:right;font-size:14px;
}

#section-6 .text {
  width: 420px;	padding: 40px 90px 0 0; float:right;font-size:14px;
}


#section-2,#section-3,#section-4,#section-5,#section-6 {
  display:none;
}



/*

Tabs - important styles to ensure accessibility in print

*/
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}
@media print {
    .anchors {
        display: none;
    }
}

/*

Tabs - not important for accessibility, just for the look of it...

*/

#container-1 {
	background: #fff url(../img/bg_demo.png) top left no-repeat;
	width: 980px;
	padding: 0;
	margin: 1px 0 0 0;
	/*xmin-height:362px;*/
}

.fragment1,.fragment2,.fragment3,.fragment4,.fragment5,.fragment6 { min-height: 335px;}
.fragment2,.fragment3,.fragment4,.fragment5,.fragment6 { display:none;}

.anchors {list-style: none; margin: 0; padding: 0; height: 85px;}
.anchors li { margin: 0; float: left;}