/*
Theme Name: Black Wrap Portfolio
Theme URI: http://www.designoutput.de/
Description: A quite simple yet awesome Theme.
Version: 1.0
Author: Andreas Becker
Author URI: http://www.designoutput.de/
Tags: black, custom header, fixed width, two columns, widgets

	This theme was designed and built by Andreas Becker,
	whose blog you will find at http://www.designoutput.de/

*/


@import url('reset.css');
@import url('960.css');
@import url('text.css');
@import url('slideshow.css');


body {
	background: #333 url(images/body_bg.jpg) no-repeat 0 0;
	color: #000;
}

#container {
	background: none;
	overflow: hidden;
}


/*
	NAVIGATION
*/

#navigation {
	padding-bottom: 15px;
}

ul#topnav{
	float:right;
	margin:0;
}

ul#topnav li{
	list-style: none;
	display: inline;
	float: right;
	width: 100px;
	height:40px;
	line-height:40px;
	font-size: .9em;
	text-align:center;
	text-transform:uppercase;
	background: #000;
	margin: 0 0 0 7px;
}

ul#topnav a{
    width: 100px;
	display:block;
	color: #fff;
	text-decoration:none;
}

ul#topnav a:hover{
	background: #900;
}



#header {
	position: relative;
	height: 293px;
	background: #000 url(images/header_showreel.jpg);
	
}

#header_wrap {
	clear: both;
	background:transparent url(images/wrap_header.png) no-repeat top center;
	overflow: hidden;
	width: 100%;
	margin-bottom: 20px;
}

.invisible_link {
	position:absolute;
	top:5px;
	right:108px;
	visibility:visible;
	z-index:50;
}

.invisible_link a {
	display:block;
	width:98px;
	height: 217px;
}


/*
	MAIN CONTENT
*/

#content_wrap {
	clear: both;
	background:transparent url(images/wrap_content.png) no-repeat top center;
	overflow: hidden;
	width: 100%;
}

#content{
	background:#999 url(images/webprintmotion.jpg) no-repeat;
	height: 390px;
	padding-top: 138px;
}

#web,
#print,
#motion {
	width: 280px;
	height: 350px;
	padding: 20px 10px;
	margin-left: 10px;
	background:#ccc;
	float: left;
}

.featurelist {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.featurelist li{
	list-style-type: none;
	margin: 0 0 20px 0;
	padding-left: 40px;
	background: url(images/listarrow.jpg) no-repeat 4px 5px;
}


/*
	LATEST WORK
*/

#latestwork {
	background: #000 url(images/latestwork.jpg) no-repeat 23px 20px;
	color: #FFF;
	padding: 0 0 20px 0;
	border-top: 11px solid #999;
}

#latestwork_wrap {
	clear: both;
	background:transparent url(images/wrap_latestwork.png) no-repeat top center;
	overflow: hidden;
	width: 100%;
}

#latestwork img {
	float: left;
	padding-right: 23px;
}

/*
	PORTFOLIO
*/

	.portfolio_main {
		border:1px solid #b5b5b5;
		margin-bottom:30px;
	}
	.portfolio_thumbs {
		border:1px solid #e1dfde;
		background-color:#f0eeed;
		padding:15px;
		margin-left:20px;
		float:right;
	}
	.portfolio_thumbs img {
		display:block;
		margin-bottom:20px;
		border:1px solid #e1dfde;
	}


#portfolio_items {
	width:590px;
	margin-right:25px;
	float:left;
	min-height:100px;
	padding-top:3px;
}

.mini_portfolio_item {
	border-bottom:1px solid #ccc;
	margin-bottom:10px;
	position:relative;
}

.mini_portfolio_item .block_inside { 
	padding:25px 30px 15px 30px; 
}

.mini_portfolio_item .block_inside h3 a {
	color:#000;
        text-decoration: none;
        font-size: 18px;
}

.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

/*
	INFOBAR
*/

#info{
	background:#999;
	height: 220px;
}



#recentposts,
#recentpg,
#rsstwitter {
	width: 280px;
	height: 180px;
	padding: 20px 10px;
	margin-left: 10px;
	background:#ccc;
	float: left;
}

#rsstwitter h2{
	background: #ccc url(images/immeraktuell.jpg) no-repeat;
	margin-bottom: 10px;
}

#rsstwitter img,
#recentpg img {
	float: left;
	margin-right: 10px;
}

