@charset "utf-8";
/* CSS Document */

/*
Theme Name: lemongrass - huellmann.com
Theme URI: none
Description: Der Standard Theme für www.huellmann.com.
Version: 1.0
Author: Christian Huellmann
Author URI: http://www.huellmann.com/
Tags: green, black, grey, white, dig. illustrations, custom template, fixed width, two columns
*/

@import url( "css/reset.css" );
@import url( "css/global.css" );
@import url( "css/layout.css" );


/************************************************************************
 *** COLORS (lemongrass-green-Style) ***
 ************************************************************************
 *
 ** CONTENT **
 *
 * background-color: #739b04;
 * Headlines: #ffffff
 * Text: #1F1F1F;
 * Links, small, metadescription: #465912
 * hr (parting line): #506514
 * hover's: #d7ff85;
 *
 ** FOOTER **
 *
 * color: #465912
 * hover color: #33400d;
 */



body {
	font-family: "Lucida Sans Unicode", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
	
	line-height: 1.8em;
	font-style: normal;
	
	color: #1F1F1F;

	background-color: #739b04;
	background-image: url( images/lemongrass/lemongrass-dark-green-bg.jpg );
	background-repeat: repeat;
}

#site-wrapper {
	background-image: url( images/lemongrass/lemongrass-light-bg.jpg);
	background-repeat: no-repeat;
}

#grass-bg {
	background: url( images/lemongrass/grass.png) no-repeat center;
}

/*#extra-div-01 {
	width: 100%;
	height: 12px;
	
	position: absolute;
	top: 0;
	left: 0;
	
	background-image: url( images/head-stripe.png);
	background-repeat: repeat-x;
}*/


/************************************************************************
 *** Header ***
 ************************************************************************/

h1#logo a span,
p#slogan a span {
	display: none;
}

h1#logo a {
	width: 242px;
	height: 135px;
	
	display: block;
	
	background-image: url( images/logo-huellmann.png );
	background-repeat: no-repeat;
	background-position: left;

	cursor: pointer;
}
 
p#slogan a {
	width: 242px;
	height: 22px;
	
	display: block;
	
	background-image: url( images/lemongrass/logo-slogan.png );
	background-repeat: no-repeat;
	background-position: left;

	cursor: pointer;
}



/*
 *** Header: Main menu ***
 */
 
#header #header-menu li a span {
	display: none;
}

#header #header-menu li a {
	cursor: pointer;
}

#header #header-menu li.about_me a {
	background-image: url(images/lemongrass/menu-button-profil.png);
	background-repeat: no-repeat;
	background-position: left;
}

#header #header-menu li.portfolio a {
	background-image: url(images/lemongrass/menu-button-portfolio.png);
	background-repeat: no-repeat;
	background-position: left;
}

#header #header-menu li.contact a {
	background-image: url(images/lemongrass/menu-button-kontakt.png);
	background-repeat: no-repeat;
	background-position: left;
}


#header #header-menu li.about_me a:hover {
	background-position: right;
}

#header #header-menu li.portfolio a:hover {
	background-position: right;
}

#header #header-menu li.contact a:hover {
	background-position: right;
}


#header #header-menu li.about_me.current_page_item a,
#header #header-menu li.about_me.current_page_parent a {
	background-position: right;
}

#header #header-menu li.portfolio.current_page_item a,
#header #header-menu li.portfolio.current_page_parent a {
	background-position: right;
}

#header #header-menu li.contact.current_page_item a,
#header #header-menu li.contact.current_page_parent a {
	background-position: right;
}



/************************************************************************
 *** Content styles ***
 ************************************************************************/

h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
	font-weight: 100;

	color: #ffffff !important;
	text-decoration: none !important;

	text-transform: lowercase;
	line-height: 1.0em;
}

h2 {
	font-size: 3.0em;
	margin: 1.0em 0 0.4em;
}

h3 {
	font-size: 2.0em;
	margin: 1.4em 0 0.6em;
}


h4 {
	font-size: 1.6em;
	margin: 1.4em 0 0.4em;
}

h6 {
	color: #465912 !important;
	font-family: "Lucida Sans Unicode", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.6em;
}

abbr {
	border-bottom-style: dotted;
	border-bottom-color: #1d1d1d;
	border-bottom-width: 1px;
}


