/*
 * *****************************
 * @description		screen css
 * @author			coma ag | jue
 * @date			2009-11
 * @copyright		2009 coma ag
 * @link			http://www.coma.de
 * *****************************
 */

/** ** ** ** RESET: 		import css reset ** ** ** **/
	@import url("reset.css");
	
/** ** ** ** STRUCTURE: 	fuer die grundlegenden struktudefinitionen (abstaende, hoehen, breiten, etc.) ** ** ** **/
	body {
		background: #17297E; 
	}
	
	#bg {
		background: url(../images/hygiene/layout/bg.gif);
		padding:0 0 10px 0;
	}
	
	#wrapper {
		background: url(../images/hygiene/layout/bg_wrapper.png) 0 0 no-repeat;
		margin: 0 auto;
		padding: 10px 0 0 0;
		position: relative;
		width: 932px;
	}
	
	#logo, #sublogo { position: absolute; z-index:5; }
	
	#logo {
		left: 0;
		top: 10px;
		z-index: 99;
	}
	.logo_flashgame {
	   z-index:0 !important;
	}
	
	#sublogo {
		right: 0;
		top: 10px;
	}
	
	#main {
		float: left;
		padding: 0 0 0 52px;
	}
	
	div.box {
		background: #fff url(../images/hygiene/layout/bg_box.gif) left bottom repeat-x;
		border: 1px solid #bccde2;
		margin: 0 0 8px;
		padding: 12px 12px 10px 12px;
		position: relative;
		width: 645px;
		z-index: 77;
	}
	div.teaser {
	   padding-bottom:10px !important;
	}
	
	div.contentbox {
	   min-height:377px;
	}

	div.small {
		background-image: url(../images/hygiene/layout/bg_box_small.gif);
		float: left;
		padding: 10px;
		width: 310px;
	}
	
	div.first { margin-right: 7px; }
	
	#sidebar {
		float: left;
		padding: 0 0 0 5px;
	}
	
	#footer {
	    clear:left;
		background: #17297E url(../images/hygiene/layout/bg_footer.gif);
		padding: 8px 0 10px 0;
		position:relative;
	}
	
	#footer .inner {
		margin: 0 auto;
		width: 932px;
	}
	
	#footer .wateraid {
		float: left;
		margin: -3px 0 0 20px;
		/*top: -3px;*/
	}

/** ** ** ** MENU: 			fuer die layoutangaben des menus, ausser font ** ** ** **/
	ul.menu {
		margin: 0 0 0 0;
		padding: 20px 0 30px 142px;
		z-index: 66;
	}

	ul.menu li {
		float: left;
	}
	
	ul.menu li a {
		background-position: 0 0;
		background-repeat: no-repeat;
		display: block;
		height: 36px;
	}
	ul.menu li a:hover { background-position: 0 -36px; }
	ul.menu li a.active { background-position: 0 -36px !important; }
	
	ul.menu li.home a {
		background-image: url(../images/hygiene/layout/menu_home.gif);
		width: 79px;
	}
	
	ul.menu li.hygiene a {
		background-image: url(../images/hygiene/layout/menu_hygiene.gif);
		width: 171px;
	}
	
	ul.menu li.wateraid a {
		background-image: url(../images/hygiene/layout/menu_wateraid.gif);
		width: 77px;
	}
	
	ul.menu li.help a {
		background-image: url(../images/hygiene/layout/menu_help.gif);
		width: 133px;
	}
	
	ul.menu li.game a {
		background-image: url(../images/hygiene/layout/menu_game.gif);
		width: 113px;
	}
	
	ul.menu li.spendenuebergabe a {
        background-image: url(../images/hygiene/layout/menu_spendenuebergabe.gif);
        width: 121px;
    }
	
	ul.menu li a span {
		display: none;
	}

