@charset "utf-8";
/* CSS Document for Handle Creativ Art - Werbeagentur */
/*
	created by: Klaus Hoermann <klaus@3b-solutions.net>
	created for: Handle Creativ Art - Werbeagentur
	Client: Handle Creativ Art - Werbeagentur
	Description: main css file
	Copyright: (C) 3B-Solutions Klaus Hoermann 2009
*/

/********************************************************************/
/* HTML */

/* clear all margins and paddings to zero */
* {
	margin:0px;
	padding:0px;
}

/* html style */
html {
	height: 100%; 
	margin-bottom: 1px; 
}

/********************************************************************/
/* BODY */
body {
	font-size:12px;
	/*font-family:Verdana, Geneva, sans-serif;*/
	font-family:Arial, Helvetica, sans-serif;
	color:#666666;	
	/*background-image:url(../img/background.jpg);
	background-position:center;
	background-repeat:no-repeat;*/
}

/* general link color */
a {
	color:#0099cc;
}

/* general link color on hover */
a:hover {
	color:#0099cc;
}

/********************************************************************/
/* CONTAINER */

/* main container for website */
#container {
	width:900px;
	margin:auto;
	margin-top:20px;
}

/********************************************************************/
/* MENU CONTAINERS, MENUS */

/* container for the top and the main menu */
#menucontainer {
	width:900px;
	height:80px;
	border-bottom:6px solid black;
}

/********************************************************************/
/* TOP MENU */

/* top menu */
#topmenu {
	width:900px;
	height:18px;
	background-color:black;
	border-bottom:2px solid #0099cc;
}

/* topmenubar unordered list */
#topmenubar li {
	float:right;
	position:relative;
	overflow: hidden;	
	background-color:black;
}

#topmenubar {
	list-style-type:none;
}

/* links in the topmenu bar */
#topmenubar a {
	text-decoration: none;
	outline: none;
	color:#d00000;
	display: block;
	width: 24px;
	margin-right:5px;
	cursor:pointer;
	float:left;
}

/* the span holding the textmessage */
#topmenubar span {
	width: 120px;
	height: 18px;
	position: absolute;
	display: none;
	margin-left:20px;
	color:white;
	padding-left: 10px;
	padding-top:3px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
}

/********************************************************************/
/* MAIN MENU */

/* main menu */
#mainmenucontainer {
	width:900px;
	height:58px;
	background-color:white;
	background-image:url(../img/mainmenu/schachbrettBackground.png);
	background-position:top left no-repeat;
}

/* logo container in the main menu */
#mainmenulogo {
	width:50px;
	height:50px;
	padding-top:4px;
	float:left;
}

/* div holding the main menu */
#mainmenu {
	float:left;
	width:850px;
	height:55px;
}

/* unordered list holding the items for the menu*/
ul.mainnav {  
    list-style: none;  
    float: right;  
    width: 800px;  
    font-size: 1.2em;
}

/* items in the main menu list */
ul.mainnav li {  
    float:left;  
    margin:0;
	padding-left:13px;
	padding-right:13px;
    position:relative; /*--Declare X and Y axis base for sub navigation--*/  
}

/* links in the listitems */
ul.mainnav li a{  
    padding: 15px 0px;
	padding-left:5px;
    color: #fff;  
    display: block;  
    text-decoration: none;  
    float: left; 
	height:35px;
}

/* large main menu font */
.menufontlarge {
	font-size:14px;
	margin:0px;
	color:#666;
	padding:0px;
}

/* small main menu font */
.menufontsmall {
	font-size:11px;
	color:#0099cc;
}

/* hover style for the anchor tags */
ul.mainnav li a:hover{  
	/*background: url(../img/mainmenu/topnav_hover.gif) no-repeat center top;  */
}

/* hover effect for trigger */
ul.mainnav li span.subhover {
	background-position: center bottombottom; 
	cursor: pointer;} 

/* anchor tags in the subnav list items */
ul.mainnav li ul.subnav li a {
	height:10px;
}

/* subnav list */
ul.mainnav li ul.subnav {  
    list-style: none;  
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
    left: 15; top: 60px;  
    background-color:white;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
    /*-moz-border-radius-bottomleft:15px;
	-webkit-border-bottom-left-radius:15px;
    -moz-border-radius-bottomright:15px;
	-webkit-border-bottom-right-radius:15px;*/
    display:none;  
    float:left;  
	background-image:url(../img/mainmenu/submenuBackground.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
	padding-right:0px;
	padding-right:0px;
}  

/* listitems in the subnav list */
ul.mainnav li ul.subnav li{  
    clear: both;  
    width: 140px;
	padding-right:0px;
	padding-right:0px;
}

/* style for links in the subnav listitems*/
html ul.mainnav li ul.subnav li a {  
	float: left;
	padding:5px;
	margin:0px;
    width: 140px;
	font-size:11px;
	height:15px;
    padding-left: 0px;
	color:#999999;
}  

/* hover effect for subnav links */
html ul.mainnav li ul.subnav li a:hover {
	color:#0099cc;
	font-weight:bold;
}  

/********************************************************************/
/* MENU SEPARATOR */

/* separates the header from the content */
#menuseparator {
	width:900px;
	height:5px;
	background-image:url(../img/separator.png);
	background-repeat:repeat-x;
	background-position:bottom center;
}