blockquote {
	width: 75%;
	min-height: 27px;
	padding: 0 0 0 42px;	/* 32px width */
	margin: 1.0em 0 1.0em 8px;;
	color: #465912;
	background-image: url( images/lemongrass/pullquotes.png );
	background-repeat: no-repeat;
	background-position: 4px 0px;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	clear: both;
}

blockquote p {
	font-size: 1.4em;
	margin: 0 0 1.0em 0;

}

.title {
	margin-top: 0 !important;
}








p {
	font-size: 1.2em;
	
	margin: 0 0 1.0em;
	display: block;
}



small,
.postmetadata {
	color: #465912;
	font-size: 1.0em;
}


p small {
	font-size: 10px;
}


.post small.meta {
	display: block;
	
	margin-top: -0.8em;
	margin-bottom: 1.2em;
}



a {
	color: #465912;
	text-decoration: underline;
}

a:hover {
	color: #d7ff85;
	text-decoration: underline;
}



/*
 * Post attachments
 */
 
.attachments a {
	color: #33400d;
	
	cursor: pointer;
}

.attachments a:hover {
	color: #d7ff85;
}

.attachments small a {
	color: #465912;
}



.attachments {
	width: 384px;
	
	margin: 2.8em 0 0 0;	/* same as h3 */
	padding: 8px 8px 0 8px;
	
	overflow: hidden;
	
	background-image: url(images/contentbox-400-bg.png);
	background-repeat: no-repeat;
	background-position: top left;
}

.attachments-cap-bottom {
	width: 400px;
	height: 2px;
	
	background-image: url(images/contentbox-400-bg.png);
	background-repeat: no-repeat;
	background-position: bottom left;
}

#content .attachments ul {
	display: block;
	
	list-style-type: none;
	list-style-position: inside;
	
	margin: 0;
	padding: 0;
}

#content .attachments li {
	display: block;
	
	margin: 0 0 6px 0;
}


.attachments li p {
	float: left;
	
	width: 320px;
	
	margin: 0;
	padding: 6px 0 0 0;
}



/*
 * Parting lines
 */
 
.parting-line,
hr {
	width: 100%;
	height: 0;
	
	display: block;
	
	border-width: 1px 0 0 0;
	border-style: solid none;
	border-color: #506514;
	
	clear: both;
}

#header .parting-line {
	position: absolute;
	bottom: 0;
	
	-moz-opacity: 0.55;
	-khtml-opacity: 0.55;
	opacity: 0.55;
}

#footer-parting-lines {
	width: 100%;
	height: 10.2em;
	
	position: absolute;
	top: 0;
	
	border-width: 1px 0;
	border-style: solid none;
	border-color: #506514;

	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;

	display: block;
}



.post p.thumbnail {
	margin-bottom: 0.6em;	/* is in PS 0.6em */
}



.post p.small {
	background-image: url( images/lemongrass/frame-small.png );
	background-repeat: no-repeat;
}

.post p.middle {
	background-image: url( images/lemongrass/frame-middle.png );
	background-repeat: no-repeat;
}
.post p.large-bubble {
	background-image: url( images/lemongrass/frame-large-bubble.png );
	background-repeat: no-repeat;
}

.post p.xlarge-bubble {
	background-image: url( images/lemongrass/frame-xlarge-bubble.png );
	background-repeat: no-repeat;
}



/************************************************************************
 *** Lists ***
 ************************************************************************/

#content ul {
	list-style-type: circle;
	list-style-position: outside;
	
	margin: 0 0 1.0em 1.8em;
	display: block;
}

#content ul li p {
	font-size: 1.0em;
	margin: 0 0 0.2em;
}

#content ul li {
	font-size: 1.2em;
	margin: 0 0 0.2em;
}

#content li ul li{
	font-size: 1.0em;
}

#content .movie-list ul {
	list-style-type: none;
	
	margin-left: 0;
}

#content .column-addition-right ul li {
	color: #465912;
}

#content .column-addition-right ul li a {
	color: #465912;
	text-decoration: none !important;
}

#content .column-addition-right ul li a:hover {
	color: #d7ff85;
	text-decoration: underline !important;
}


#footer a {
	text-decoration: none !important;
}

#footer a:hover {
	color: #465912;
	text-decoration: underline !important;
}



/************************************************************************
 *** Buttons ***
 ************************************************************************/

