body{
	background:url(images/bg_gradient.png) center -202px repeat-x #d2d2d2;
}


/** Layout
---------------------------------
*  Using a negative margin technique, adapted from ZEN. The page is loaded by this order:
*  
*  1. Header
*  2. Content
*  3. Navigation menus
*  4. Sidebar Left
*  5. Sideabr Right
*	
*/

#wrapper{
	padding-right:120px; /* remove 'auto' and the width to switch to a fluid width */
}
#page{
	position:relative;
	width: 825px; /* edit to change the width of the page */
	margin: 0 auto; /* remove 'auto' and the width to switch to a fluid width */
}
#page-inner {
	background:url(images/bg_page_shadow.png) center top repeat-y transparent;
	padding:0 12px;
	margin:0 -12px 20px;
}

/** Sidebars width
---------------------------------
*  Changing the width of the sidebars is dead easy, just change the
*  values below corresponding to the sidebar you want to modify.
*  Make sure you keep negative values as negative values.
*  For example, if I want to increase the width of the left sidebar
*  to 300px, I would have to change each '190' to '300'.
*/

.two-sidebars .center,
.sidebar-left .center {
  margin-left: 160px;     /* LEFT value */
}
#sidebar-first {
  width: 150px;           /* LEFT value */
	margin-right: -150px;    /* negative LEFT value */
}
.two-sidebars .center,
.sidebar-right .center {
  margin-right: 160px;    /* RIGHT value */
}
#sidebar-second {
  width: 160px;           /* RIGHT value */
}

/** Columns inner
---------------------------------
*  You can change the padding inside the columns without changing the
*  width of them by just usinbg the INNER div of each column
*/

.inner {                             
	padding: 0px;                     
}                                   

/** Navigation styles
---------------------------------
*  The navigation is loaded after the content, so we need to make space
*  for it, equal to its height, so if you change the height of the navigation,
*  remember to adapt the margin top of the content and sidebars.
*/

.with-navigation #content,
.with-navigation .sidebar {
  margin-top: 40px;        /* Navigation Height */
}
#navigation {
  height: 40px;            /* Navigation Height */
}

/** LAYOUT RULES
---------------------------------
*  do not change if you're not sure you know what you're doing
*/

#main{background:url(images/bg_content_edges_left.png) left top no-repeat white;}
#main-inner{background:url(images/bg_content_edges_right.png) right bottom no-repeat;}
.front #main{background:url(images/bg_content_edges_home_left.png) left top no-repeat white;}
.front #main-inner{background:url(images/bg_content_edges_home_right.png) right bottom no-repeat;}

#content {
	clear:both;
  float: left;
  width: 100%;
  margin-right: -100%;
  padding: 0;
}                                   
#content-inner{
	min-height:312px;
  padding:15px 40px 35px;
}                                   
.sidebar {
  float: left;                       
	margin-top:20px;
}                                   
#sidebar-second {
  float: right;
}
#navigation {                        
  float: left;                       
  margin-left: 0;
  margin-right: -100%;
  padding: 0;
  width: 100%;
}



/* header ------------------------------------------------------------------ */
#header{
	position:relative;
	width:100%;
	background:url(images/bg_header_bright.jpg) center top no-repeat #e1e1e2;
	padding-top:100px;
}

/* logo replacement */
#logo-title{position:absolute;top:15px;left:25px;
	width:185px;height:61px;}
#logo-title h1{width:185px;height:61px;display:block;}
#logo-title h1 a{position:relative;width:0;height:0;display:block;border:none !important;}
#logo-title h1 a span{position:absolute;width:185px;height:61px;display:block;
	text-indent:-9999px;cursor:pointer;
	background:url(../logo.png) top left no-repeat;}

/* slogan */
#site-slogan{
	position:absolute;top:40px;left:50%;
	width:280px;
	font:normal 18px "Calibri", sans-serif;color:#717174;text-align:center;
	margin-left:-140px;
}




/* header region -------------------------------------------------------------- */
#header-region{
  height:36px;
  font:bold 11.5px Arial, Sans-serif;text-transform:uppercase;
  background:url(images/bg_mainnav.png) left -1px repeat-x #e3e3e3;
  border-top:1px solid white;
}
#header-region li{
	line-height:25px;
	list-style:none !important;
}
#header-region li a{
	color:#4f4f4f;
}

#header #header-region #inner-left{
  background:url(images/bg_mainnav_edge_left.png) left -1px no-repeat transparent;
}
#header #header-region #inner-right{
	height:36px;
  background:url(images/bg_mainnav_edge_right.png) right -1px no-repeat transparent;
  padding:0 30px;
}

