@import url(reset.css);

/* ----------------------------------------------------- Page layout */
/*CSS Document*/
/*Created for Syzygy AG by Simon Jockers (2009/03/02) */


body {
	font-size: 75%;
	line-height: 1.33;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #67747a; 
	width: 820px;
	background: #ffffff url("../_images/bg_body.png") repeat-x;	
}

h2 {
	font-size: 2em;	
	line-height: 1em;
	font-weight: bold;
	color: #263941;
	text-transform: uppercase;
}

h2 a:link,
h2 a:visited,
h2 a:hover {
	color: #263941;
	text-decoration: none;
}

p {
	margin-bottom: 1em;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}


a {
	text-decoration: none;
	color: #fe5541;
}

a:visited {
	color: #e3aea7;
}

a:hover {
	color: #fe1b00;
}

a.more {
	font-size: .93em;
	font-weight: bold;
	text-transform: uppercase;
}


/*********************************************************************
=copy 
*********************************************************************/


.copy h3 {
	padding: 1em 0;
	text-transform: uppercase;
	font-weight: bold;
	color: #263941;
}

.copy ul {
	margin: 0 0 1em 2em ;
	padding: 0 .2em;
	list-style-type: square;
}

.copy ol {
	margin: 0 0 1em 2em ;
	padding: 0 .2em;
	list-style-type: decimal;
}

.copy li {
	padding: .2em 0;
}

.copy p {
	margin-bottom: .6em;
}

.copy a {
	text-decoration: underline;
}

.copy a.more {
	cursor: pointer;	
	padding: 0 0 0 9px;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	font-size: .87em;
	line-height: 1em;
	background: url("../_images/bullets.png") no-repeat 0 3px;	
}

.copy a.more:visited {
	background: url("../_images/bullets.png") no-repeat 0 -57px;	
}

.copy a.more:hover {
	background: url("../_images/bullets.png") no-repeat 0 -117px;	
}

.copy p a.tag {
	text-indent: 0;
	background: none;
	display: inline;
}



/*********************************************************************
=forms 
*********************************************************************/

form label {
	cursor: default;
}

form .input-text {
	width: 100%;
	border: 1px solid #e6e6e6;
	border-right: 1px solid #f5f5f5;
	border-bottom: 1px solid #f5f5f5;	
	background: url("../_images/bg_form_input.png") no-repeat;	
	padding: .3em 0 .2em .4em;	
}

form .input-text:focus {
	border: 1px solid #dcdcdc;
}

form .input-submit {
	text-indent: -9999px;
	line-height: 0;
	font-size: 0;
	display: block;
	width: 115px; 
	height: 17px;
	border: 0;
	background: url("../_images/btn_submit.png") no-repeat;
}

form .input-submit:hover {
	background-position: 0 -17px;
}

form .log-out {
	width: auto;
	display: inline;
	border: 0;
	background: 0;
	font-weight: bold;
	color: #fe5541;	
}

form .log-out:hover {
	background-position: 0 -17px;
	color: #fe1b00;	
}



/*********************************************************************
=navigation 
*********************************************************************/

#navigation {
	padding: 0 0 0 35px;
	height: 62px;
	background: url("../_images/bg_navigation.png") no-repeat 6px 8px;
}

#navigation li {
	display: inline;
	float: left;
	padding: 0 19px 0 0;
}

#navigation li a {
	display: block;
	text-indent: -9999px;
	height: 62px;
}

#navigation li.nav-blog a {
	background: url("../_images/nav_001.png") no-repeat 0 bottom;
	width: 35px;
}

#navigation li.nav-about a {
	background: url("../_images/nav_002.png") no-repeat 0 bottom;
	width: 81px;
}

#navigation li.nav-jobs a {
	background: url("../_images/nav_003.png") no-repeat 0 bottom;
	width: 125px;
}

#navigation li.nav-contact a {
	background: url("../_images/nav_004.png") no-repeat 0 bottom;
	width: 57px;
}