button {
	display: block;
	background-color: transparent;
	
	font-family: "Lucida Sans Unicode", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;

  cursor:pointer;
}

a.button,
button span,
.navigation p a {
	height: 29px;
	
	display: block;

	float: left;
	
	color: #ffffff;
	
	text-decoration: none !important;
	
	background-image: url( images/button_a.png );
	background-position: top right;
	background-repeat: no-repeat;
	
	background-color: transparent;
	
	margin: 0.4em 0 0 -2px;	/* -3px because of the shadows */
	
	padding: 0 8px 0 0;

  cursor:pointer;
}

#header-menu .button {
	float: right;
}

a.button span,
button span em,
.navigation p a span {
	display: block;
	
	font-size: 12px;
	line-height: 14px;
	font-style: normal;
	
	color: #ffffff;
	
	background-image: url( images/button_span.png );

	background-color: transparent;
	
	padding: 7px 4px 8px 11px;	/* line-height + padding-top + padding-bottom = 29px */
	margin: 0;	/* 8px right: because of the background image "button_a.png" */

  cursor:pointer;
}

a.button:hover,
button:hover span,
.navigation p a:hover {
	background-position: bottom right;
}

a.button:hover span,
button:hover span em,
.navigation p a:hover span {
		color: #eeeeee;
    text-decoration: none !important;
		
		background-position: bottom left;
}



a.button.disabled,
button.disabled span,
.navigation p a.disabled {
	background-image: url( images/button_disabled_a.png );
}

a.button.disabled span,
button.disabled span em,
.navigation p a.disabled span {
	color: #dddddd;
	background-image: url( images/button_disabled_span.png );
}

a.button.disabled:hover,
button.disabled:hover span,
.navigation p a.disabled:hover {
	background-position: top right;
}

a.button.disabled:hover span,
button.disabled:hover span em,
.navigation p a.disabled:hover span {
		color: #dddddd;
		background-position: top left;
}



.navigation {
	width: 100%;
	clear: both;
	overflow: hidden;
}

.navigation p {
	width: auto;
	float: left;
}



.special-play-game span,
.special-download span {
	display: none;
}

.special-play-game,
.special-download {
	width: 50px;
	height: 50px;
	
	display: block;

	background-image: url( images/button-play-game.png );
	background-repeat: no-repeat;
	background-position: top left;
	
	float: left;
	
	margin: 0 0.5em 0 -3px;	/* because of 3px shadow arround the button */
	padding: 0;
}

.special-download {
	background-image: url( images/button-download.png );
}

a:hover.special-play-game,
a:hover.special-download {
	background-position: bottom left;
}



/*
 *** Special button ***
 */

#special {
	width: 64px;
	height: 64px;
	
	display: block;
	
	position: absolute;
	
	bottom: 30px;
	right: 8px;
}

#special a {
	width: 64px;
	height: 64px;
	
	display: block;
	
	margin: 0;
	
	background-image: url( images/special-button.png );
	background-repeat: no-repeat;
	background-position: top;
}

#special a:hover,
#special a:hover span {
	background-position: bottom;
}

#special a span {
	width: 64px;
	height: 64px;
	
	display: block;
	
	text-indent: -999em;
	
	background-repeat: no-repeat;
	background-position: top;
	
	cursor: pointer;
}


#special a span#write-message,
#special a span#mail {
	background-image: url( images/special-mail.png );
}

#special a span#subscrite-to-rss {
	background-image: url( images/special-rss.png );
}



/*
 *** Toggle buttons ***
 */

.toggler {
	width: 23px;
	height: 23px;
	display: block;
	float: right;
}

a.toggle-button span {
	display: none;
}

a.toggle-button {
	width: 23px;
	height: 23px;
	
	background-image: url( images/toggle-button-close.png );
	background-repeat: no-repeat;
	background-position: top;
	
	cursor: pointer;
	display: block;
}

a.toggle-button:hover {
	width: 23px;
	height: 23px;
	
	background-position: bottom;
	
	cursor: pointer;
	display: block;
}

a.toggle-button.closed {
	background-image: url( images/toggle-button-open.png );
}



/************************************************************************
 *** Messages ***
 ************************************************************************/