/* main nav */
#block-menu_block-1,
#block-menu_block-7{
	float:left;
	height:25px;
	padding:5px 0 0;
}
#block-menu_block-1 li,
#block-menu_block-7 li{
	float:left;
	background:url(images/bg_mainnav_divider.png) right center no-repeat transparent;
	padding: 0 10px 0 0 !important;
	margin: 0 10px 0 0 !important;
}
#block-menu_block-1 li:last-child,
#block-menu_block-7 li:last-child{
	background:none;
}

/* developer zone */
#block-menu_block-4,
#block-menu_block-9{
	float:right;
	background:url(images/bg_mainnav_devzone2.png) right bottom no-repeat transparent;
	margin-right:-30px;
}
.section-devzone #block-menu_block-4,
.section-devzone #block-menu_block-9{
	background:url(images/bg_mainnav_devzone_active.png) right bottom no-repeat transparent;
}
#block-menu_block-4 .block-inner,
#block-menu_block-9 .block-inner{
	width:250px;height:31px;
	background:url(images/bg_mainnav_edge_right.png) right -1px no-repeat transparent;
	padding-top:5px;padding-right:55px;
}
#block-menu_block-4 li,
#block-menu_block-9 li{
	float:right;
	padding:0;
}
#block-menu_block-4 li.developer_zone,
#block-menu_block-9 li.developer_zone{
	background:url(images/icon_devzone.png) 0px 3px no-repeat transparent;
	padding-left:20px;
}
#block-menu_block-4 li.developer_zone.active,
#block-menu_block-9 li.developer_zone.active,
#block-menu_block-4 li.developer_zone.active-trail,
#block-menu_block-9 li.developer_zone.active-trail{
	background:url(images/icon_devzone.png) 0px -20px no-repeat transparent;
}
#block-menu_block-4 li.developer_zone.active a,
#block-menu_block-9 li.developer_zone.active a,
#block-menu_block-4 li.developer_zone.active-trail a,
#block-menu_block-9 li.developer_zone.active-trail a{
	color:#fff !important;
}



/* header subnav -------------------------------------------------------------- */
#header-subnav{
	height:25px;
	background:url(images/bg_subnav_plain.gif) top left repeat-x;
}

/* Subnav */
#block-menu_block-5,
#block-menu_block-8,
#block-menu_block-10{
	height:25px;
	font:bold 10.5px Arial, Sans-serif;text-transform:uppercase;
	padding:0;
}
#block-menu_block-5 ul,
#block-menu_block-8 ul,
#block-menu_block-10 ul{
	height:25px;
	background:url(images/bg_subnav_edge_links.gif) top left no-repeat #e8e7e7;
}
#block-menu_block-8 ul,
#block-menu_block-10 ul{
	float:right;
	background:url(images/bg_subnav_devzone_edge_links.gif) top left no-repeat #e4e6df;
	padding-bottom:0 !important;
	margin-right:32px;
}
#block-menu_block-5 li,
#block-menu_block-8 li,
#block-menu_block-10 li{
	float:left;
	height:25px;
	line-height:23px;
	list-style:none !important;
	padding: 1px 15px;
	margin:0;
}
#block-menu_block-5 li:last-child,
#block-menu_block-8 li:last-child,
#block-menu_block-10 li:last-child{
	background:url(images/bg_subnav_edge_rechts.gif) top right no-repeat transparent;
	padding-right:24px;
}

#block-menu_block-5 li a,
#block-menu_block-8 li a,
#block-menu_block-10 li a{
	color:#777;
}



/* header meta -------------------------------------------------------------- */
#header-meta{
	position:absolute;top:15px;right:20px;
	font: normal 11px "Trebuchet MS", Sans-serif;text-transform:uppercase;
}
#header-meta a{
	color:#333 !important;
}
#header-meta .block{
	float:right;
	margin-left:20px;
}
#header-meta ul{
	padding:0;
	margin:0;
}
#header-meta li{
	float:right;
	list-style:none;
}
#header-meta li.leaf{padding:0;}


/* Suche */
#header-meta #block-search-0 {
}
#header-meta #block-search-0 form{
	margin:0;
}
#header-meta #block-search-0 .form-text{
	position:relative;top:-2px;right:0;
	width:95px;height:12px;
	font-size:10px;color:#999;text-transform:uppercase;
	margin-right:3px;
	padding:2px 5px;
}
#header-meta #block-search-0 label,
#header-meta #block-search-0 .form-submit{
	display:none;
}