#navigation li.nav-rss a {
	background: url("../_images/nav_005.png") no-repeat 0 bottom;
	width: 23px;
}

/* hover state*/
#navigation li a:hover {
	background-position: 0 center;
} 

/* active state */
#blog #navigation li.nav-blog a,
#about #navigation li.nav-about a,
#jobs #navigation li.nav-jobs a,
#contact #navigation li.nav-contact a {
	background-position: 0 top;	
	cursor: default;
}





/*********************************************************************
=headlines (image replacement) 
**********************************************************************/

h1 {
	height: 80px;
	width: 800px;	
	text-indent: -9999px;
	margin: 35px 0 48px 6px;
}

h1 a{
	display: block;
	margin: 0 0 0 30px;
	height: 80px;
	width: 350px;	
}

#blog h1 	{ 	background: url("../_images/h1_blog.png") no-repeat; 	}
#about h1 	{	background: url("../_images/h1_about.png") no-repeat; 	}
#jobs h1 	{ 	background: url("../_images/h1_jobs.png") no-repeat; 	}
#contact h1 {	background: url("../_images/h1_contact.png") no-repeat; }



/*********************************************************************
=tags (image replacement) 
**********************************************************************/

.tag {
	background: url("../_images/tags.png") no-repeat;
	height: 8px;
	line-height: 8px;
	overflow: hidden;
	display: block;
	text-indent: -9999px;
}

.legal .tag 			{	background-position: 0 -190px;	}
.adress .tag 			{	background-position: 0 -0;	}
.agency .tag 			{	background-position: 0 -10px;	}
.author .tag 			{	background-position: 0 -20px;	}
.archive .tag 			{	background-position: 0 -30px;	}
.copy .tag 				{	background-position: 0 -40px;	}
.categories .tag		{	background-position: 0 -50px;	}
.comments .tag 			{	background-position: 0 -60px;	}
.contact .tag 			{	background-position: 0 -70px;	}
.email .tag 			{	background-position: 0 -90px;	}
.email-adress .tag		{	background-position: 0 -100px;	}
.post-a-comment .tag 	{	background-position: 0 -230px;	}
.email-unpublished .tag	{	background-position: 0 -110px;	}
.fax .tag 				{	background-position: 0 -120px;	}
.featured-gallery .tag 	{	background-position: 0 -130px;	}
.disclaimer .tag 		{	background-position: 0 -140px;	}
.title .tag 			{	background-position: 0 -150px;	}
.integration .tag 		{	background-position: 0 -160px;	}
.responsible .tag 		{	background-position: 0 -170px;	}
.job-title .tag 		{	background-position: 0 -180px;	}
.links .tag 			{	background-position: 0 -200px;	}
.name .tag 				{	background-position: 0 -210px;	}
.phone .tag 			{	background-position: 0 -220px;	}
.facebook .tag 			{	background-position: 0 -240px;	}
.date .tag 				{	background-position: 0 -80px;	}
.jurisdictions .tag 	{	background-position: 0 -250px;	}
.register .tag 			{	background-position: 0 -260px;	}
.rss .tag 				{	background-position: 0 -270px;	}
.search .tag 			{	background-position: 0 -280px;	}
.time .tag 				{	background-position: 0 -290px;	}
.topic .tag 			{	background-position: 0 -300px;	}
.vat-number .tag	 	{	background-position: 0 -310px;	}
.ceo .tag 				{	background-position: 0 -320px;	}
.website .tag 			{	background-position: 0 -330px;	}
.your-comment .tag 		{	background-position: 0 -340px;	}
.making-of .tag 		{	background-position: 0 -350px;	}
.online-profile .tag 	{	background-position: 0 -360px;	}
.twitter .tag 			{	background-position: 0 -370px;	}	

	
/*********************************************************************
=sidebar 
*********************************************************************/

#sidebar {
	width: 225px;
	float: left;
	padding-bottom: 60px;		
}

#sidebar .sidebar-item {
	display: block;
	padding: 0;
}