#rsstwitter p,
#recentpg p {
	float: left;
	width: 210px;
}

#recentpg h2 {
	background: #ccc url(images/recentpg.jpg) no-repeat;
	margin-bottom: 10px;
}

#recentposts h2{
	background: #ccc url(images/recentposts.jpg) no-repeat;
	margin-bottom: 10px;
}


/*
	IMPRESSUM
*/

.address {
	padding-bottom: 100px;
}


/*
	FOOTER
*/
	

#footer {
	background:#000;
	height: 50px;
	overflow: hidden;
	border-top: 11px solid #999;
}

#footer p{
	line-height: 50px;
	color: #FFF;
	font-size: 10px;
	width: 450px;
	padding: 0 0 0 10px;
	margin: 0;
}

#footer_wrap {
	clear: both;
	background:transparent url(images/wrap_footer.png) no-repeat top center;
	overflow: hidden;
	width: 100%;
	margin-bottom: 30px;
}



/*
	TABLEs
*/

table { 
	background-color:#FFF;
   width: 520px;
   color: #000; 
   border: 1px solid #999999;
}

caption {  
   font-size: 95%;
   font-weight: bold;
   color: #333333; 
   text-align: left;
   padding: 1em;
   padding-left: 0; 
}

th, td {  
   padding: 0.5em 1em; 
   text-align: left;
   vertical-align: top;
}

tr.zebrastreifen { 
	background-color: #eee; 
	color: #000;
}


/*
	BLOG
*/

#blog_content_wrap {
	clear: both;
	background:transparent url(images/blog_wrap_content.png) no-repeat top center;
	overflow: hidden;
	width: 100%;
}

#blog_content{
	border-top: 11px solid #999;
	background:#999 url(images/blog_content.png) no-repeat;
	padding-top: 30px;
}

.posts {
	width: 570px;
	padding: 20px 20px;
	margin-left: 10px;
	background:#fff;
	float: left;
}

.posts h1{
	font-size: 39px;
	font-weight: normal;
	width: 480px;
	line-height: 1.3;
	letter-spacing: -2px;

}

.posts h1 a{
	color:#000;
	text-decoration: none;
}

.posts a {
	color:#900;
}

.single_post {
	position: relative;
}

.separator {
	border-top:1px solid #e3e3e3;
	margin-top:20px;
	padding-top:20px;
}

.biggap {
	border-top:1px solid #e3e3e3;
	margin-top:40px;
	padding-top:40px;
}

.comment_count {
	width: 80px;
	height: 50px;
	background: #000 url(images/comment_bubble.png) no-repeat;
	position: absolute;
	top: 10px;
	right: 10px;
}

.comment_count a{
	display: block;
	width: 60px;
	height: 50px;
	color:#FFF;
	text-decoration: none;
}

.comment_count:hover {
	background: #fff url(images/comment_bubble_red.gif) no-repeat;
}

.comment_count p{
	padding: 0 0 0 20px;
	line-height: 50px;
	color: #FFF;
	font-size: 30px;
	text-align: center;
}


/*
	SIDEBARS
*/


#categories h2{
	background: #ccc url(images/durchsuchen.jpg) no-repeat;
}

#description h2{
	background: #ccc url(images/wasistdas.jpg) no-repeat;
}

.browsecat ul li a {
	display: block;
	width: 275px;
	padding: 5px 0;
	margin: 5px 0;
	text-align: center;
	text-decoration: none;
	letter-spacing: 7px;
	text-transform: uppercase;
	background:#000;
	color:#FFF;
}

.browsecat ul li a:hover {
	background:#900;
}

#sidebar {
	width: 300px;
	padding: 0 0 20px 0;
	margin: 0 0 0 10px;
	background:#ccc;
	float: left;
}

#sidebar li {
	margin:0;
	list-style-type: none;
}

#search {
	height: 63px;
	background:#000;
	color:#FFF;
	overflow: visible;
}

#search form {
	position: relative;
	width: 300px;
	height: 53px;
	background:#fff;
	margin: 0 0 10px 10px;
	border-bottom: 10px solid #000;
}

#search input#s {
	width: 200px;
	height: 27px;
	padding: 10px;
	font-size: 24px;
	font-style:italic;
	color:#CCC;
	border: 0px;
}

#search input#search_submit {
	background: transparent url(images/loupe.png) no-repeat;
	border: none;
	width: 42px;
	height:35px;
	position: absolute;
	top: 7px;
	right: 15px;
	cursor: pointer;
}

