/**************************************************************
 * AUTHOR:  Pat Heard (fullahead.org)                         *
 * DATE:    2006.03.19                                        *
 * PURPOSE: Controls the layout of the site and styles        *
 *          the menus                                         *
 * UPDATE : teambauer.de                                      *
 **************************************************************/


/**************************************************************
 * content: Sets the width of the site. Make changes here     *
 *           to convert to a fixed width site.                *
 **************************************************************/
	#content{  
        height: 100%;
        min-height: 100%;
        text-align: left;
    }

	#content,#width{
        width:     expression(document.body.clientWidth > 1000 ? "1600px" : "94%"); 
        max-width: 1600px;
		margin:    0 auto;
    }

	#content[id],#width[id]{
        width:  94%;
        height: auto;
    }

/**************************************************************
 * header: Holds the site title and header images             *
 **************************************************************/
	#header{
        position: relative;
        height:   153px;
    }

	#header #title{
        position:   absolute;
        z-index:    3;
        top:        10px;
        left:       130px;
        padding:    5px;
        text-align: right;
    }

	#header h1{
        margin:         0;
        padding:        0;
        font:           700 4em "trebuchet ms", serif;
        letter-spacing: -3px;
        text-transform: lowercase;
        color:          #FFF;
    }

	#header h2{
        position:       absolute;
        top:            10px;
        right:          5px;
        margin:         0;
        padding:        0;
        font:           700 1em "trebuchet ms", serif;
        text-transform: lowercase;
        color:          #00F0EC;
    }

	#header img.left{
        position: absolute;
        z-index:  1;
        top:      0;
        left:     0;
    }

	#header img.right{
        position: absolute;
        z-index:  0;
        top:      0;
        right:    0;
    }

	#header img.center{
        position: absolute;
        z-index:  2;
        top:      70px;
        right:    400px;
    }

    #header img.flag{
        position: relative;
        z-index:  3;
        top:      196px;
        left:     24%;
    }

/**************************************************************
 * mainMenu: The top level site menu                          *
 **************************************************************/
	#mainMenu{ 
        float: left;
        width: 100%;
        clear: both;
    }

	#mainMenu ul{
        margin:  0;
        padding: 0;
    }

	#mainMenu li{
        display:    inline;
        list-style: none;
        margin:     0;
        padding:    0;
    }

	#mainMenu li a{
        float:           left;
        margin:          0 2px;
        padding:         5px 0.5em;
        font:            400 1.5em "trebuchet ms", serif;
        text-decoration: none;
        color:           #FFF;
    }

	#mainMenu li a.here{
        color:      #F17400;
        border-top: 4px solid #F17400;
    }

	#mainMenu li a:hover{
        color:      #65EBFF;
        border-top: 4px solid #8BE6FA;
    }


	#mainMenu li a.last{
        margin-right: 0;
    }

/**************************************************************
 * page: Holds the main page content.                         *
 **************************************************************/
	#page{
		float:          left;
        width:          100%;
        clear:          both;
        padding-bottom: 4em;
    }

	#reference a{
        color:           #FFF; 
        text-decoration: none;
        font-size:       1.0em;
		font-family:     verdana, arial, sans-serif;
		font-weight:     normal;
    }

	#reference a:hover{
        color:           #8BE6FA; 
        text-decoration: none;
        font-size:       1.0em;
		font-family:     verdana, arial, sans-serif;
		font-weight:     normal;
    }

/**************************************************************
 * scrollMenu: The scrollbar side menu                        *
 **************************************************************/
	.navContainer{
		width:            98.0%;																								
		max-height:       632px; 
		background-color: #555; 
		overflow:         hidden;
		padding:          2px;
		border:           solid 0px #808080;

        border-radius:        7px;
		-moz-border-radius:   7px;
		-webkit-border-radius:7px;
    }

	#scroll h5{
        display:    block; 
		font:       100 1.2em "trebuchet ms", serif;
        color:      #F17400; 
        background: #555; 
        width:      89.5%;
    }

	#scroll ul{
        margin:  0;
        padding: 0;
    }

	#scroll li{
        display:          inline; 
        list-style-image: url("foo.gif");
        font:             100 1.0em "trebuchet ms", serif;
    } 									

	#scroll li a{
        display:         block;
        margin:          0;
        padding:         0; 
        padding-left:    17px;
        text-decoration: none;
        color:           #FFF;
        background:      #555; 
        width:           100%;
    } 

	#scroll li a:hover{
        color:      #65EBFF;
        background: #5F5F5F;
    }

	#scroll li.here a{
        margin:     0;
        padding:    0; 
        color:      #65EBFF;
        background: #555;
    } 

	#scroll li.here a{
        padding-left: 17px;
        font:         100 1.0em "trebuchet ms", serif; 									
		color:        #F17400;
        background:   #5F5F5F url(../images/global/bullet.gif) no-repeat 0px 0px;
    }

	#scroll li.here a:hover{
        color:      #F17400;
        background: #5F5F5F url(../images/global/bullet.gif) no-repeat 0px 0px;
    }  
    