#sidebar .tag {
	border-top: 1px solid #273941;	
	margin: 24px 0 6px 0;
}

#sidebar .search {	
	margin: 0 0 6px 0;
}

#sidebar .search .tag {
	margin-top: 0.2em;
}

#sidebar .search .input-text {
	width: 220px;
}

#sidebar .archive {
	position: relative;
	z-index: 10;	
}

#sidebar .recent-comments,
#sidebar .recent-comments .comment {
	position: relative;
	z-index: 1;
}

#sidebar .recent-comments ul{
	margin: 24px 0;
}

#sidebar .recent-comments .tag {
	border: 0;
	position: absolute;
	width: 220px;
	margin-top: 1px;
	padding: 0;	
	top: 0;
}

#sidebar .recent-comments .meta .topic 	{ width: 130px; }
#sidebar .recent-comments .meta .date  	{ width: 59px; 	}
#sidebar .recent-comments .meta .time 	{ width: 30px; 	}

#sidebar .recent-comments .meta {
	margin-top: 0;
	z-index: 1;
	line-height: 1.2em;
	position: absolute;
}

#sidebar .recent-comments .meta li {
	padding: 10px 0 0 0;
	height: 1.3em;
	overflow: hidden;
}

#sidebar .recent-comments strong {
	line-height: 1.3em;
	display: block;
}


#sidebar .recent-comments .meta .tag {
	top: 0;
}

#sidebar .recent-comments .comment-link {
	font-size: .92em;
	color: #263941; 	
	display: block;
	padding: 2em 0 0 0;
	margin: 0 0 1em 0;
	position: relative;
	z-index: 10;
}

#sidebar .recent-comments .comment-link p {
	display: inline;
}

#sidebar .recent-comments .comment-link:hover, 
#sidebar .recent-comments :first-child .meta:hover {
	color: #fe1b00;	
} 

#sidebar .recent-comments :first-child .meta li {
	border-top: 1px solid #273941;
	padding-top: 32px;
}

#sidebar .recent-comments :first-child .meta .tag {
	top: 22px;
}

#sidebar .recent-comments :first-child .comment-link {
	margin: 0 0 32px 0;
	top: 22px;
}

#sidebar #base-comments {
 	margin-bottom: 0;
}

#sidebar #more-comments {
 	margin: 0;
	padding: 0 0 1px 0;
}

#sidebar #more-comments .meta li {
	padding: 10px 0 0 0;
	height: 1.3em;
	border: 0 !important;
}

#sidebar #more-comments .meta .tag {
	top: 0;
}

#sidebar #more-comments .comment-link {
	margin: 0 0 12px 0;
	top: 0;
}

#sidebar .more {	
	position: relative;
	top: -6px;
	padding: 0 0 0 9px;
	font-weight: bold;
	line-height: 1em;
	background: url("../_images/bullets.png") no-repeat 0 3px;	
}

#sidebar .toggler.closeToggler,
#sidebar .toggler.closeToggler:hover {
	background: url("../_images/btn_toggler_close.png") no-repeat 0 4px;
	position: relative;
	left: -2px;
	padding: 0 0 0 11px;	
}


#sidebar .toggler,
#sidebar .links a {
	cursor: pointer;	
	padding: 0 0 0 9px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: .83em;
	line-height: 1.7em;
	background: url("../_images/bullets.png") no-repeat 0 3px;	
}

#sidebar .more:visited,
#sidebar .links a:visited {
	background: url("../_images/bullets.png") no-repeat 0 -57px;	
}

#sidebar .more:hover,
#sidebar .toggler:hover,
#sidebar .links a:hover {
	background: url("../_images/bullets.png") no-repeat 0 -117px;	
}

#sidebar .making-of {
	font-size: .92em;	
	color: #263941; 	
}

#sidebar .making-of strong {	
	font-weight: bold;
	font-size: .92em;	
	text-transform: uppercase;
	display: block;
	line-height: 1.2em;
	padding: 5px 0 1px 0;
}


/*********************************************************************
=select 
*********************************************************************/