.msg { 
	font-size: 10px;
	text-align: left;

	border: 1px solid #657f19;  
	
	padding: 0.8em 1.6em 0 1.6em;
	margin: 1em 0 2em 0;
	
	opacity: 0.8;
}

.msg p { 
	margin-bottom: 0.8em;
}

.msg.error {
	background-color: #FFCCCC;
	border-color: #CC3300;
}



/************************************************************************
 *** Forms ***
 ************************************************************************/

fieldset {
	width: 100%;
	position: relative;
}

fieldset legend {
	display: none;
}

input,
textarea,
label {
	font-family: "Lucida Sans Unicode", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.2em;	
	
	padding: 0.2em 0.3em;	/* line-height + padding-top + padding-bottom = ? */
	
	display: inline-block;
	vertical-align: top;
}

.fieldbox {
	display: block;

	clear: both;
	overflow: hidden;
		
	padding: 16px;
}

.fieldbox label  {
	width: 6em;
	
	color: #465912;

	text-align: right;
}

input,
textarea {
	margin: 0 0 0 0.8em;
}

.fieldbox .field {
	background-color: #d7ff85;

	color: #383838;

	border: 1px solid #657f19;  		
}

.fieldbox .field-selected {
	background-color: #657f19;

	color: #d7ff85;

	border: 1px solid #465912;  	
}

.fieldbox p.field_desc { 
	width: 9.0em;

	color: #465912;
	font-size: 10px;
	text-align: center;

	position: absolute;  
	top: 16px;  
	right: 18px;  

	border: 1px dotted #657f19;  
	visibility: hidden; 
	 
	padding: 0.4em 0.8em;
}



/*
 *** Contact ***
 */
 
.fieldbox.first-name,
.fieldbox.name,
.fieldbox.url {
	padding-bottom: 0;
}

.fieldbox #first-name,
.fieldbox #name {
	width: 10.0em;
}

.fieldbox #email,
.fieldbox #url {
	width: 15.0em;
}

.fieldbox #subject,
.fieldbox #message {
	width: 26.0em;
}

.fieldbox #message {
	height: 92px;
	overflow-x: hidden;
	overflow-y: auto;
}

.fieldbox.first-name,
.fieldbox.subject {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #657f19;
}

.fieldbox.message,
.fieldbox.subject {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #657f19;
}



/************************************************************************
 *** Startseite ***
 ************************************************************************/

#startsite .column-addition-right .post {
	width: 268px;
	height: 157px;
	background-image: url( images/startsite-hello.png );
	background-repeat: no-repeat;
	
	margin: 14px 0 6px 0;
}

#startsite .column-addition-right .post * {
	display: none;
}



/************************************************************************
 *** Vita ***
 ************************************************************************/

#vita h6 {
	width: 100px;
	display: block;
	
	margin-top: 0.2em;
	
	color: #465912  !important;
	font-family: "Lucida Sans Unicode", "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.6em;
	text-transform: none;
	
	position: absolute;
	
	clear: both;
}

#vita h3 {
	width: 400px;
	display: block;
}

#vita .entry {
width: 446px;
}

#vita .entry p,
#vita .entry blockquote {
	width: 326px;  /* 446px - h6 width */ 
	display: block;
	
	position: relative;
	left: 120px;
}

#vita .entry blockquote {
	display: block;
}

#vita .entry blockquote p {
	position: relative;
	left: 0;
	width: 80%;
}


.element {
	position: relative;
	clear: both;
	overflow: hidden;
}


#vita .entry p.toggler {
	width: 23px;
	height: 23px;
	display: block;

	position: absolute;
	left: 423px;
	
	margin: -29px 0 0.6em 0;
}

#vita .entry hr {
	margin: 0 0 1.0em 0;
}



/************************************************************************
 *** Project ***
 ************************************************************************/





/************************************************************************
 *** Gallery ***
 ************************************************************************/

.gallery {
	width: auto;

	display: block;

	overflow: hidden;
}

#content .gallery ul {
	list-style-type: none;
	list-style-position: inside;

	border-width: 1px 0;
	border-style: solid none;
	border-color: #506514;

	display: block;
	float: left;
	
	margin: 0;
	padding: 0 8px 8px 0;
}

#content .gallery ul li {
	display: block;
	
	float: left;
	position: relative;
	margin: 8px 0 0 8px;
}


.gallery ul li a {
	display: block;
	
	border: 1px solid #506514;
}

