/**
 * screen.css
 *
 * André König (idira.de)
 * Copyright (c) 2010 idira / Germany 
 * http://www.idira.de
 * All rights reserved
 *
 */

* {
	border:0;
	margin:0;
	padding:0
}

* html .clearfix {
    height:1%
}

html[xmlns] .clearfix {
    display:block
}

html * {
	font-size:100.01%
}

body {
    background:#191919;
	font-family:tahoma, arial, verdana, helvetica, sans-serif;
	color:#fff;
	min-height:1100px;
	position:relative
}

p {
	line-height:170%
}

/* Classes */

.clearfix {
    display:inline-block
}

.clearfix:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden
}

.viewport {
	margin:0 auto;
	width:960px
}

#loading {
	background:url(images/loading-indicator-black.gif) center center no-repeat;
	display:none;
	margin:0 auto;
	height:441px;
	width:672px
}

/* Layout */

#wrapper {
	background:url(images/bg-wrapper.jpg) left 60px no-repeat;
	padding-top:110px
}

#header {
	background:#242424 url(images/bg-header.png) bottom left repeat-x;
    height:110px;
	left:0;
	position:absolute;
	top:0;
	width:100%
}

#header .viewport {
	height:110px;
	position:relative
}

#header h1 a {
	background:url(images/logo.png) left top no-repeat;
	display:block;
	height:96px;
	left:-40px;
	outline:none;
	text-indent:-99999px;
	position:absolute;
	top:14px;
	width:326px
}

.debug #header h1 a {
	background:url(images/logo-debug.png) left top no-repeat;
}

#header h2 {
	display:none
}

#header #pages {
	bottom:15px;
	list-style-type:none;
	right:0;
	position:absolute
}

#header #pages li {
	float:left;
	margin-left:20px
}

#header #pages li a {
	color:#9d9d9d;
	font-family:"trebuchet ms", arial, sans-serif;
	font-size:90%;
	text-shadow:1px 1px 1px #000;
	text-decoration:none
}

.helenium #header #pages li.helenium a,
.phlox #header #pages li.phlox a,
.garden #header #pages li.garden a,
.contact #header #pages li.contact a,
.links #header #pages li.links a {
	color:#fff;
	font-weight:bold
}

#content {
	top:55px;
    position:relative
}

#content #menue {
	background:url(images/bg-menue-delimiter.jpg) right top no-repeat;
	font-family:'trebuchet ms', arial, sans-serif;
	text-shadow:1px 1px 1px #000;
	width:215px
}

#content #menue .selected > a {
	color:#fff;
}

#content #menue a {
	color:#9d9d9d;
    text-decoration:none
}

#content #menue a:hover {
    color:#fff;
}

#content #menue h2 {
	display:none
}

#content #menue ol {
	background:url(images/bg-menue-delimiter.jpg) right top no-repeat;
	font-weight:bold;
	margin:0;
	list-style-type:none;
	width:30px
}

#content #menue ol  li {
	margin:1px 0;
}

#content #menue ol li ol.plants {
	background:none;
	font-size:90%;
	font-weight:normal;
	left:50px;
	padding-bottom:40px;
	position:absolute;
	top:0;
	width:165px
}

#content #menue ol li ol.plants li {
	margin:5px 0
}

#content #plant {
	background:#121212;
	border:1px solid #1c1c1c;
	border-radius: 5px;
	box-shadow: 0 0 10px #141414;
	right:0;
    position:absolute;
	top:-25px;
	width:715px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-box-shadow:0 0 10px #141414;
	-moz-box-shadow:0 0 10px #141414	
}

#content #plant h2 {
	color:#fff;
	font-size:140%;
	line-height:25px;
	margin:20px 20px 0;
	text-shadow:2px 2px 2px #000
}

#content #plant h2 .synonym {
	color:#9f9f9f;
	display:block;
	font-size:65%;
	font-weight:normal
}

#content #plant h2 .derivation {
	font-style:italic;
	font-weight:normal
}

#content #plant .description {
	border-bottom:1px solid #1c1c1c;
	color:#9d9d9d;
	font-size:70%;
	line-height:20px;
	margin-bottom:35px;
	padding:20px
}

#content #plant .description ul,
#content #plant .description ol {
	margin:10px 15px 10px
}

#content #plant .description a {
	color:#fff
}

#content #plant .images {
	margin:20px 0
}

#content #plant .images .message {
	color:#9d9d9d;
	font-size:85%;
	font-style:italic;
	margin:10px 10px 35px;
	text-align:center
}

#content #plant .images .thumbnails {
	margin-top:20px	
}

#content #plant .images .thumbnails ul {
	font-size:75%;
	list-style-type:none;
	text-align:center;
}

#content #plant .images .thumbnails ul li {
	display:inline
}

#content #plant .images .thumbnails ul li img {
	border:2px solid transparent;
	cursor:pointer;
	margin-right:10px
}

#content #plant .images .thumbnails ul li img.selected {
	border-color:#b7b7b7
}

#content #plant .images .highres {
	margin-top:20px
}

#content #plant .highres img {
	display:block;
	margin:0 auto;
	padding:5px
}

/* Home */

.home #wrapper {
	background-position:left top;
	padding-top:80px
}

.home h1 {
	background:url("images/bg-home-title.png") left top no-repeat;
	font-size:160%;
	font-weight:normal;
	height:70px;
	line-height:25px;
	margin:0;
	padding:30px 0 0 145px;
	text-shadow:1px 1px 1px #000
}