#sidebar #archive-categories { z-index: 1; }
#sidebar #archive-months 	 { z-index: 0; }

.ul-select {
	width: 232px;
	height: 22px;
	padding: 6px 0 0 0;
	margin: 0 0 4px 0;
	line-height: 24px;
	position: relative;
	left: -2px;	
	text-indent: 8px;
	background: url("../_images/bg_select.png") no-repeat;	
	/*cursor: pointer;*/
	color: #fe5541;
	font-weight: bold;
	text-transform: uppercase;
	font-size: .83em;	
}


.ul-select .selected-option {
	cursor: pointer;
	display: block;
	width: 100%;
}

.ul-select ul {
	background: url("../_images/bg_select_dropdown.png") bottom right;
	width: 223px;
	display: block;
	position: absolute;
	border-left: 1px solid #f0f0f0;
	border-top: 1px solid #f0f0f0;	
	top: -2px;
	left: 2px;	
	padding:3px 5px 5px 0;
}

.ul-select li {
	display: inline;
}

.ul-select li a{
	display: block;
	width: 100%;
	color: #fe5541;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;	
	line-height: 1.5em;
	padding: 2px 0;	
}

.ul-select li a:hover,
.ul-select li a:active {
	color: #fe1b00;
	background: #f7f7f7;
}

#sidebar .ul-select .archive {
	position: absolute;
	top: 30px;
}

/*********************************************************************
=content
**********************************************************************/

#content {
	background: url("../_images/bg_content.png") no-repeat;	
	padding: .2em 53px 30px 5px;
	width: 512px; 
	float: left;	
}




/*********************************************************************
=meta
**********************************************************************/

.meta {
	color: #fe5541;
	text-transform: uppercase;	
	font-weight: bold;
	font-size: .83em;
	overflow: hidden;
}

.meta li {
	float: left;
	margin-right: 2px;
	line-height: 1em;
}


/*********************************************************************
=pagination
**********************************************************************/

#pagination {
	margin: 24px 0 0 36px;
	padding: 12px 0 0 0;
	width: 480px;
	height: 54px;
	background: url("../_images/bg_pagination.png") no-repeat;	
	position: relative;
}

#pagination .previous {	background: url("../_images/btn_previous.png") no-repeat; }
#pagination .next	  {	background: url("../_images/btn_next.png") no-repeat; }

#pagination .previous,
#pagination .next {
	display: block;
	float: left;
	width: 92px;
	height: 17px;
	padding: 0 2px 0 0;
	text-indent: -9999px;
	position: relative;
	top: 0;	
}

#pagination .previous:hover,
#pagination .next:hover {
	background-position: 0 bottom;	
}

#pagination .page-links {
	text-align: right;
	float: right;	
	width: 290px;
	font-weight: bold;
	font-size: .9em;
	text-transform: uppercase;			
	color: #c2c2be;
}

#pagination .page-links strong {
	text-decoration: none;
	color: #FE5541;
}

#pagination .page-links a {
	text-decoration: none;
	color: #e3aea7;
}

#pagination .page-links a:hover {
	color: #fe1b00;
}


/*********************************************************************
=blog posts
**********************************************************************/

.post {
	position: relative;
	padding: 0 0 4em 0;
	background: url("../_images/bg_content_post.png") no-repeat 2px -213px;
	overflow: hidden;
}

.single-page.post {
	background: transparent;
}

#posts > :first-child { 
	background: 0;
}

.post .meta {
	width: 480px;
	padding: 0 0 0 32px;		
}

.post .meta li {
	border-top: 1px solid #273941;
}

.post .meta .tag {
	padding-top: .3em;
}

.post .meta .date 		{ width: 66px; }
.post .meta .author 	{ width: 106px; }
.post .meta .categories { width: 302px; }

.post .header-image,
.post .header-video {
	background: url("../_images/bg_content_post.png") no-repeat 2px -207px;
	padding: 6px 0 12px 32px; 
}