.gallery ul li a:hover {
	border-color: #d7ff85;
}

.gallery-description small span {
	font-weight: bold;
}





.post p a span.inner-frame {
	background-color: transparent;	/* Fix for Firefox to show cursor "pointer" */
	cursor: pointer;	/* Fix for IE >= 7 to show cursor "pointer" */
}

/************************************************************************
 *** Project ***
 ************************************************************************/
 
.project {
}



/************************************************************************
 *** Movies ***
 ************************************************************************/

.hreview {
	display: block;
	position: relative;
}

.hreview p {
	width: 300px;	/* mind. 400px - stars width */
	display: block;
}

#movies .hreview a.url {
	color: #1f1f1f;
	text-decoration: none;
}

#movies .hreview a.url:hover {
	color: #d7ff85;
	text-decoration: underline;
}

.hreview .year {
	color: #465912;
	font-size: 0.83em;
}

.hreview .rating_stars {
	width: 70px;
	height: 14px;
	
	display: block;
	
	position: absolute;
	top: 2px;
	right: 0;
	
	clear: both;

}

.hreview .rating_stars img {
	width: 14px;
	height: 14px;
	
	display: block;
	
	float: left;
}

.hreview .rating,
.hreview .dtreviewed,
.hreview .version {
	display: none;
}




/************************************************************************
 *** Footer ***
 ************************************************************************/

#footer {
	color: #465912;
}

#footer p,
#footer a {
	color: #465912;
}

#footer p {
	font-size: 1.0em;
	line-height: 1.4em;
}

#footer li {
	font-size: 1.0em;
	line-height: 1.2em;
}

#footer a:hover {
	color: #33400d !important;
	text-decoration: underline !important;
}



/*
 * Web standards
 */

#web-standards li#valid-xhtml a span,
#web-standards li#valid-css a span {
	margin-left: 0;
	padding-right: 18px;
	
	background-image: url( images/footer-check.png );
	background-position: top right;
	background-repeat: no-repeat;
}

#web-standards a:hover span {
	background-position: bottom right !important;
}

#web-standards li#valid-xhtml,
#web-standards li#valid-css {
	padding-right: 0.3em;
}



/*
 * Extendet Menu
 */

#extended-menu li {
	font-size: 1.5em;
	line-height: 1.0em;
}

#footer #extended-menu li,
#footer #web-standards li {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #5c7417;
}

#footer #extended-menu li.page-item-3,
#footer #web-standards li#i-use-firefox {
	border-right-width: 0;
	border-right-style: none;
}

#footer #extended-menu {
	text-transform: lowercase;
}

#extended-menu li a span {
	display: none;
}



#extended-menu li a {
	height: 19px;
	display: block;
	
	background-repeat: no-repeat;
	background-position: left top;
}

#extended-menu li a:hover {
	background-position: bottom right !important;
}

#extended-menu .about_me a {
	width: 37px;
	
	background-image: url(images/footer-menu-profil.png);
}

#extended-menu .portfolio a {
	width: 61px;
	
	background-image: url(images/footer-menu-portfolio.png);
}

#extended-menu .cat-item-4 a {
	width: 62px;
	
	background-image: url(images/footer-menu-news.png);
}

#extended-menu .cat-item-12 a {
	width: 33px;
	
	background-image: url(images/footer-menu-blog.png);
}

#extended-menu .contact a {
	width: 53px;
	
	background-image: url(images/footer-menu-contact.png);
}

#extended-menu .impress a {
	width: 75px;
	
	background-image: url(images/footer-menu-impress.png);
}



#footer #powered-by #footer-wordpress a span {
	display: none;
}

#footer #powered-by #footer-wordpress a {
	width: 81px;
	height: 22px;
	
	display: block;
	
	background-image: url( images/footer-wordpress.png );
	background-repeat: no-repeat;
	background-position: top left;
}

#footer #powered-by #footer-wordpress a:hover {
	background-position: bottom left;
}

#footer #powered-by #footer-datux a span {
	display: none;
}

#footer #powered-by #footer-datux a {
	width: 41px;
	height: 22px;
	
	display: block;
	
	background-image: url( images/footer-datux.png );
	background-repeat: no-repeat;
	background-position: top left;
}

#footer #powered-by #footer-datux a:hover {
	background-position: bottom left;
}