@charset "utf-8";

/*##############################
CLEARFIX STYLES
##############################*/
html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}


/****** CLEAR FIX (to push the footer to the bottom) ******/
.clearfix:after 
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/*##############################
BASIC STYLES
##############################*/
body
{
	font:14px/21px Arial,Helvetica,sans-serif;
	text-align:center;
	background:#FFF;
	color:#717171;
}

/* Make HTML 5 elements display block-level for consistent styling */ 
header, footer, article, hgroup, address, nav
{
	display: block;
}

a:link, a:visited
{
	font-weight: normal;
	color:#60b99a;
	text-decoration: none;
	padding: 2px 4px;
}

a:active, a:hover
{
	color:#FFF;
	background:#60b99a;
	text-decoration: none;
	font-weight: normal;
	padding: 2px 4px;
}

img
{
	border:none;
	background:none;
}

hr
{
	height:1px;
	border-top: 1px solid #c2c2c2;
	border-right:none;
	border-bottom: 1px solid #ebebeb;
	border-left:none;
}


hr.seperator
{
	height: 47px;
	background:url("images/project_seperator.jpg") no-repeat top left;
	width:635px;
	clear:left;
	border:none;
}

hr.main_seperator
{
	height: 39px;
	background:url("images/main_seperator.jpg") no-repeat top left;
	width:960px;
	clear:both !important;
	border:none;
}