.post .header-image a,
.post .header-image span {
	background: #e2e4df;
	display: block;
	width: 480px;
	height: 200px; 
	position: relative;
}

.post .header-image img {
	position: absolute;
	bottom: 0;
}

.post .title {
	background: url("../_images/bg_content_post.png") no-repeat 2px -203px;
	padding: 0 0 0 32px; 
}

.post .copy {
	background: url("../_images/bg_content_post.png") no-repeat 2px -203px;
	padding: 6px 0 0 32px;	
}

.post .title .tag,
.post .copy .tag {
	padding-bottom: 3px;	
}




/*********************************************************************
=blog integration
**********************************************************************/

#syndication {
	background: url("../_images/bg_content_post.png") no-repeat 2px -214px;	
	padding: 0 0 50px 32px;
	width:482px;	
}

#syndication .tag {
	border-top: 1px solid #273941;
	padding-bottom: .3em;		
}

#syndication .rss {
	width: 100px;
}

#syndication .integration {
	width: 380px;
	margin: 0;
	color:#c2c2be;
}


/*********************************************************************
=blog comments
**********************************************************************/

#comments {
	background: url("../_images/bg_content_post.png") no-repeat 2px -214px;	
	position: relative;
	padding: 10px 0 0 0;
}

#comments ul {
	position: relative;
	z-index: 0;
}

#comments .tag {
	border-top: 1px solid #273941;	
	margin: 0 0 0 32px;
	height: 10px;
	width: 482px;
	background-color: #ffffff;
	position: absolute;
	top: 0;
	z-index: 1;	
}

#comments .no-comment {
	text-transform: uppercase;
	font-weight: bold;
	color:#c2c2be;
	font-size: .83em;
}

#comments .comment {
	background: url("../_images/separator.png") no-repeat 2px -20px;
	padding: 20px 0 0 32px;
	overflow: hidden;	
	width: 482px;
	position: relative;	
}

#comments .comment .copy {
	width: 290px;
	padding: 0 0 10px 0;
	float: right;	
	font-size: .92em;
	
}

/* adjusts the size of the emoticons. 
(the "pixelsmileys" are a lot smaller than the original ones) */
#comments .comment .copy p img {  
	width: 11px;
    height: 11px;
}

#comments .comment .meta {
	background: url("../_images/bg_avatar.png") no-repeat 0 0;	
	position: relative;
	padding: 0 0 0 84px;
	width: 94px;
	height: 94px;
	color: #263941;
	float: left;
	overflow: hidden;
}

#comments .comment .meta p {
	margin: 0;
	word-wrap: break-word;
}

#comments .comment .meta img {
	position: absolute;
	top: 0;
	left:0;
}

#comments .comment .meta .date {
	font-weight: normal;
	line-height: 1.4em;
}

#comments .comment .meta .name {
	margin: 0;
	word-wrap: break-word;	
	padding: .2em 0;
}



/*********************************************************************
=blog log out form
**********************************************************************/

#log-out-form {
	background: url("../_images/separator.png") no-repeat 2px 0;
	padding: 40px 0 0 32px;	
	width: 482px;
}



/*********************************************************************
=blog comment form
**********************************************************************/

#social {
	margin: 30px 0 0 0;
	padding: 8px 0 60px 0;
	background: url("../_images/bg_social.png") no-repeat 2px 0;
	position: relative;
}

#social .twitter {
	width: 56px;
	position: absolute;
	left: 456px;
	top: 15px;
}

#solcial .fb_iframe_widget iframe {
	padding: 0;
	width: 522px !important;	
} 







/* REDUNDANT?? ->>> */

#comment-form ul{
	padding: 16px 0 0 0;
	background: url("../_images/bg_content_post.png") no-repeat 2px -213px;
}

#comment-form li{
	padding: 0 0 0 32px;
}


#comment-form .tag {
	border-top: 1px solid #273941;	
	margin: 0 0 0 32px;
	width: 482px;
}

#comment-form .input-text {
	width: 474px;
}