/* Sprachumschalter */
#header-meta .block-locale{
	margin-top:2px;
}
#header-meta .block-locale li{
	height:11px;width:16px;overflow:hidden;
	background-position:top left;
	background-repeat:no-repeat;
	margin-left:10px;
}
#header-meta .block-locale li:last-child{
	margin-left:0px;
}
#header-meta .block-locale li a{padding-left:20px;}
#header-meta .block-locale li.active,
#header-meta .block-locale li:hover{background-position:0 -11px;}
#header-meta .block-locale li.de{background-image:url(images/icon_de.png);}
#header-meta .block-locale li.en{background-image:url(images/icon_en.png);}

.node_translation_en, .node_translation_de, .translation-link{display:none;}


/* User Links */
#block-menu-menu-user{
	width:250px;
}




/* sidebar left -------------------------------------------------------------- */
#sidebar-first{
	padding-left:20px;
}
#sidebar-first li{
	font-size:11px;font-weight:bold;text-transform:uppercase;
	padding:5px 0;
	border-bottom:1px solid #e3e2e2;
}
#sidebar-first li.leaf{
	list-style:none;
}
#sidebar-first li a{
	color:#777;
}


/* sidebar right -------------------------------------------------------------- */
#sidebar-second{
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
	background:url(images/bg_plain_ccc_15.png) top left transparent;
	padding:10px;
	margin-right:25px;
}

#sidebar-second ul{
	padding:0;
}
#sidebar-second li{
	font-size:11px;font-weight:bold;text-transform:uppercase;
	list-style:none;
	background:url(images/icon_bullet_grey.gif) 0 8px no-repeat transparent ;
	padding:5px 0 5px 20px;
	border-bottom:1px solid #e3e2e2;
	margin:0;
}
#sidebar-second li a{
	color:#777;
}

#sidebar-second form{
	text-align:left !important;
}
#sidebar-second label{
	font-size:10px;color:#474747;
}
#sidebar-second input.form-text{
	width:90%;
	padding:3px 5px;
}

#sidebar-second .item-list{
	margin-top:25px;
}
	


/* footer -------------------------------------------------------------- */

#footer {
  float: none;clear: both;
	width:100%;
	background:url(images/bg_footer_shadow.png) center top no-repeat #d2d2d2;
	margin:0 -12px 0;padding:10px 12px;
}

#block-menu_block-6 li,
#block-menu_block-12 li{
	float:right;
	list-style:none;
}
#block-menu_block-6 li a,
#block-menu_block-12 li a{
	font: normal 11px "Trebuchet MS", Sans-serif;text-transform:uppercase;color:#333 !important;
}


/* osb-logo positioning, replacement */
#block-block-2{
	position:absolute;top:30px;right:-40px;
}
#block-block-2 hr,
#block-block-2 span.description{
	display:none;
}
#block-block-2 .block-inner a{position:relative;width:0;height:0;display:block;border:none !important;}
#block-block-2 .block-inner a span{position:absolute;width:93px;height:45px;display:block;
	text-indent:-9999px;cursor:pointer;
	background:url(images/logo_osb_grey.png) top left no-repeat;}
#block-block-2 .block-inner a:hover span{
	background:url(images/logo_osb.png) top left no-repeat;
}
#block-block-2 .edit{
	display:none !important;
}




/* Layout Helpers */

#header,
#footer,
#main #content .mission,
#main #content .breadcrumb,
#main #content .node {
  clear: both;
}



/* Module Styles -------------------------------------------------------------------------- */

/* alternate lightbox/shadowbox styles */
#sb-body{
	border:1px solid #444 !important;
	margin:0 0 2px !important;
}
#sb-nav-previous{
	background:url(images/icon_sb_nav.gif) top center no-repeat !important;
}
#sb-nav-next{
	background:url(images/icon_sb_nav.gif) center no-repeat !important;
}
#sb-nav-close{
	background:url(images/icon_sb_nav.gif) bottom center no-repeat !important;
}
#sb-nav-play{
	width:32px !important;
	background:url(images/icon_sb_slide.gif) top center no-repeat !important;
}
#sb-nav-pause{
	width:32px !important;
	background:url(images/icon_sb_slide.gif) bottom center no-repeat !important;
}











.not-logged-in.front h1.title{
	display:none;
}


/* Buehne / Stage ------------------------------------ */
#stage{
	position:relative;
	height:255px;
	font-family:"Calibri",Arial,Sans-serif;color:white;
	background:url(images/bg_stage.png) center top no-repeat transparent;
	padding:15px;
	margin:10px -15px 40px;
}
#stage h2{font-size:26px;}
#stage .description{
	float:left;width:260px;
	font-size:1.1em;
}

#stage .image{
	float:right;
	background:url(images/bg_image_stage.png) center top no-repeat transparent;
	margin-left:15px;
	padding:0 5px 10px;
}
#stage .image img{
	width:128px;height:98px;overflow:hidden;
	border:1px solid white;
}