#blog_recentposts,
#blog_recentpg,
#blog_rsstwitter,
#categories,
#description{
	width: 275px;
	padding: 20px 10px 20px 15px;
	float: left;
	font-size: 12px;
	background:transparent url(images/border_sidebar.gif) repeat-x scroll 0 100%;
}

#blog_rsstwitter h2{
	background: #ccc url(images/immeraktuell.jpg) no-repeat;
	margin-bottom: 10px;
}

#blog_recentpg h2 {
	background: #ccc url(images/recentpg.jpg) no-repeat;
	margin-bottom: 10px;
}

#blog_recentposts h2{
	background: #ccc url(images/recentposts.jpg) no-repeat;
	margin-bottom: 10px;
}

#blog_rsstwitter img,
#blog_recentpg img{
	float: left;
	margin-right: 10px;
}

#blog_rsstwitter p,
#blog_recentpg p{
	float: left;
	width: 200px;
	height: 60px;
}

/*
	COMMENTS
*/

#comments_template {
	color: #000;
}


ul.commentlist {
	margin:20px 0px 20px 0px;
	padding:0px;
}
ul.commentlist li {
	margin:0px;
	padding:30px 0px 20px 0px;
	position:relative;
	list-style:none;
	border-bottom:0px;
	background:#fff url(images/comment_header.png) no-repeat top center;
}

ul.commentlist li p {
	color:#000;
	background:#CCC;
	margin: 32px 10px 0 10px;
	padding: 10px;
}

ul.commentlist .avatar {
	position:absolute;
	top:20px;
	left:10px;
	border:1px solid #dedede;
}
ul.commentlist .commentmetadata,
ul.commentlist .comment-author{
	margin-left: 95px;
}

ul.commentlist .commentmetadata{
	font-size: 10px;
}

ul.commentlist .commentmetadata a,
ul.commentlist .reply a{
	color: #aaa;
}

ul.commentlist .comment-author .fn{
	font-size: 17px;
	font-style:normal;
	color:#FFF;
}

ul.commentlist .comment-author .says{
	display: none;
}

ul.commentlist .reply {
	background: #fff url(images/comment_footer.png);
	padding: 20px 10px 10px 0;
	text-align: right;
	font-size: 9px;	
	line-height: 1;
	color:#FFF;
}
ul.commentlist ul  {
	margin:20px 0px 20px 0px;
	padding:0px;
}
ul.commentlist ul li {
	border:0px;
	background-color:#ffffff;
	overflow:auto;
	background-image:none;
	padding-bottom:0px;
}

	/* Children */

ul.commentlist li .children {
	margin:0px;
	padding:0px 0px 0px 60px;
	position:relative;
	list-style:none;
	border-bottom:0px;
}

ul.commentlist li .children .comment {
	margin:0px;
	padding:30px 0px 0px 0px;
	position:relative;
	list-style:none;
	border-bottom:0px;
	background:#fff url(images/comment_children_header.png) repeat-x 0 10px;
}

ul.commentlist .children .reply {
	display: none;
}


	/* Respond */

ul.commentlist #respond p {
	margin: 0;
}

ul.commentlist #respond {
	position: relative;
}

ul.commentlist #respond #cancel-comment-reply {
	position: absolute;
	bottom: 13px;
	left: 110px;
}

/*
	SOCIABLE
*/

div.sociable { 
	margin: 70px 0 0 0; 
	width: 400px;}


.sociable_tagline { 
	margin: 0 0 10px 0;
	font-weight:bold;
	font-size: 12px;
}

span.sociable_tagline { 
	position: relative;
}
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1.25em;
}
.sociable span {
	display: block;
}
.sociable ul {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
.sociable ul li {
	background: none;
	display: inline !important;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 48px;
	height: 48px;
	border: 0;
	margin: 0;
	padding: 0;
}

.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}


/*
	FORMS
*/

.cform {
	margin:10px 25px 10px 0;
}

		#cformsform.cform { /*Kontaktformular */
			width: 350px;
			border-right: 1px solid #CCC;
		}
		
		#cforms2form.cform { /* Anfrage */
			width: 540px;
		}