/**************************************************************
 * scrollMenu: The scrollbar statistic menu                   *
 **************************************************************/
	.navStatistic{
		width:            	98.0%;																								
		max-height:       	632px; 
		background-color:	#555; 
		overflow:         	hidden;
		padding:          	2px;
		border:           	solid 0px #808080;
	}

	.userDataHeader{ 
		position:			relative; 
		top:   				0px; 
		left:   			5px; 
	}

	#idUserHeader ul{
		display: 			auto; 
		text-align:			left; 
		width: 				370px; 
		height: 			30px; 
		color: 				#FFFFFF;
		padding-top: 		10px;		
	}

	#idUserHeader li{
		display: 			block; 
		float: 				left;
		list-style-image:	none;
		font-family: 		"Verdana", sans-serif; 
		font-size: 			15px;
		height: 			23px;
	}
	
	#idUserData ul{
		display: 			auto; 
		text-align:			left; 
		width: 				375px; 
		height: 			15px; 
		color: 				#FFFFFF;
		padding-top: 		0px;		
	}

	#idUserData li{
		display: 			block; 
		float: 				left;
		list-style-image:	none;
		font-family: 		"Verdana", sans-serif; 
		font-size: 			12px;
		height: 			18px;
	}

	.userDataGraph{ 
		position:			relative; 
		top:   				100px; 
		left:   			5px; 
	}

/**************************************************************
 * footer: The page footer                                    *
 **************************************************************/
	#footer{
		float:       left;
        width:       100%;
        clear:       both;
        margin-top:  -4.1em;
        background:  #555555 url('../images/footer/footer.jpg') repeat-x left top; 
        line-height: 12px;
    }

	#footer a{
        color:           #FFF; 
        text-decoration: none;
        font-size:       1.0em;
		font-family:     verdana, arial, sans-serif;
		font-weight:     normal;
    }

	#footer a:hover{
        color:           #8BE6FA; 
        text-decoration: none;
        font-size:       1.0em;
		font-family:     verdana, arial, sans-serif;
		font-weight:     normal;
    }

	#footer #width{
		position:    relative;
        z-index:     3;
        font-size:   0.75em;
        padding-top: 27px;
    }

/**************************************************************
 * Width classes used by the site columns                     *
 **************************************************************/
	.width100{
		width: 100%;
    }

	.width75{
		width: 74%;
    }

	.width70{
		width: 69.7%;
    }

	.width67{
		width: 66.7%;
    }

	.width50{
		width: 49.7%;
    }

	.width33{
		width: 32.7%;
    }

	.width30{
		width: 29.7%;
    }

	.width25{
		width: 24.7%;
    }

/**************************************************************
 * Alignment classes                                          *
 **************************************************************/
	.floatLeft{
		float: left;
    }

	.floatRight{
		float: right;
    }

	.floatCenter{	
		margin-right: auto;
		margin-left:  auto;
    }

	.alignLeft{
		text-align: left;
    }

	.alignCenter{
		text-align: center;
    }

	.alignRight{
		text-align: right;
    }

	.alignjustify{
		text-align: justify;
    }
       
/**************************************************************
 * Generic display classes                                    *
 **************************************************************/
	.clear{
		clear: both;
    }

	.block{
		display: block;
    }

	.small{
		font-size: 0.8em;
    }

/**************************************************************
 * Generic color classes                                      *
 **************************************************************/
	.green{
		color: #A1FF45;
    }

	.orange{
		color: #FFB323;
    }

	.darkorange{
        color: #F17400;
    }

	.red{
		color: #EA1B00;
    }

	.grey{
		color: #666;
    }

	.grey a{
		color: #999;
    }

	.grey a:hover{
		color: #EEE;
    }

	.gradient{
		margin-bottom: 0.5em;
        background:    #555 url(../images/global/gradient.jpg) repeat-x bottom left;

        border-radius:        7px;
		-moz-border-radius:   7px;
		-webkit-border-radius:7px;
	}