/*
 * main positioning styles
 */
html, body {margin: 0; padding: 0;}
#wrapper {margin: 1em auto; width: 60em;}

#nav {float: right; width: 184px;}
#content {margin-right: 220px;}

.clearer {clear: both;}

h1, h2, h3, h4, h5, h6 {margin: 1.25em 0 0.5em 0; padding: 0;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.1em;}
h4, h5, h6 {font-size: 1em;}
p {margin: 1em 0; padding: 0;}
ul, ol, dl {margin: 1em 0; padding: 0 0 0 1em;}

form label {display: block; float: left; width: 7.5em;}
form p {clear: left;}
input, select, textarea {display: block; margin-left: 8.5em; font-size: 0.8em; border: 1px inset gray;}
textarea {font-family: Arial, Helvetica, Verdana, sans-serif;}

label.necessary {}

form p.buttons {text-align: center;}
form p.buttons input {display: inline; margin: 0 2em; border-style: outset;}


/*
 * styles for the overall theme (colors, images, borders, ect.)
 */
body {font-family: Arial, Helvetica, Verdana, sans-serif; background-color: #EDEDED;}

/* header */
#header {padding-left: 25px; background: url(images/header_left.png) no-repeat left top; color: white; }
#header .b1 {padding-right: 25px; background: url(images/header_right.png) no-repeat right top;}
#header .b2 {background: url(images/header_background.png) repeat-x left top;}
#header .b3 {height: 156px; padding-left: 230px; background: url(images/logo.png) no-repeat left center;}
#header h1 {margin: 0; padding: 1.25em 0 0.5em 0;}
#header p {margin: 0;}

/* main body (navigation, content and footer) */
#main {background-color: white;}
#main .b1 {background: url(images/border_left.gif) repeat-y left top;}
#main .b2 {background: url(images/border_right.gif) repeat-y right top;}
#main .b3 {background: url(images/border_bottom.gif) repeat-x left bottom;}
#main .b4 {background: url(images/edge_left.gif) no-repeat left bottom;}
#main .b5 {padding: 0 10px 10px 10px; background: url(images/edge_right.gif) no-repeat right bottom;}
#main .b6 {padding: 0.5em 0.75em 0.5em 0.5em; border-top: 1px solid #ADB1AD;}

/* navigation styles */
#nav {}
#nav ul {margin: 0; padding: 0; list-style: none;}
#nav li {margin: 0.5em 0;}
#nav ul a {position: relative; display: block; width: 144px; height: 44px; margin: 0 auto; padding-left: 40px; line-height: 44px; vertical-align: middle; color: #578039; font-size: 1.1em; text-decoration: none;}
#nav ul a:hover, #nav ul a:focus, #nav ul a:active {background-position: 0% -44px;}
#nav ul a span {position: absolute; display: block; top: -5px; left: -5px; background-repeat: no-repeat;}

#page_links {border-bottom: 1px solid white;}
#page_links a {background: url(images/button_page.png) no-repeat left top;}
#management_links a {background: url(images/button_secure.png) no-repeat left top;}

#ssl_notice {padding: 0.5em 0.5em 0.5em 3.5em; font-size: 0.6em; background: #FFC url(images/icon_secure.png) no-repeat 0.5em 50%; border: 1px solid #FE0;}

#nav .index span {left: -15px; top: -1px; width: 51px; height: 29px; background-image: url(images/icon_news.png);}
#nav .server span {width: 31px; height: 40px; background-image: url(images/icon_info.png);}
#nav .credits span {width: 41px; height: 40px; background-image: url(images/icon_credits.png);}
#nav .tutorials span {width: 30px; height: 39px; background-image: url(images/icon_help.png);}
#nav .impressum span {width: 33px; height: 40px; background-image: url(images/icon_impressum.png);}
#nav .webmail span {left: -7px; width: 43px; height: 40px; background-image: url(images/icon_round_cube.png);}
#nav .syscp span {left: -6px; width: 41px; height: 40px; background-image: url(images/icon_syscp.png);}
#nav .phpmyadmin span {width: 40px; height: 40px; background-image: url(images/icon_phpmyadmin.png);}
#nav .teamspeak span {width: 36px; height: 41px; background-image: url(images/icon_teamspeak.png);}

body#index #nav .index, body#server #nav .server, body#tutorials #nav .tutorials, body#credits #nav .credits, body#impressum #nav .impressum {background-position: 0% -44px;}

/* content styles */
#content h2 {margin: 0;}
a {color: #578039;}
a:hover, a:focus, a:active {color: #79C047;}

.download {display: block; margin: 1em 0; padding-left: 20px; line-height: 16px; background: url(images/icon_download.png) no-repeat left center;}
.mail {padding-left: 18px; background: url(images/icon_email.png) no-repeat left bottom;}
.web {padding-left: 18px; background: url(images/icon_web_link.png) no-repeat left bottom;}
.user {padding-left: 18px; background: url(images/icon_user.png) no-repeat left bottom;}

/* footer */
#footer {font-size: 0.75em; color: gray; text-align: center;}
#footer a {color: gray; text-decoration: none;}
#footer a:hover, #footer a:focus, #footer a:active {text-decoration: underline;}


/*
 * general styles
 */
.block_image {margin: 1em 0; text-align: center;}
.inline_image {float: right; padding: 0.25em; text-align: center;}
.inline_image p, .block_image p {font-size: 0.6em; margin: 0; color: #666;}
.inline_image p {text-align: left;}

.table_of_contents {float: right; width: 15em; margin-left: 1.5em;}
.table_of_contents h3 {margin: 1em 0; font-size: 1em;}
.table_of_contents ul ul {margin: 0;}

.notice {font-size: 0.75em;}


/*
 * styles for the rounded boxes
 */
div.round_box {border: 1px solid #DBDBDB;}
div.round_box div.rb1 {background: url(images/round_box_border_left.gif) repeat-y left top; position: relative; left: -1px;}
div.round_box div.rb2 {background: url(images/round_box_edge_left_top.gif) no-repeat left top; position: relative; top: -1px;}
div.round_box div.rb3 {background: url(images/round_box_edge_right_top.gif) no-repeat right top; position: relative; right: -2px;}
div.round_box div.rb4 {background: url(images/round_box_edge_right_bottom.gif) no-repeat right bottom; position: relative; bottom: -2px;}
div.round_box div.rb5 {background: url(images/round_box_edge_left_bottom.gif) no-repeat left bottom; position: relative; left: -2px;}
div.round_box div.rb6 {padding: 5px 5px 5px 35px; background: url(images/icon_web_link.png) no-repeat 7px 10px; position: relative; left: 1px; top: -1px;}

ul.round_box_list {list-style: none; margin: 0; padding: 0;}
ul.round_box_list li {width: 44.9%; float: left; margin: 2.5%;}


/*
 * news styles
 */
#news_feed {float: right; margin-top: 1.25em; font-size: 0.75em;}
#news_list {margin: 0; padding: 0; list-style: none;}
#news_list li {position: relative;}
#news_list h3 {font-size: 1em;}
#news_list .date {position: absolute; top: 0.5em; right: 0; font-size: 0.75em;}


/*
 * tutorial styles
 */
.tutorial_teaser {padding-left: 200px; background-repeat: no-repeat; background-position: 0% 1em;}
#tutorial_subversion {background-image: url(images/tutorial_subversion.png);}

#subversion_tutorial dl {line-height: 1.5;}
#subversion_tutorial dt, #subversion_tutorial dd {margin: 0; padding: 0;}
#subversion_tutorial dt {width: 8em; float: left; clear: left;}


/*
 * comment styles
 */
.comment {padding-left: 19px; background: url(images/icon_comment.png) no-repeat 0% 0.2em;}
.comment h4 {margin-bottom: 0.5em;}
.comment .comment_info {margin-top: 0; font-size: 0.8em;}

.comment_invalid_input {padding: 0.5em; background-color: #FFBFBF; border: 1px solid #FF7F7F;}

#comment_form .txt {width: 15em;}
#comment_form textarea {width: 40em; height: 15em;}


/*
 * server service list styles
 */
ul#server_services li {}
ul#server_services li div.round_box div.rb6 {}
ul#server_services li h3 {margin: 0;}
ul#server_services li p {margin: 0.5em 0 0 0;}
ul#server_services li#php, ul#server_services li#postfix {clear: left;}

ul#server_services li#apache div.round_box div.rb6 {background-image: url(images/service_apache.png);}
ul#server_services li#mysql div.round_box div.rb6 {background-image: url(images/service_mysql.png);}
ul#server_services li#php div.round_box div.rb6 {background-image: url(images/service_php.png); background-position: 5px 12px;}
ul#server_services li#ruby_on_rails div.round_box div.rb6 {background-image: url(images/service_ruby_on_rails.png);}
ul#server_services li#postfix div.round_box div.rb6 {background-image: url(images/service_postfix.png);}
ul#server_services li#subversion div.round_box div.rb6 {background-image: url(images/service_subversion.png); background-position: 2px 10px;}

ul#server_services li#apache div.round_box div.rb6, ul#server_services li#mysql div.round_box div.rb6 {min-height: 7em;}
ul#server_services li#php div.round_box div.rb6, ul#server_services li#ruby_on_rails div.round_box div.rb6 {min-height: 10em;}
ul#server_services li#postfix div.round_box div.rb6, ul#server_services li#subversion div.round_box div.rb6 {min-height: 10em;}


/*
 * styles for credits, team and banner page
 */
#server_config, #server_hardware, #server_website {margin: 0; padding-left: 70px; min-height: 50px; background-repeat: no-repeat;}
#server_config {background-image: url(images/server_config.png); background-position: 6px 50%; }
#server_hardware {background-image: url(images/server_hardware.png); background-position: left center;}
#server_website {background-image: url(images/server_website.png); background-position: 6px 50%;}

#banners {list-style: none; margin: 0; padding: 0;}
#banners li {margin: 1em;}
#banners img {border: 1px solid black; background-color: white;}

/*
 * styles for the impressum page

#impressum .mail_1 {float: left; width: 49.9%;}
#impressum .mail_2 {margin-left: 50%;}
 */

/* 
 * styles for block links with icons
 */
.view_tutorial, .visit_secure, .subscribe_feed  {display: block; padding-left: 18px; background-position: left center; background-repeat: no-repeat; text-decoration: underline;}
.view_tutorial {background-image: url(images/icon_tutorial.png);}
.visit_secure {background-image: url(images/icon_go_secure.png);}
.subscribe_feed {background-image: url(images/icon_feed.png); line-height: 16px;}