.cform input,
.cform textarea{
	margin:0 0 8px 0;
	border:none;
	vertical-align:top;
	letter-spacing:1px;
	padding:5px 12px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #EAEAEA;
}

		#cformsform.cform input,
		#cformsform.cform textarea{
			width: 300px;
		}
		
		#cforms2form.cform input,
		#cforms2form.cform textarea{
			width: 540px;
		}

.cform input:hover,
.cform textarea:hover,
.cform select:hover	{
	background:#eee; 
}

.cform input:focus,
.cform textarea:focus,
.cform select:focus	{ 
	background:#EAEAEA; 
}

#cforms2form.cform input#cf2_field_8-1,   /* Radio Buttons Anfrage */
#cforms2form.cform input#cf2_field_8-2,
#cforms2form.cform input#cf2_field_11-1,	/* CheckBoxes Anfrage */
#cforms2form.cform input#cf2_field_11-2,
#cforms2form.cform input#cf2_field_11-3,
#cforms2form.cform input#cf2_field_11-4{
	width: 20px;
}

	

.cform fieldset	{
	margin-top:20px;
	padding:4px 0 10px 0;
	border:0px solid #adadad;
	border-left-color:#ececec;
	border-top-color:#ececec;
	background:none;
}

.cform .cf_hidden {
	display:none;
	border:none!important;
	background:none!important;
	padding:0!important;
	margin:0!important;
}

.cform legend {
	margin-left:10px;
	padding: 0 2px;
	color:#666666;
	letter-spacing:5px;
}

ol.cf-ol {
	margin:0pt!important;
	padding:10px 0pt 0pt!important;
}
ol.cf-ol li	{
	background:none!important;
	margin:0;
	padding:0;
	list-style:none!important;
	text-align:left;
	line-height:1.3em;
}

.cform label {
	width:550px;
	margin:10px 10px 0 0;
	text-align:left;
	display:block;
	background:none;
	padding:2px;
	letter-spacing: 1px;
}

label.cf-before {
	display:-moz-inline-box; /*for mozilla*/
	display:inline-block; /*for Opera & IE*/
	margin:4px 5px 0 0; 
}

label.cf-before span{
	width:200px; 
	display:block;
}

label.cf-after 	{
	letter-spacing:normal;
	display:-moz-inline-box; /*for mozilla*/
	display:inline-block; /*for Opera & IE*/
	margin:4px 2px 0 4px;
	width:505px;
	font-size: 12px;
	text-align:left;	
}

label.cf-after span {
	width:505px;
	display:block;
}

label.cf-group-after {
	display:-moz-inline-box; /*for mozilla*/
	display:inline-block; /*for Opera & IE*/
	margin:4px 6px 0 4px;
	width:500px;
	text-align:left;
	font-size: 12px;
	letter-spacing:normal;
}
label.cf-group-after span {
	width:500px;
	display:block;
}

#li-2-14 {
	font-size: 10px;
}

#li--6 {
	width: 340px;
	font-size: 10px;
}

/*                                                    */
/*   radio button title                               */
/*                                                    */
ol.cf-ol li.cf-box-title {
	letter-spacing: 1px;
	margin:10px 0 0 0!important;
}


/*                                                    */
/*   check boxes                                      */
/*                                                    */

input.cf-box-a,
input.cf-box-b 	{ 
	margin:3px 0 0 0; 
	width:16px; 
	height:22px;
	border:none!important;
	background:none!important;
}


/*                                                    */
/* check box groups                                   */
/*                                                    */

ol.cf-ol li.cf-box-group {
	padding: 0 0 12px 0; 
} 

span.reqtxt,
span.emailreqtxt {
	display:block; /*for mozilla*/
	font-size:9px;
	vertical-align:top;
	color:#888888;
	text-align:right;
	margin:0;
	height:13px;
	line-height:13px;
}

		#cformsform span.reqtxt,
		#cformsform span.emailreqtxt {
			width:324px;
		}
		
		#cforms2form span.reqtxt,
		#cforms2form span.emailreqtxt {
			width:564px;
		}

.cform textarea.fldemail,
.cform textarea.fldrequired,
.cform input.fldemail,
.cform input.fldrequired {
	margin:0;
}