/********************************************************************/
/* HEADER CONTAINER*/

/* container for the header */
#headercontainer {
	width:900px;
	height:233px;
}

/********************************************************************/
/* HEADER NEWS */

/* news sidebar */
#headernews {
	width:170px;
	padding-left:5px;
	padding-right:5px;
	height:235px;
	float:left;	
}

/* header text for news */
#headernews h1 {
	color: #0099cc;
	font-size:11px;
	padding-top:10px;
}

/* class for news items */
#headernews .newsitem {
	font-size:10px;
}

/* date header for news item */
#headernews .newsitem h2 {
	font-size:11px;
	padding-top:15px;
	font-weight:bold;
}

/* news item text */
#headernews .newsitem p {
	font-size:10px;
	width:150px;
	text-align:left;
}

/********************************************************************/
/* HEADER IMAGE */

/* header image */
#headerimage {
	width:720px;
	height:230px;
	float:left;
	margin-top:2px;
	z-index:-1000;
}

/* image in the headerimage container div */
#headerimage img {
	width: 720px;
	height: 230px;
}

/********************************************************************/
/* HEADER SEPARATOR */

/* separates the header from the content */
#headerseparator {
	width:900px;
	height:3px;
	background-image:url(../img/separator.png);
	background-repeat:repeat-x;
	background-position:center;
}

/********************************************************************/
/* CONTENT CONTAINER*/

/* container for the content */
#contentcontainer {
	width:900px;
	min-height:350px;
	background-image:url(../img/websiteBackground.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
}

/********************************************************************/
/* SIDEBAR LEFT */

/* left content sidebar */
#contentleft {
	width:178px;
	float:left;
}

/* header text */
#contentleft h1 {
	font-size:11px;
	color:#0099cc;
}

/* paragraph text */
#contentleft p {
	font-size:10px;
	padding-top:5px;
	text-align:left;
}

/* link style */
#contentleft a {
	font-size:10px;
}

/********************************************************************/
/* INFO CONTENT */

/* div container for info */
#contentleftinfo {
	width:158px;
	background-color:#f0f2f3;
	padding:10px;
	margin-top:3px;
}

/********************************************************************/
/* CONTACT */

/* div container for contact infos */
#contentleftcontact {
	width:158px;
	background-color:#f0f2f3;
	padding:10px;
}

/********************************************************************/
#contentleftlinks {
	width:158px;
	background-color:#f0f2f3;
	padding:10px;
}

#contentleftlinks img {
	margin-top:0px;
	border:0;
}


/********************************************************************/
/* NEWSLETTER ANMELDUNG */

/* div for newsletter */
#contentleftnewsletter {
	width:158px;
	background-color:#f0f2f3;
	padding:10px;
}

#contentleftnewsletter input {
	font-size:11px;
	margin-top:2px;
	margin-bottom:2px;
}

.cpeheader {
	font-size:11px;
	color:#0099cc;
	font-weight:bold;
	background-image:url(../img/sidebar/expand.png);
	background-position:right top;
	background-repeat:no-repeat;
	cursor:pointer;
}

.cpeheader.active {
	background-image:url(../img/sidebar/collapse.png);
	background-position:right top;
	background-repeat:no-repeat;
}




/********************************************************************/
/* COPYRIGHT */

/* div container for copyright infos */
#contentleftcopyright {
	width:158px;
	background-color:#f0f2f3;
	padding:10px;
}

/********************************************************************/
/* SEPARATOR */

/* separator for content left */
#contentleftseparator {
	width:178px;
	height:10px;
	background-image:url(../img/separator.png);
	background-repeat:repeat-x;
	background-position:center;
}

/********************************************************************/
/* CONTENT */

/* center content */
#contentcenter {
	width:719px;
	float:left;
	padding:0px;
	margin-left:3px;
	margin-top:3px;
	position:relative;
}

/* heading for center content */
#contentcenter h1 {
	font-size:13px;
	color:#0099cc;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
}

/* paragraph for the center content */
#contentcenter p {
	text-align:left;
	padding-bottom:10px;
	padding-left:5px;
	line-height:18px;
}

#contentcenter ul {
	margin-left:20px;
	line-height:18px;
}

#contentcenterleft {
	float:left;
	width:350px;
	background-color:red;
}

#contentcenterright {
	float:left;
	width:350px;
	background-color:green;
}

/* content float clearer */
#clearer {
	clear:both;
}



/********************************************************************/
/* TOP LINK */

/* anchor tag with class toTop, jQuery eneabled */
#toTop { 
	width:120px;
	height:15px;
	background-color:#f0f2f3;
	border:1px solid #ccc;
	text-align:center;
	padding:5px;
	position:fixed;
	bottom:10px;
	right:10px;
	cursor:pointer;
	color:#0099cc;
	text-decoration:none;
	background-image:url(../img/scrollToTop/toTopArrow.png);
	background-position:center left;
	background-repeat:no-repeat;
}



/********************************************************************/
/* CLASSES */

/* centered image class */
.centeredImage {
	text-align:center;
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding:2px;
}