@charset "utf-8";
/* CSS Document */

.mainmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
outline:none;
float:left;
}

.mainmenu ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.mainmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
/* text-transform:uppercase; */

}

.mainmenu a{
float: left;
display: block;
font: bold 12px Arial;
color: #999;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
/* padding: 5px 10px 9px 10px; Padding within each menu item*/
width:103px;
height:50px;
text-align:center;
padding-top: 25px; /*Flip default padding-top value with padding-bottom */

}

.mainmenu a:hover{
background: url(../images/hws-mainmenu-hover.gif) top left no-repeat; 
padding-top: 25px; /*Flip default padding-top value with padding-bottom */
color: white;
}


.mainmenu .current a{ /** currently selected menu item **/
background: url(../images/hws-mainmenu-hover.gif) top left no-repeat; 
padding-top: 25px; /*Flip default padding-top value with padding-bottom */
color: white;
}


#logo{ /*CSS for sample search box. Remove if desired */
display:block;
float: right;
margin-top: -50px;
margin-bottom:15px;
padding-left:66px;
height:60px;
background:url(../images/cjblogo.gif) top left no-repeat;
}

#logo a, #logo a:hover { color:#000; text-decoration:none;}

.panel-container {
	position:relative;
	margin: auto;
	background: url(../images/panel_b.png) 0 100% repeat-x;
}

.panel-container-bl {
	background: url(../images/panel_bl.png) 0 100% no-repeat;
}

.panel-container-br {
	background: url(../images/panel_br.png) 100% 100% no-repeat;
}

.panel-container-t {
	margin: auto;
	background: url(../images/panel_t.png) 0 100% repeat-x;
}

.panel-container-tl {
	background: url(../images/panel_tl.png) 0 100% no-repeat;
}

.panel-container-tr {
	background: url(../images/panel_tr.png) 100% 100% no-repeat;
}

.feature {text-align:center; }

.roundcont {
	width: 944px;
	background:url(../images/teaser-bg.png) bottom left repeat-x;
	
/*	background-color: #ebebeb; */
	color: #666;
}

.roundcont .featured  {
	margin: 0 10px;
	height:220px;
	text-align:left;
}

.roundtop { 
	background: url(../images/tr.gif) no-repeat top right; 
}

.roundbottom {
	background: url(../images/br.gif) no-repeat top right; 
}

img.corner {
   width: 4px;
   height: 4px;
   border: none;
   display: block !important;
}
.zweierbox {width:100%; margin:10px 0; background:url(../images/e5.png) top center repeat-y;}
.zweierboxl { width:476px; padding-right:4px; float:left; margin:10px 0; }
.zweierboxr { width:476px; padding-left:4px; float:left; margin:10px 0; }

.zweierbox img { border:1px solid #e5e5e5; padding:2px; margin:6px; }
.zweierbox p { display: block;
margin:5px 0;
}

img.screenshot { padding:5px; margin:10px; }
.title { display: block;
font: bold 110% Arial;
color: #999;
padding:5px 0;
}

.featured {}
.bauarbeiter {position:absolute; right: 40px; bottom:11px; background:url(../images/bauarbeiter.gif) bottom left no-repeat; height:264px; z-index:99; width:152px; }

.bauarbeiter2 {position:absolute; right: 8px; bottom:11px; background:url(../images/bauarbeiter2.png) bottom left no-repeat; height:279px; z-index:99; width:195px; }

.bauarbeiter3 {position:absolute; right: -10px; bottom:11px; background:url(../images/bauarbeiter3.png) bottom left no-repeat; height:279px; z-index:99; width:195px; }

.buero {position:absolute; right: 8px; bottom:11px; background:url(../images/buero.png) bottom right no-repeat; height:230px; z-index:99; width:293px; }

.bilanz {position:absolute; right: 0px; bottom:11px; background:url(../images/bilanz.png) bottom right no-repeat; height:230px; z-index:99; width:416px; }

.dokumente {position:absolute; right: 0px; bottom:11px; background:url(../images/dokumente.png) bottom right no-repeat; height:230px; z-index:99; width:293px; }
.code {position:absolute; right: 8px; bottom:11px; background:url(../images/code.png) bottom right no-repeat; height:230px; z-index:99; width:293px; }

.kalendar {position:absolute; right: 0px; bottom:11px; background:url(../images/kalendar.png) bottom right no-repeat; height:230px; z-index:99; width:171px; }

.handwerk {position:absolute; right: 0px; bottom:11px; background:url(../images/handwerk.png) bottom right no-repeat; height:230px; z-index:99; width:345px; }

.hws-box-gross {position:absolute; right: 40px; bottom:-20px; background:url(../images/hws-box-gross.png) bottom left no-repeat; height:280px; z-index:99; width:245px; }

.featured .text {width:600px; padding-left:65px; padding-top:15px; line-height:150%;}
h1 { display: block;
font: bold 140% Arial;
color: #999;
padding:5px 0;
}

h2 { display: block;
font: bold 120% Arial;
color: #999;
padding:5px 0;
}

h3 { display: block;
font: bold 110% Arial;
color: #999;
padding:5px 0;
}

/* begin Button */
button.Button, a.Button
{
  position:relative;
  display:inline-block;
  width: auto;
  outline:none;
  border:none;
  background:none;
  line-height:25px;
  margin:0;
  padding:0;
  overflow: visible;
  cursor: pointer;
  text-decoration: none !important;
}


/*This HACK needed for ie7 (button position)*/
*:first-child+html button.Button, *:first-child+html a.Button
{
  display:list-item;
  list-style-type:none;
  float:left;
}


.Button .btn
{
  position: relative;
  overflow: hidden;
  display: block;
  width: auto;
  z-index: 0;
  height: 25px;
  color: #F4EFE7;
  white-space: nowrap;
  float: left;
}

.Button .t
{
  height:25px;
  white-space: normal;
  padding: 0 9px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  line-height: 25px;
  text-decoration: none !important;
}

input, select
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
/*  text-transform: uppercase; */
}

.Button .active
{
  color: #E4EFF6;
}

.Button .hover,  a.Button:hover
{
  color: #E1F1FA;
  text-decoration: none !important;
}

.Button .active .r
{
  top: -50px;
}

.Button .hover .r
{
  top: -25px;
}

.Button .r
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 13px;
  height: 75px;
}


.Button .r span
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width:419px;
  height: 75px;
}


.Button .active .l
{
  top: -50px;
}

.Button .hover .l
{
  top: -25px;
}

.Button .l
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  right: 13px;
  height: 75px;
}


.Button .l, .Button .r span
{
  background-image: url('../images/Button.png');
}

/* end Button */