p.cf-sb {
	padding: 0!important;
	margin: 0;
	text-align:right;
}
.cform input.backbutton,
.cform input.resetbutton,
.cform input.sendbutton	{
	background: #000;
	border:0px;
	color:#FFF;
	width: 130px!important;
	text-transform:uppercase;
	font-size:11px;
	padding: 5px;
	margin: 20px 26px 0 0;
	cursor:pointer;
}
.cform input.sendbutton:hover	{
	background: #900;
}
.cform input.resetbutton {
}
.cform input.backbutton {
}

	/* ---- Error Styling ---- */
	
	ol.cf-ol li.cf_li_err {
		background:#FFDFDF!important;
		border-color:#DF7D7D;
		border-style:solid;
		border-width:0pt;
		padding:5px 10px!important;
		margin:5px 0!important;
	}
	
	ol.cf-ol li ul.cf_li_text_err {
		padding:0;
		margin:0;
		color:#900;
		display:inline-block;
	}
	
	ol.cf-ol ul.cf_li_text_err li {
		list-style:none!important;
		font-weight:bold;
		font-size: 10px;
		text-indent:0;
		margin:0 0 2px!important;
	}
	ol.cf-ol ul.cf_li_text_err li:before {
		content:'';
	}


#cforms_captcha6,
#cforms_captcha5,
#cforms_captcha4,
#cforms_captcha3,
#cforms_captcha2,
#cforms_captcha {
	width:130px!important;
	vertical-align:top;
}

img.captcha	{
	vertical-align:top;
	margin:0 0 8px 10px!important;
	padding:0!important;
	border:none!important;
	float:none!important;
}

img.captcha-reset {
	vertical-align:top;
	background:	url(images/newcaptcha.jpg) no-repeat;
	margin:0 0 10px 3px;
	width:27px;
	height:27px;
	border:none!important;
}


div.cf_info {
	color:#333;
	display:none;
	padding:10px 15px!important;
	width:350px;
	line-height:1.3em;
}
div.cf_info ol {
	margin:0;
	padding:5px 15px 0 30px;
}
div.cf_info ol li {
	padding:1px 0;
	margin:2px 0;
}
div.cf_info a	{
	color:#7C292C!important;
	text-decoration:underline!important;
}
div.success {
	width: 310px;
	background-color: #D7F8B6;
	display:block;
}

div.success2 {
	width: 550px;
	background-color: #D7F8B6;
	display:block;
}

div.failure {
	display:block;
	background:#FFDFDF url(li-err-bg.png) repeat!important;
}
div.waiting {
	background:#F9F9F9;
	color:#AAAAAA;
	display:block;
}

img.imgcalendar {
	border:none!important;
}


.linklove {
	margin: 30px 0;
	padding:0!important;
}
.linklove a,
.linklove a:visited {
	font-size: 0.8em;
	color: #EEE!important;
}



/*
	CLASSES
*/



.project {
	font-size:9px;
}

a.button_dark {
	background:#000;
	margin: 5px 5px 5px 0;
	padding: 5px;
	color: #fff;
	text-decoration: none;
	font-size: 11px;
	text-transform: uppercase;
}

a.button_light {
	background:#fff;
	margin: 5px 5px 5px 0;
	padding: 5px;
	color: #000;
	text-decoration: none;
	font-size: 11px;
	text-transform: uppercase;
}

a.button_dark:hover,
a.button_light:hover{
	background: #900;
}



.formbutton {
	background: #000;
	border:0px;
	color:#FFF;
	text-transform:uppercase;
	font-size:11px;
	padding: 5px;
	cursor:pointer;
}

.formbutton:hover {
	background: #900;
}

.contacts {
	float: left;
	width: 194px;
	margin: 19px 0 0 0;
}

.contactform {
	width: 376px;
	float: left;
}

.skype {
}

.gtalk {
	margin: 50px 0 50px 0;
}

.text_right {
	text-align: right;
}

.text_center {
	text-align: center;
}

.left {
	float: left;
}

.replace {
	text-indent: -9999px;
	margin: 0;
	padding: 0;
}

.highlight {
	color: #526488;
	font-weight: bold;
}

.bold {
	font-weight: bold;
}

.first {
	margin-top: 0;
	padding-top: 10px;
	border-top: 1px solid #fff;
}

.last {
	padding-bottom: 10px;
}

.small {
	font-size: 10px;
}

.info {
	background:#ff9191 url(images/info.jpg) no-repeat top left;
	padding: 20px 20px 20px 80px;
	border: 1px solid #CCC;
	color: #FFF;
}

.uppercase {
	text-transform: uppercase;
}

.red {
	color:#900;
}

.imgleft {
	float: left;
	margin: 0 20px 20px 0;
}