#stage #tab_anchors{
	position:absolute;left:0;bottom:0;
	width:100%;height:63px;
	background-image:url(images/bg_stage_tabs.png);
	background-repeat:no-repeat;
	background-position:left top;
	padding:0;
}
#stage #tab_anchors.state2{ background-position:left center; }
#stage #tab_anchors.state3{	background-position:left bottom; }

#stage #tab_anchors li{
	float:left;display:block;
	text-shadow: 0px 0px 8px #cacdce;
	width:33%;
	margin:0;
}
#stage #tab_anchors li:hover{
	text-shadow: 0px 0px 8px white;
}
#stage #tab_anchors li.active,
#stage #tab_anchors li.active:hover{
	text-shadow: 0px 0px 12px #acdb92;
}
#stage #tab_anchors li a{
	display:block;
	font:normal 21px/63px "Calibri",Sans-serif;color:#4a4a4a !important;text-align:center;text-decoration:none;
	width:100%;height:63px;
}



/* Quicklinks ---------------------------------------------------- */
ul#quicklinks{
	padding-left:5px;
}
ul#quicklinks li {
	float:left;display:block;min-height:80px;width:110px;
	list-style:none;
	font-size:0.9em;
	background-position:left top;
	background-repeat:no-repeat;
	padding-left:60px;
	margin:0 40px 20px 0;
}
ul#quicklinks li#download{
	background-image:url(images/icon_toolchain.png);
}
ul#quicklinks li#tutorials{
	background-image:url(images/icon_support_blue.png);
}
ul#quicklinks li#support{
	background-image:url(images/icon_support.png);
}
ul#quicklinks li .title {
	display:block;
	font:bold 20px "Calibri",Arial,sans-serif;color:#999;
	margin-bottom:5px;
}



/* Button Content ---------------------------------------------------- */
a.button{
  display:inline-block;position:relative;
  height: 26px; /* 24px (parent) - 4px (padding) */
  font-size:0.9em;line-height:23px;color:#333 !important;text-decoration:none;
	background: url(images/button_left.png) left top no-repeat transparent;
  padding: 0 3px 0 8px;
}
a.button:after{
	display:block;position:absolute;right:-5px;top:0;
  height:26px;width:5px;
  content:"";line-height:23px;
  background: url(images/button_right.png) right top no-repeat transparent;
  padding: 0 0 0 5px; /* width of tab-left.png */
}
a.button:hover{text-decoration:none;background-position:left center;}
a.button:hover:after{background-position:right center;}
a.button:active{line-height:25px;background-position:left bottom;}
a.button:active:after{background-position:right bottom;}




/* tooltip -------------------------------------------------------------------- */
#tooltip{
	position:absolute;display:none;
	max-width:300px;
	font-size:0.7em;color:#333;
	background:#fff;
	padding:5px 8px;
	border:3px solid #e0e0e0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
#tooltip dd{
	font-size:0.7em;color:#333;
}
#tooltip h5,
#tooltip dt{
	display:block;
	font:bold 14px "Calibri",sans-serif !important;
	margin:0 0 3px;
}
#tooltip small,
#tooltip dt small{
	display:block;font-size:0.8em;
}
#tooltip strong{
	display:block;
	margin-top:5px;
}



/*
.tooltip{
	cursor:help;
}
*/

dl#mouseoverinfos,
#mouseoverinfos div{
	display:none;
}


/* mehrspaltige inhalte ------------------------ */ 
.cols{
	width:100%;
}
.cols .col{
	float:left;
	margin-left:20px;
}
.cols .col:first-child{margin:0 !important;}

.c25{
	width:20%;
}
.c33{
	width:30.5%;
}
.c50{
	width:48%;
}
.c66{
	width:64%;
}
.c75{
	width:74%;
}


.rounded{
	width:92%;
	background-color:#fafafa;
	padding:15px !important;
	border-width:3px !important;
	border-style:solid;
	border-color:#eee;
	border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
  /*box-shadow: 0 4px 3px #ccc;-moz-box-shadow: 0 4px 15px #ccc;-webkit-box-shadow: 0 4px 3px #ccc;*/
	margin:0 -10px 20px !important;
}
.rounded.error a{
	color:#d77 !important;
}


/* Form elements mailinglist */
.page-download-confirm #content label,
.page-devzone-mailinglist #content label{
	position:absolute;height:30px;
}
.page-download-confirm #content label,
.page-download-confirm #content input,
.page-devzone-mailinglist #content label,
.page-devzone-mailinglist #content input{
	padding:3px;margin:3px 0;
}
.page-download-confirm #content input{
	width:150px;
	margin-left:60px;
}
.page-devzone-mailinglist #content input{
	margin-left:180px;
}
.page-devzone-mailinglist #content input.following{
	margin-left:10px;
}