#comment-form .your-comment {
	padding-bottom: 10px;
	background: url("../_images/bg_content_post.png") no-repeat 2px bottom;
}

#comment-form .captcha {
	overflow: hidden;
	padding-bottom: 20px;
	background: url("../_images/separator.png") no-repeat 2px bottom;
}

#comment-form .captcha p {
	margin: 0.3em 0;
}

#comment-form .captcha label,
#comment-form .captcha input {
	display: inline;
}

#comment-form .captcha input {
	width: 5em;
}

#comment-form ul .tag {
	border: 0;
	margin: .4em 0 1px 0;
}

#comment-form span.error {
	color: #fe5541;
	text-transform: uppercase;	
	font-weight: bold;
	font-size: .83em;
}

#comment-form .submit {
	position: relative;
	width: 480px;
}

#comment-form .submit input{
	position: absolute;
	top: -40px;	
	right: 0;
}

#comment-form.logged-in .submit input{
	position: static;
}


/*********************************************************************
=static content
**********************************************************************/

#content-items {
	background: url("../_images/bg_content_list.png") no-repeat 32px top;
	width: 516px;
	color: #333333;	
	padding-bottom: 60px;	
}

#content-items .intro {
	background: url("../_images/separator.png") no-repeat -32px bottom;	
	position: relative;
	margin-left : 32px;
	color: #67747a; 		
}

#content-items .intro a {
	font-weight: normal;
	text-transform: none;	
}

#content-items .intro .tag {
	top: 1px;
	width: 100%;
	position: absolute;	
}

#content-items .intro h2 {
	margin: 12px 0 20px 0;	
}

#content-items .intro h2,
#content-items .intro p {
	background: url("../_images/bg_content_post.png") no-repeat 2px -214px;
	padding-left: 32px;
	margin-left: -32px;
}

.content-item {
	background: url("../_images/separator.png") no-repeat 2px bottom;
	padding: 20px 0;	
	position: relative;	
	overflow: hidden;
}

.content-item a {
	text-transform: uppercase;
	font-weight: bold;
}

.content-item .vcard {
	background: url("../_images/bg_content_post.png") no-repeat 2px -214px;
	padding: 0 0 0 32px;
	overflow: hidden;
	width: 480px;	
}

.content-item .photo {
	float: left;
}

.content-item .vcard div,
.content-item .vcard h2 {
	float: right;
	width: 296px;	
}

.content-item .vcard div {
	font-size: .83em;
	margin-top: 6px;
}

.content-item .vcard .tag {
	margin-bottom: .2em;
}

.content-item .vcard .locality,
.content-item .vcard .postal-code {
	display: inline;
}



/*********************************************************************
=static content: Legal/Contact
**********************************************************************/

#contact .content-item {
	padding-left: 32px;		
}

#contact .content-item li{
	margin-bottom: 6px;
}

#contact .intro {
	background: transparent;
	padding-left: 0;
}

#contact .intro p{
	background: transparent;
}

#contact .legal {
	padding-top: 0;	
	padding-left: 0;	
	position: relative;
}


#contact .legal .tag{
	margin-top: 1px;
	width: 480px;
	position: absolute;
	top: 0;
	margin-left: 32px;
	border-top: 1px solid #273941;
}

#contact .content-item .vcard {
	padding-top: 30px;
	overflow: hidden;
	width: 100%;
}

#contact .content-item .vcard .tag {
	border-top: 0;
	margin: 0;
	position: static;
}

#contact .content-item .vcard div {
	float: none;
}

#contact .ceo,
#contact .jurisdictions,
#contact .register,
#contact .vat-number,
#contact .responsible,
#contact .disclaimer {
	font-size: .83em;	
	line-height: 1.4em;
	width: 480px;
}

/*********************************************************************
=error messages
**********************************************************************/

.error #content #messages ul {
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #263941;
	font-size: 14px;
	list-style-type: none;
}

.error #content #messages li {
	padding: 0;
}

.error #content .back-link {
	padding-left: 32px;
	background: none;
}