/** ** ** ** TEXT:			fuer die schriftdefinitionen ** ** ** **/
	body {
		color: #003480;
		font-family: Verdana, Arial, sans-serif;
		font-size: 10px;
	}
	
	#wrapper { font-size: 11px; }
	
	ul.menu li {
		font-weight: 900;
	}
	
	ul.menu li a { color: #003480; }
	ul.menu li a.active { color: #009bf4; }
	
	p.more-link { font-weight: 900; }
	
	div.box h1, div.box p { width: 626px; }
	
	div.small p { width: auto; }
	
	div.box p.more-link {
		margin: 0;
		width: auto;
	}
	
	div.box p.more-link  {
		bottom: 20px;
		position: absolute;
		right: 20px;
		padding:0;
	}
	div.teaser p.more-link  {
	   bottom: 10px !important;
	   right: 10px !important;
	}
	
	div.box p {
		margin: 0 0 12px 0;
		line-height: 15px;
		padding:0 10px;
	}
	
	div.box h1 {
		font-size: 16px;
		margin: 25px 0 12px 0;
		padding: 0 10px;
	}
	div.teaser h1 {
        margin: 15px 0 10px 0 !important;
    }
	
	div.box h2 {
		font-size: 14px;
		margin: 0 0 0 0;
		height:24px;
	}
	
	div.box a { color: #003480; text-decoration:underline; }
	div.teaser a { text-decoration:none !important; }
	
	#footer, #footer a { color: #7ba3dc; }
	#footer a:hover, #footer a.active { color: #fff; }

/** ** ** ** FORMS:			fuer die formulardefinitionen (groesse, positionierung etc), schriftdefinitionen (font etc) wie immer in TEXT ** ** ** **/
    form { margin:0; padding:0; /*due to ie6*/ }
    form label {
        display:block;
        width:110px;
        float:left;
        clear:left;
        height:17px;
        padding:3px 0 0 0;
        margin:0;
    }
    form label.radio {
        clear:none;
        width:auto;
        margin:0 15px 0 0;
    }
    form label.error, 
    p.error { color:red; }
    
    form input,
    form textarea,
    form select {
        border:solid 1px #c2d2e5;
        width:245px;
        float:left;
        margin:0 0 5px 0;
        font-family: Verdana, Arial, sans-serif;
        font-size:11px;
    }
    form select {
        width:247px;
    }
    form input.zip {
        width:45px;
        margin-right:5px;
    }
    form input.city {
        width:193px;
        float:left;
    }
    form input.radio {
        border:none;
        width:auto;
        display:block;
        margin:3px 5px 0 0;
    }
    form input.button {
        clear:left;
        width:auto;
        border:none;
        margin:0;
    }
    
    form input.button_submit {
        clear:left;
        background:url(../images/hygiene/button_absenden.gif) no-repeat;
        width:101px;
        height:31px;
        border:none;
        margin:0;
        cursor:pointer;
    }    
    
    form div.column_left {
       width:365px !important;
       padding-left:10px;
    }
    form div.column_right {
       width:250px !important;
    }
    
	
	
/** ** ** ** TABLES:		fuer die fefinition von tabellen (farbe, groesse, positionierung). textdefinitionen (zb th { font-weight: bold;}) kommt zu TEXT ** ** ** **/

/** ** ** ** LISTS:			fuer die listendefinitionen, ausser font ** ** ** **/
	#footer ul {
		float: left;
		margin: 8px 0 0 50px;
	}

	#footer ul li {
		border-left: 1px solid #7ba3dc;
		display: inline;
		padding: 0 4px 0 8px;
	}
	
	#footer ul li.first {
		border: none;
		padding: 0 4px 0 0;
	}
	
	#footer ul.share {
		float: right;
		margin: 0;
	}
	
	#footer ul.share li {
		border: none;
		padding: 0 0 0 6px;
	}
	#footer ul.share li img { cursor:pointer; }

/** ** ** ** IMAGES:		fuer die bilder, ausser hintergruende ** ** ** **/
	div.small img {
		float: left;
		margin: 1px 10px 0 0;
	}
	div.small h2 img {
	   margin-right:0px !important;
	}
	
	#footer .wateraid img {	   
		position: relative;
		top: 6px;
	}

/** ** ** ** MISC:			fuer sonstiges ** ** ** **/
	/* floats */
	.clear { clear:both; }
	.float-left, .float_left { float:left; width:auto; }
	.float-right, .float_right { float:right; }
	
	div.clear {
		height:1px;
		overflow: hidden;
	}

	/* text */
	.left { text-align: left; }
	.center { text-align: center; }
	.right { text-align: right; }
	.bold { font-weight:bold; }
	.italic { font-style:italic; }
	
	
	div.column_left {
	   float:left;
	   width:310px;
	}
	div.column_right {
       float:left;
       width:310px;
       padding-left:20px;
    }
	div.column_left p, div.column_right p { width:auto; }
	
	div.flashgame {
	   position:relative;
	   z-index:1;
	   height:418px;
	   width:885px;
	}