input, textarea
{
	padding: 5px 6px;
	margin: 0px 5px;
	background:#b0b0b0;
	color:#e9e9e9;
	font-style:italic;
	border:none;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

input[type=submit]
{
	padding: 6px 35px;
	margin: 0px;
	border:1px solid #b0b0b0;
	cursor:pointer;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background:#dcdcdc url(images/button_background.jpg) repeat-x top left;
	color:#434343;
	font-size:13px;
	font-style:normal;
	font-weight:bold;
}

h1
{
	font: 24px/28px 'TeXGyreAdventorRegular', Arial, sans-serif;
	margin:32px 0px 20px 0px;
	color:#434343;
}

h2
{
	font: 22px/26px 'TeXGyreAdventorRegular',Arial,sans-serif;
	margin:30px 0px 18px 0px;
	color:#434343;
}

h3
{
	font: 18px/24px 'TeXGyreAdventorRegular', Arial, sans-serif;
	margin:24px 0px 16px 0px;
	color:#434343;
}

h4
{
	font: 16px/22px 'TeXGyreAdventorRegular', Arial, sans-serif;
	margin:20px 0px 14px 0px;
	color:#434343;
}

h5
{
	font: 14px/20px 'TeXGyreAdventorRegular', Arial, sans-serif;
	margin:16px 0px 12px 0px;
	color:#434343;
}

h6
{
	font: 12px/18px 'TeXGyreAdventorRegular', Arial, sans-serif;
	margin:8px 0px;
	color:#434343;
}

pre, code
{
	background:#3F3F3F;
	color:#FFF;
	padding:12px;
	margin:10px 0;
}

#container p
{
margin-bottom: 10px;
}

/*##############################
MULTI USE STYLES
##############################*/

@font-face {
	font-family: 'TeXGyreAdventorRegular';
	src: url('texgyreadventor-regular-webfont.eot');
	src: local('?'), url('css/font/texgyreadventor-regular-webfont.woff') format('woff'), url('css/font/texgyreadventor-regular-webfont.ttf') format('truetype'), url('css/font/texgyreadventor-regular-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}


.clear{clear:both;}
.clear_left{clear:left;}
.clear_right{clear:right;}
.right{text-align:right;}
.left{text-align:left;}
.center{text-align:center;}
.no-border{border:none !important;}
.no-background{background:none !important;}

.error
{
padding: 5px 0px;
margin:5px 0px;
border-top:2px solid #BF0008;
border-right:none;
border-bottom:2px solid #BF0008;
border-left:none;
background:#FF8F93;
color: #BF0008;
text-align:center;
}

.error a
{
color:#BF0008;
font-weight:bold;
text-decoration:underline;
}

.succes
{
padding: 5px 0px;
margin:5px 0px;
border-top:2px solid #247F00;
border-right:none;
border-bottom:2px solid #247F00;
border-left:none;
background:#82FF4F;
color: #247F00;
text-align:center;
}

.succes a
{
color:#247F00;
font-weight:bold;
text-decoration:underline;
}

.note
{
border: 1px solid #FFD100;
background:#FDFF2F url(images/note.png) no-repeat top left;
padding: 10px 10px 10px 60px;
}

.announcement
{
position:relative;
text-align:center;
border: 1px solid #FFD100;
background:#FDFF2F url(images/note.png) no-repeat top left;
padding: 5px 40px 5px 60px;
}



/*##############################
HEADERBACKGROUND STYLES
##############################*/
#headerbackground
{
	background:#282828 url(images/header_back.jpg) repeat-x top left;
	height: 107px;
	width:100%;
}



/*##############################
HEADER TOP STYLES
##############################*/
#header_top
{
	position:relative;
	background:#282828 url(images/header_top_background.jpg) no-repeat top left;
	margin: 0 auto;
	height:106px;
	width:1020px;
	color:#FFF;
	text-align:left;
	border-bottom:1px solid #414141;
}


#header_top .site_title
{
	background:transparent url(images/site_title.png) no-repeat top left;
	width: 235px;
	height:27px;
	position:absolute;
	top:40px;
	left:0px;
}

#header_top #slogan
{
	position:absolute;
	top:56px;
	left:0px;
	font-size:12px;
	font-style:italic;
}

#header_top .navigation
{
	position:absolute;
	top:0px;
	right:5px;
}

#header_top ul.navigation 
{
	margin:0 auto 0;
	padding:0px;
}

#header_top ul.navigation  li
{
	float:left;
	display:inline;
	padding:0px;
}

#header_top ul.navigation  li a:link, #header_top ul.navigation  li a:visited
{
	display:block;
	color:#FFF;
	font-weight:normal;
	font-size:14px;
	text-decoration: none;
	background:none;
	padding:35px 25px 0px 25px;
	margin:0px;
	height:71px;
}

#header_top ul.navigation  li a:hover, #header_top ul.navigation  li a:active
{
	display:block;
	color:#FFF;
	font-weight:normal;
	font-size:14px;
	text-decoration: none;
	background:#5b5b5b;
	padding:35px 25px 0px 25px;
	margin:0px;
	height:71px;
}



/*##############################
HEADER STYLES
##############################*/
header
{
	position:relative;
	background:transparent url(images/header_main_background.jpg) no-repeat top left;
	margin: 0 auto;
	text-align:left;
	width:1020px;
	height:450px;
}

#site_quote
{
	font: 22px/35px 'TeXGyreAdventorRegular', Arial, sans-serif;
	letter-spacing: 0;
	font-weight:bold;
	clear:both;
	overflow:hidden;
	padding:25px 0 0 0;
}

#site_quote img
{
	float:left;
	padding:6px;
	background:#FFF;
	margin: -30px 20px 0 0;
}

.featured
{
	margin:0px auto;
	width:800px; 
	padding-top:25px;
}

#cu3er-container
{
	width:800px; 
	outline:0;
}

.header_bottom
{
	background:#282828;
	height: 11px;
	border-top: 1px solid #3f3f3f;
	border-bottom: 1px solid #3f3f3f;
	margin-bottom:5px;
}

h1#sitename
{
	color:#FFF;
	margin:0;
	position:absolute;
	top:25px;
	left:0;
}

h1#sitename a
{
	color:#FFF;
	background:none;
}





/*##############################
CONTAINER STYLES
##############################*/
#container
{
	text-align:left;
	width: 960px;
	margin:30px auto 0 auto;
	/***** needed for the clearfix *****/
	padding: 0px 4px 80px 0px;
}

#container .project h1
{
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	margin:4px 0px 6px 0px;
}

#container .project h1 a
{
	text-decoration: none;
	background:none;
	color:#434343;
}

#container .home_thumb
{
	float:left;
	margin:4px 18px 4px 0px;
	position:relative;
}

.p_details
{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	padding:6px;
	z-index:90;
}

.p_details h2
{
	margin:0px;
}

#container .home_thumb img
{
	border:1px solid #CFCFCF;
	margin:0;
	padding:5px;
}

#container .home_thumb:hover img
{
	background:#FFF;
	opacity: .20;
	filter: alpha(opacity=20);
	-ms-filter: "alpha(opacity=20)";
	-khtml-opacity: .20;
	-moz-opacity: .20;
}

#container a:hover > img
{
	background:none !important;
}

#container .home_thumb:hover .p_details
{
	display:block;
}


#container .project_details .description
{
	margin-left:282px;
}

ul.tags
{
	margin:10px 0px;	
}

ul.tags li
{
	display:inline;
	float:left;
	padding:0px 6px;
	
}

ul.tags li:before
{
	padding-right: 5px;
	margin-top:5px;
	content: url("images/tag.png");

}





/*##############################
SIDEBAR STYLES
##############################*/
#sidebar, .sidebar_single
{
	width:270px;
	float:right;
	margin:-30px 0 0;
}

#sidebar ul.services
{
	padding:0px 0px 0px 40px;
}

#sidebar ul.services h5
{
	font-family:Arial, Helvetica, sans-serif !important;	
	font-weight:bold;
}

#sidebar ul.services li
{
	font-size:12px;
	line-height:20px;
	margin:0px 0px 20px 0px;
}

#sidebar ul.services li.web_dev:before
{
	content:url(images/services.jpg);
	float:left;
	margin-left:-40px;
}

#sidebar ul.services li.config:before
{
	content:url(images/configuration.jpg);
	float:left;
	margin-left:-40px;
}

.sidebar_single
{
	font: 12px/18px 'TeXGyreAdventorRegular', Arial, sans-serif;
}

.sidebar_single p
{
	margin:15px 0px;	
}

.sidebar_single a:link, .sidebar_single a:visited
{
	color:#066;
}

.sidebar_single a:hover, .sidebar_single a:active
{
	color:#FFF;
	background:#066;
}

.twitter_update
{
	position:relative;
	width: 180px;
	font-size: 12px;
	line-height:14px;
	padding:25px 30px;
	margin:25px 0px 10px 0px;
	color:#afafaf;
	background:#25272c;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.twitter_update .arrow
{
	background:url("images/comment_arrow.png") no-repeat top left;
	width: 16px;
	height: 9px;
	position:absolute;
	top:105px;
	left:25px;
}


.twitter_update .open_quote
{
	position:absolute;
	top:10px;
	left:5px;
	background:url("images/quote_start.png") no-repeat top left;
	width: 16px;
	height: 11px;
}

.twitter_update .close_quote
{
	background:url("images/quote_end.png") no-repeat top left;
	width: 16px;
	height: 11px;
	position:absolute;
	bottom:10px;
	right:5px;
}




/*##############################
LEFTBAR STYLES
##############################*/
#leftbar
{
	width:640px;
	margin: 0px 0px 40px 0px;
}


.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited
{
	padding:2px 4px;
	border: 1px solid #d8d8d8;
	color: #424d55;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin:0px 6px;
	background:url("images/pagination_normal.jpg") repeat-x top left;	
}

.wp-pagenavi a:hover, .wp-pagenavi a:active
{	
	border: 1px solid #424d55;
	color: #FFF;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding:2px 4px;
	margin:0px 6px;
	background:url("images/pagination_current.jpg") repeat-x top left;
}

.wp-pagenavi span.pages {
	padding:2px 4px;
	border: 1px solid #d8d8d8;
	color: #424d55;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin:0px 6px;
	background:url("images/pagination_normal.jpg") repeat-x top left;	
}

.wp-pagenavi span.current {
	border: 1px solid #424d55;
	color: #FFF;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding:2px 4px;
	margin:0px 6px;
	background:url("images/pagination_current.jpg") repeat-x top left;
}

.wp-pagenavi span.extend {
	padding:2px 4px;
	border: 1px solid #d8d8d8;
	color: #424d55;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin:0px 6px;
	background:url("images/pagination_normal.jpg") repeat-x top left;	
}



li.current a
{
	color:#FFF !important;
	text-decoration:none;
}

.pagination li a:link, .pagination li a:visited
{
	background:none;
	color:#434343;
	text-decoration:none;
	padding:6px 8px;
}

.pagination li a:active, .pagination li a:hover
{
	background:none;
	color:#FFF;
	text-decoration:none;
	padding:6px 8px;
}

.entry
{
	clear:left;
}

.entry ul
{
	padding:10px 30px;
	list-style-type:disc;
}

.entry ol
{
	padding:10px 30px;
	list-style-type:lower-roman;
}

.entry h2
{
	background:#434343;
	color:#FFFFFF;
	padding:5px;
	border:1px solid #1F1F1F;
}

.entry .project_preview
{
	padding:11px 6px 8px 18px;
	border: 1px solid #d2d2d2;
	-moz-box-shadow: 4px 4px 3px #eaeaea;
	-webkit-box-shadow: 4px 4px 3px #eaeaea;
	box-shadow: 4px 4px 3px #eaeaea;
	margin:0px 0px 30px 0px;
}

.entry .project_preview img
{
	width: 600px;
	height: 210px;
}

.entry .project_preview a
{
	background: none;
	margin:0;
	padding:0;
}

.commentlist .arrow
{
		background: url("images/comment_arrow.png") bottom no-repeat;
		position:absolute;
		left:15px;
		bottom:-10px;
		width:19px;
		height: 10px;
	}

.commentlist li
{
	position:relative;
 	padding: 0px;
	margin-top:15px;
	background:#454545 url("images/comment_quote.png") no-repeat top right;
	background-position:550px 10px;
	color:#e4edee;
}

.commentlist li.authcomment
{
	position:relative;
 	padding: 0px;
	margin-top:15px;
	background:#e4edee url("images/comment_quote.png") no-repeat top right;
	background-position:550px 10px;
	color:#454545;
}

.commentlist li .gravatar
{
width:80px;
height:80px;
padding:6px;
float:left;
}

.commentlist li.authcomment .arrow
{
		background: url("images/comment_author_arrow.png") bottom no-repeat;
		position:absolute;
		left:15px;
		bottom:-10px;
		width:19px;
		height: 10px;
	}

.commentlist li .comment_text
{
	padding:10px 100px 20px 18px;
}


.commentlist cite
{
	margin-top:10px;
	display:block;
	font-style:normal
}

.productinfo_box
{
	width:993px;
	height:330px;
	background:transparent url('images/topinfo_background.png') no-repeat top left;
	position:relative;
	margin:60px auto 0 auto;
}

.hide_liteversion
{
	background: url("images/top_background.jpg") repeat-x scroll -51px -75px #FFFFFF;
    height: 43px;
    position: absolute;
    right: 88px;
    top: 14px;
    width: 242px;
}

.productinfo_box a.liteversion
{
	display: block;
    height: 37px;
    position: absolute;
    right: 89px;
    top: 14px;
    width: 228px;
}

.sociallikebox
{
	overflow:hidden;
	width:184px;
}

.twitterlikebox, .facebooklikebox, .googlelikebox
{
	float:left;
	width:60px;
	display:inline;
}

#fb-root
{
	display:none;
}

.productinfo_box a.premiumurl
{
	display: block;
    height: 32px;
    position: absolute;
    right: 89px;
    top: 91px;
    width: 63px;
	color:#FFF;
	font-size:10px;
	padding:10px 0 0 170px;
	-moz-text-shadow:1px 1px 1px #000;
	-webkit-text-shadow:1px 1px 1px #000;
	text-shadow:1px 1px 1px #000;
	font-weight:normal;
}

a.liteversion, a.premiumurl
{
	background:none;
}

h1.product_title
{
	margin:0 0 20px 0;
}

.productinfo_background
{
	position:absolute;
	height:390px;
	width:100%;
	top:107px;
	left:0;
	background:#FFF url('images/top_background.jpg') repeat-x top left;
}

.productpage_content
{
	margin:390px 0 0;
}

.left_screen
{
	height: 143px;
    left: 47px;
    overflow: hidden;
    position: absolute;
    top: 44px;
    width: 93px;
}

.main_screen
{
	height: 190px;
    left: 156px;
    position: absolute;
    top: 18px;
    width: 273px;
}

.right_screen
{
	height: 143px;
    left: 445px;
    overflow: hidden;
    position: absolute;
    top: 44px;
    width: 93px;
}


.project_screenshots
{
height:100px;
width:150px;
}
	/* the overlayed element */
		.simple_overlay {
			/* must be initially hidden */
			display:none;
			
			/* place overlay on top of other elements */
			z-index:10000;
			
			/* styling */
			background-color:#333;
			
			width:675px;	
			min-height:200px;
			border:1px solid #666;
			
			/* CSS3 styling for latest browsers */
			-moz-box-shadow:0 0 90px 5px #000;
			-webkit-box-shadow: 0 0 90px #000;	
		}
		
		/* close button positioned on upper right corner */
		.simple_overlay .close {
			background-image:url(http://static.flowplayer.org/tools/img/overlay/close.png);
			position:absolute;
			right:-15px;
			top:-15px;
			cursor:pointer;
			height:35px;
			width:35px;
		}
		.next, .prev {
			
			/* absolute positioning relative to the overlay */
			position:absolute;
			top:40%;	
			border:1px solid #666;	
			cursor:pointer;
			display:block;
			padding:10px 20px;
			color:#fff;
			font-size:11px;
			
			/* upcoming CSS3 features */
			-moz-border-radius:5px;
			-webkit-border-radius:5px;	
		}
		
		.prev {
			left:0;
			border-left:0;
			-moz-border-radius-topleft:0;
			-moz-border-radius-bottomleft:0;
			-webkit-border-bottom-left-radius:0;
			-webkit-border-top-left-radius:0;
		}
		
		.next {
			right:0;
			border-right:0;
			-moz-border-radius-topright:0;
			-moz-border-radius-bottomright:0;
			-webkit-border-bottom-right-radius:0;
			-webkit-border-top-right-radius:0;	
		}
		
		.next:hover, .prev:hover {
			text-decoration:underline;
			background-color:#000;
padding:10px 20px;
		}
		
		/* when there is no next or previous link available this class is added */
		.disabled {
			visibility:hidden;		
		}
		
		/* the "information box" */
		.info {
			position:absolute;
			bottom:0;
			left:0;	
			padding:10px 15px;
			color:#fff;
			font-size:11px;
			border-top:1px solid #666;
		}
		
		.info strong {
			display:block;	
		}
		
		/* progress indicator (animated gif). should be initially hidden */
		.progress {
			position:absolute;
			top:45%;
			left:50%;
			display:none;
		}
		
		/* everybody should know about RGBA colors. */
		.next, .prev, .info {
			background:#333 !important;
			background:rgba(0, 0, 0, 0.6) url(http://static.flowplayer.org/tools/img/global/gradient/h80.png) repeat-x;		
		}
		
		#triggers {
			text-align:center;
		}
		
		#triggers img {
			background-color:#fff;
			padding:2px;
			border:1px solid #ccc;
			margin:15px 2px;
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
		}
		
		/* the active thumbnail */
		#triggers a.active img {
			outline:1px solid #000;
		
			/* show on top of the expose mask */
			z-index:9999;
			position:relative;
		}
	





/*##############################
FOOTERBACKGROUND STYLES
##############################*/
#footerbackground
{
background:#1f1f1f;
text-align:left;
width: 100%;

/*Important to use for the clearfix (pust footer to bottom)*/
position: relative;
margin: -57px auto 0px auto; /* negative value of footer height */
height: 57px;
clear:both;
}





/*##############################
FOOTERCONTENT STYLES
##############################*/
#footercontent
{
	width: 960px;
	height:280px;
	margin:0px 0px 20px 0px;
}

#footercontent h2
{
	font-weight: bold;
	border-bottom:1px solid #b0b0b0;
}

#footercontent ul li
{
	margin: 10px 0px;
	font-size:12px;
}

#footercontent ul li a:link, #footercontent ul li a:visited
{
	background: none;
	color:#8d8d8d;
	text-decoration:none;
}

#footercontent ul li a:hover, #footercontent ul li a:active
{
	background: none;
	color:#8d8d8d;
	text-decoration:underline;
}

#footercontent .latestblog
{
	float:left;
	width: 260px;
	height: 280px;
	margin:0px 0px 0px 20px;
	word-wr
}

#respond p
{
	margin:14px 0px;
}

#footercontent .affiliates
{
	float:left;
	width: 120px;
	height: 280px;
	margin: 0px 0px 0px 50px;
}

#footercontent .links
{
	float:left;
	width: 120px;
	height: 280px;
	margin: 0px 0px 0px 50px;
}

#footercontent .twitter
{
	float:left;
	width: 280px;
	height: 280px;
	margin: 0px 0px 0px 50px;
}

#footercontent .twitter .open_quote
{
	background:url("images/quote_start.jpg") no-repeat top left;
	width: 57px;
	height: 39px;
}

#footercontent .twitter .close_quote
{
	background:url("images/quote_end.jpg") no-repeat top left;
	width: 57px;
	height: 39px;
	margin:0px 0px 0px 220px;
}

#footercontent .twitter .twitter_update
{
	width: 250px;
	font: 20px/24px 'TeXGyreAdventorRegular', Arial, sans-serif;
	margin:20px 0px 20px 40px;
	color:#434343;
}



/*##############################
FOOTER STYLES
##############################*/
footer
{
	position:relative;
	text-align:left;
	width: 960px;
	height:57px;
	margin:0 auto;
	color:#FFF;
}

footer a:link, footer a:visited
{
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
	background:none;
}

footer a:hover, footer a:active
{
	color:#FFF;
	font-weight:bold;
	text-decoration:underline;
	background:none;
}

footer address
{
	position: absolute;
	top:20px;
	left:0px;
	font-size:0.9em;
}