.debug.home h1 {
	background:url("images/bg-home-title-debug.png") left top no-repeat;
}

.home h1 span {
	color:#a6a6a6;
	display:block;
	font-size:65%	
}

.home #content {
	top:0
}

.home #eyecatcher {
	background:#121212;
	border:1px solid #1c1c1c;
	border-radius: 5px;
	box-shadow: 0 0 10px #141414;
	padding:30px;
	padding-bottom:100px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-box-shadow:0 0 10px #141414;
	-moz-box-shadow:0 0 10px #141414
}

.home #eyecatcher h2 {
	margin-bottom:20px
}

.home #eyecatcher img.phlox {
	bottom:0;
	position:absolute;
	right:-30px;
	z-index:1
}

.home #eyecatcher img.signature {
	display:block;
	margin:30px 0 0 20px
}

.home #eyecatcher p {
	margin-bottom:20px;
	width:630px
}

.home #eyecatcher ul {
	background:#171717;
	border:solid #1c1c1c;
	border-width:1px 0;
	bottom:30px;
	left:0;
	line-height:40px;
	list-style-type:none;
	position:absolute;
	width:100%
}

.home #eyecatcher ul li:first-child {
	color:#6f6f6f;
	font-size:90%;
	margin:0 50px
}

.home #eyecatcher ul li {
	float:left;
	font-family:'trebuchet ms', arial, sans-serif;
	text-shadow:1px 1px 1px #000;
	margin-right:50px
}

.home #eyecatcher ul li a {
	color:#8e8e8e;
	font-weight:bold;
    text-decoration:none
}

.home #eyecatcher ul li a:hover {
	color:#fff
}

.home #plants {
	border-top:1px solid #1f1d1d;
	float:left;
	font-size:80%;
	line-height:190%;
	margin-top:70px;
	padding:30px 10px 20px
}

.home #plants li {
	display:inline
}

.home #plants li h2 {
	color:#6f6f6f;
	display:inline;
	font-weight:bold;
	margin-right:5px;
	text-shadow:1px 1px 1px #000
}

.home #plants li a {
	color:#4f4f4f;
	margin-right:5px
}

/* Garden */

.garden #content {
	top:40px
}

.garden #highres-image {
	height:505px;
	margin:0 auto;
	width:672px
}

.garden #highres-image img {
	-moz-box-shadow:0 0 10px 1px #000
}

.garden #loading {
	background:url(images/loading-indicator.gif) center center no-repeat;;
	margin:0 auto 60px
}

.garden #thumbs {
	display:none
}


.garden .nav-controls {
	margin:5px auto 70px;
	text-align:center
}

.garden .nav-controls a {
	background:#121212;
	border:1px solid #423c3c;
	color:#8e8e8e;
	font-size:70%;
	margin-right:10px;
	outline:none;
	padding:10px;
	text-decoration:none
}

.garden .advance-link {
	text-decoration:none;
}

.garden .pagelink {
	background:url(images/gallerific-arrows.png) left center no-repeat;
	display:block;
	float:left;
	height:80px;
	outline:none;
	width:16px
}

.garden #next-page.pagelink {
	background-position:right center
}

.garden #previous-page.pagelink {
	background-position:left center
}

.garden ul.thumbs {
    list-style-type:none;
	margin:0 auto
}

.garden .thumbs li {
	border:2px solid transparent;
    float:left;
	margin:0 4px;
	position:relative
}

.garden .thumbs li.selected {
	border-color:#b7b7b7
}

.garden .thumbs li a {
	display:block;
	height:80px;
	outline:none;
	text-decoration:none;
	width:80px
}

.garden .thumbs li .title {
	background:#000;
	bottom:0;
	color:#fff;
	cursor:pointer;
	font-size:65%;
	height:15px;
	line-height:15px;
	opacity:.7;
	position:absolute;
	text-align:center;
	width:100%;
}

/* Contact & Contact */

.contact p,
.links p {
	max-width:630px
}

.contact #eyecatcher,
.links #eyecatcher {
	background:#121212;
	border:1px solid #1c1c1c;
	border-radius: 5px;
	box-shadow: 0 0 10px #141414;
	padding:30px;
	position:relative;
	top:40px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-box-shadow:0 0 10px #141414;
	-moz-box-shadow:0 0 10px #141414	
}

.contact #eyecatcher h2,
.links #eyecatcher h2 {
	font-size:150%;
	font-weight:normal;
	margin-bottom:40px;
	text-shadow:1px 1px 1px #000
}

.contact #eyecatcher .email {
	margin:20px 0 50px
}

.contact #eyecatcher .phlox,
.links #eyecatcher .phlox {
	position:absolute;
	right:-30px;
	top:-70px
}

.contact #eyecatcher .copyright {
	font-size:70%;
	position:absolute;
	bottom:25px
}

.contact .email a {
	color:#fff;
	display:none
}

.contact .realisation {
	color:#6f6f6f;
	font-size:70%;
	margin-top:50px;
	padding-right:20px;
	text-align:right;
	max-width:100%
}

.contact .realisation a {
	color:#6f6f6f;
}

.links #eyecatcher ul {
	margin:20px 40px
}

.links #eyecatcher ul li {
	line-height:30px
}

.links #eyecatcher ul li a {
    color:#a5a5a5
}

.links .note {
	width:600px
}