/*
Theme Name: Hip Web Design 2010
Theme URI: http://www.makeyouhip.com/
Description: 2010 theme for Hip Web Design
Author: Hip Web Design
Author URI: http://www.makeyouhip.com/
*/

/*####################################################
GLOBAL
####################################################*/

body {
	background: #1d1d1d;
	margin: 0;
	padding: 0;
	font-size: 11pt;
	font-family: 'Trebuchet MS', Arial;
	color: #ffffff;
}

a, a:visited {
	color: #b5d828;
	text-decoration: none;
}

a:active, a:focus {
	outline: 0;
}

.clear {
	clear: both;
}

small {
	font-size: 8pt;
	color: #4e4e4e;
	padding: 10px 0px;
}

a small {
	color: #b5d828;
}

/*####################################################
NAVIGATION
####################################################*/

#nav {
	position: relative;
	width: 100%;
	background: transparent url('images/nav-bg.png') repeat-x;
}

#nav ul.table {
	display: table;
	margin: 0 auto;
}

#nav li {
	display: inline;
	list-style: none;
}

#nav ul.table li.page_item a {
	display: inline-block;
	background: #1b1b1b;
	padding: 16px 17px;
	margin: 0 2px;
	color: #b1b1b1;
	text-transform: lowercase;
}

#nav ul.table li.page_item a:hover, #nav ul.table li.current_page_item a:hover {
	background: #373737;
	color: #b5d828;
}

#nav ul.table li.current_page_item a {
	background: #282828;
	color: #28d8d2;
}

/*####################################################
MAIN BANNER
####################################################*/

#header {
	position: relative;
	width: 100%;
	background: url('images/banner-bg.jpg');
	margin: 0;
	padding: 0;
	height: 446px;
}

#banner {
	position: relative;
	width: 950px;
	height: 346px;
	margin: 0 auto;
	padding: 0;
}

#portfolio-slide {
	width: 100%;
	height: 143px;
	background: url('images/tartan_black.jpg');
	border-top: 1px #3c3c3c solid;
}

#portfolio-holder {
	width: 980px;
	margin: 0 auto;
}

#twitter {
	width: 950px;
	margin: 0 auto;
	font-size: 8pt;
	text-align: center;
}

#twitter a {
	color: #ffffff;
}

#twitter a.green {
	color: #b5d828;
}

#twitter a.aktt_tweet_time {
	color: #676666;
}

/*####################################################
PAGE
####################################################*/

#page {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	border-top: 1px #3c3c3c solid;
}

#content {
	position: relative;
	width: 950px;
	margin: 0 auto;
	padding: 35px 0px 35px 0px;
	line-height: 1.4em;
}

#left-column {
	width: 550px;
	float: left;
}

#full-column {
	width: 950px;
	margin: 0 auto;
}

.box {
	position: relative;
	background: #222222;
	-moz-border-radius: 25px;
	-khtml-border-radius: 25px;
	-webkit-border-radius: 25px;
	padding: 25px;
	margin: 0px 0 20px 0;
}

.top-box {
	background: #222222;
	-moz-border-radius: 0 0 25px 25px;
	-khtml-border-radius: 0 0 25px 25px;
	-webkit-border-bottom-right-radius: 25px;
	-webkit-border-bottom-left-radius: 25px;
	padding: 10px 15px;
	margin: 0px 0 20px 0;
}

.page-box {
	background: #222222;
	-moz-border-radius: 0 0 25px 25px;
	-khtml-border-radius: 0 0 25px 25px;
	-webkit-border-bottom-left-radius: 25px;
	-webkit-border-bottom-right-radius: 25px;
	padding: 15px 25px 25px 25px;
	margin: 0px 0 20px 0;
}

.navigation {
	padding: 5px 10px;
	border: 1px #111111 dashed;
	font-size: 9pt;
	filter:alpha(opacity=60);
 	opacity:0.6;
}

.navigation:hover, .navigation-numbers:hover {
	filter:alpha(opacity=100);
 	opacity:1.0;
}

.navigation-numbers {
	padding: 5px 10px;
	background: #131313;
	font-size: 9pt;
	filter:alpha(opacity=60);
 	opacity:0.6;
	-moz-border-radius: 25px;
	-khtml-border-radius: 25px;
	-webkit-border-radius: 25px;
}

.postmetadata {
	font-size: 9pt;
}

#share {
	background: #222222;
	-moz-border-radius: 25px;
	-khtml-border-radius: 25px;
	-webkit-border-radius: 25px;
	padding: 10px 15px;
	margin: 0px 0 20px 0;
}

#question_mark {
	float: left;
	padding:0;
	margin-top: 15px;
}

#question_mark:hover {
	cursor: pointer;
}
		
.sociable {
	float: left;
	padding: 10px
}
		
.sociable ul {
	margin: 0;
	padding: 5px 0px;
}
			
.sociable li {
	float: left;
	list-style: none;
	margin-right: 7px;
	opacity: 0.55;
	filter: alpha(opacity=55);
}
			
.sociable li:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

.pp_buy_now {
	border: 0;
}

.pp_buy_now:hover {
	border: 0;
}

#status {
	font-size: 14pt;
}

span.active {
	color: #28d8d2;
}

.expired {
	color: #f73459;
}

span.unavailable {
	color: #9c9c9c;
}

.dl-arrow {
	width: 25px;
	height: 25px;
	background: url('images/dl.jpg') center bottom no-repeat;
	display: inline-block;
	margin-right: 5px;
}

.features {
	display: block;
	font-size: 18pt;
	margin: 25px 0 0 0;
	text-align: right;
}

/*####################################################
SIDEBAR
####################################################*/

#sidebar {
	float: right;
	width: 350px;
}

li.recent-post {
	list-style: none;
	text-align: center;
}

li.recent-post:hover a {
	color: #f73459;
	background: #3e3e3e;
}

li.recent-post a {
	display: block;
	color: #28d8d2;
	background: #2c2c2c;
	padding: 15px 0px;
	margin: 2px 0px;
}

.blog-box {
	background: #222222;
	-moz-border-radius: 25px;
	-khtml-border-radius: 25px;
	-webkit-border-radius: 25px;
	padding: 0px;
	margin: 0px;
}

li.browse {
	background: #222222;
	-moz-border-radius: 0 0 25px 25px;
	-khtml-border-radius: 0 0 25px 25px;
	-webkit-border-bottom-right-radius: 25px;
	-webkit-border-bottom-left-radius: 25px;
	padding: 15px 0px;
	margin-top: 2px;
	list-style: none;
	text-align: center;
	display: block;
}

li.browse a {
	color: #ffffff;
}

#ad {
	height: 325px;
}

.my-ad {
	padding: 25px;
	z-index: 2;
}

/*####################################################
FOOTER
####################################################*/

#footer {
	position: relative;
	width: 100%;
	background: #131313;
	min-height: 250px;
	height: 250px;
}

#footer a {
	color: #ffffff;
}

#footer a:hover {
	color: #b5d828;
}

#footer-content {
	width: 1050px;
	margin: 0 auto;
	background: url('images/footer-bg.jpg') no-repeat;
	height: 250px;
}

#tagline {
	margin: 15px 0px;
	font-size: 14pt;
}

#copyright {
	font-size: 10pt;
}

/*####################################################
HEADERS
####################################################*/

h2 {
	font-size: 18pt;
	color: #ffffff;
	background: #131313;
	padding: 10px 15px;
	font-weight: lighter;
	-moz-border-radius: 25px 25px 0 0;
	-khtml-border-radius: 25px 25px 0 0;
	-webkit-border-top-right-radius: 25px;
	-webkit-border-top-left-radius: 25px;
	margin: 0;
}

h3 {
	font-size: 11pt;
	color: #b5d828;
	margin: 10px 0 0 0;
	padding: 0;
	line-height: 0;
}

h3.comment-title {
	font-size: 18pt;
	color: #131313;
}

h4 {
	font-size: 14pt;
	font-weight: bold;
	color: #b5d828;
	margin: 5px 0px;
	padding: 0;
}

h4.dl {
	color: #fff;
	margin: 20px 0px;
	font-size: 18pt;
}

h4.dl a {
	color: #b5d828;
}

h5 {
	font-size: 13pt;
	font-weight: bold;
	color: #9c9c9c;
	margin: 5px 0px;
	padding: 0;
}

/*####################################################
IMAGES
####################################################*/

a img {
	border: 0;
}

.alignleft {
	display: inline;
	float: left;
	margin: 3px 5px 3px 0px;
	}
	
.alignright {
	display: inline;
	float: right;
	margin: 3px 0px 3px 5px;
	}
	
.aligncenter {
	text-align: center;
}

opacity {
	opacity: 0.55;
	filter: alpha(opacity=55);
	cursor: default;
}
	
.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

/*####################################################
FORMS
####################################################*/

select {
	display: block;
	}

input {
	background: #1c1c1c;
	padding: 2px;
	border: 1px #202020 solid;
	color: #ffffff;
	font-size: 11pt;
	width: 80%;
	z-index: 99;
	}
	
input, select {
	margin: 5px 0 5px 10px;
	}
	
input:hover, textarea#comments:hover, textarea#comment:hover {
	border-color: #626262;
	border-style: solid;
	}
	
input:active, input:focus, textarea#comments:active, textarea#comments:focus, textarea#comment:active, textarea#comment:focus {
	border-color: #28d8d2;
	}
	
textarea#comments, textarea#comment {
	width: 98%;
	margin: 5px 0 5px 0;
	padding: 3px;
	background: #1c1c1c;
	border: 1px #202020 solid;
	color: #ffffff;
	}
	
#box {
	background: #131313;
	color: #484848;
	padding: 15px;
	margin-bottom: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	}
	
#quote-box {
	margin-top: 15px;
}

#box:focus, #box:hover, #box:active {
	background: #282828;
	color: #ffffff;
}

.submit {
	width: 200px;
	margin: 0 auto;
	padding: 10px 0px;
	-moz-border-radius: 20px;
	-khtml-border-radius: 20px;
	-webkit-border-radius: 20px;
}
		
.submit:hover {
	cursor: pointer;
}

#comment {
	width: 97%;
	background: #2a2a2a;
	border: 1px #3a3a3a solid;
	padding: 5px;
	color: #ffffff;
}

/*####################################################
COMMENTS
####################################################*/

.comment-box {
	background: #222222;
	-moz-border-radius: 0 0 25px 25px;
	-khtml-border-radius: 0 0 25px 25px;
	-webkit-border-bottom-left-radius: 25px;
	-webkit-border-bottom-right-radius: 25px;
	padding: 0px 0px 5px 0px;
	margin: 0px 0 20px 0;
}

.comment-navigation {
	padding: 5px 25px;
	font-size: 9pt;
}

.commentlist {
	margin: 0;
	padding: 0px 0px;
	list-style: none;
}

.commentlist li {
	list-style: none;
	display: block;
	margin: 2px 0px;
	padding: 15px 25px;
	background: #2c2c2c;
}

.commentlist li:hover {
	background: #3e3e3e;
}

.commentlist ul.children {
	margin: 0px;
	padding: 0px;
	background: #383838;
}

.commentlist ul.children li.depth-2 {
	margin-left: 0;
	padding: 15px;
	list-style: none;
	display: block;
}

#respond input {
	background: #1c1c1c;
	padding: 5px;
	border: 1px #202020 solid;
	color: #ffffff;
	font-size: 11pt;
	z-index: 99;
	width: 200px;
}

#respond input:hover {
	background: #191919;
	color: #28d8d2;
}

.avatar {
	float: left;
	margin: 0 10px 7px 0px;
	padding: 5px;
	background: #313131;
	border: 1px #222222 solid;
}

/*####################################################
SCROLLABLE
####################################################*/
		
.scrollable { 
 	/* required settings */ 
	position: relative; 
	overflow: hidden; 
	width: 425px; 
	height: 235px; 
	min-height: 235px;
	margin-right: 0px;
	font-size: 18pt;
} 

.scrollable .active {
	z-index:9999; 
    position:relative; 
}
				
.scrollable .items { 
	/* this cannot be too large */ 
	height: 20000em;  
	position: absolute;
	left: 0;
}

.scrollable .items a {
	color: #ffffff;
}
					
.scrollable .items .scroll-block { 
	float:left; 
	width: 425px;
	text-align: left;
}
					
.scrollable .items  p.author {
	font-size: 10pt;
	font-style: italic;
	text-align: right;
}
					
.scrollable .items .scroll-block .item-block {
	display: inline-table;
	margin: auto;
	width: auto;
	height: auto;
}
					
.disabled {
	visibility: hidden !important;		
}

.scrollable-portfolio { 
 	/* required settings */ 
	position: relative; 
	float: left;
	overflow: hidden; 
	width: 875px;
	margin: 0 auto 0 16px;
	padding: 14px 0px;
	height: 143px; 
} 
				
.scrollable-portfolio .projects { 
	/* this cannot be too large */ 
	width:20000em;  
	position:absolute; 
}

.scrollable-portfolio .projects a {
	position: relative;
	list-style: none;
	display:block; 
    float:left;
	padding: 0;
	margin: 0 10px;
	width: 155px;
	height: 115px;
	border: 1px #4f4f4f solid;
	overflow: hidden;
	filter:alpha(opacity=90);
 	opacity:0.9;
}

.scrollable-portfolio .projects a:hover {
	border: 1px #ffffff solid;
	cursor: pointer;
	filter:alpha(opacity=100);
 	opacity:1.0;
}

.scrollable-portfolio .projects a img {
	width: 155px;
	height: auto;
}

.prev {
	float: left;
	padding: 30px 0px 10px 0px;
	filter:alpha(opacity=30);
 	opacity:0.3;
}

.prev:hover {
	cursor: pointer;
	filter:alpha(opacity=80);
 	opacity:0.8;
}

.next {
	float: right;
	padding: 30px 0px 10px 0px;
	filter:alpha(opacity=30);
 	opacity:0.3;
}

.next:hover {
	cursor: pointer;
	filter:alpha(opacity=80);
 	opacity:0.8;	
}

/*####################################################
TOOLTIP
####################################################*/

/* trigger button */ 
#wordpress_trigger { 
    display: block;
	width: 62px;
	height: 64px;
} 
 
/* mouseover state */ 
#wordpress_trigger:hover { 
    cursor: pointer;        
} 
 
/* tooltip styling */ 
.tooltip-medium { 
    display: none; 
    background:url('images/bubble-mid.png') no-repeat; 
    height:115px; 
    padding: 0; 
    width:204px; 
    font-size:12px; 
    color:#fff; 
	line-height: 1.4em;
	z-index: 98;
} 

.tooltip-right { 
    display: none; 
    background:url('images/bubble-right.png') no-repeat; 
    height: 57px; 
    padding: 0; 
    width: 282px; 
    font-size:12px; 
    color:#fff; 
	line-height: 1.4em;
} 

.tooltip-down { 
    display: none; 
    background:url('images/bubble-down.png') no-repeat; 
    height: 72px; 
    padding: 0; 
    width: 287px; 
    font-size:14px; 
    color:#fff; 
	line-height: 1.4em;
}

#portfolio_tooltip { 
	background:url('images/bubble-up.png') no-repeat;
    display: none; 
    height: 56px; 
    padding: 15px 0px 0px 0px; 
    width: 287px; 
    font-size:12px; 
    color:#fff; 
	line-height: 1.4em;
	text-align: center;
}

#new_portfolio_tooltip { 
    display: none; 
    height: 76px; 
    padding: 26px 0px 0px 0px; 
    width: 306px; 
    font-size:12px; 
    color:#fff; 
	line-height: 1.4em;
	text-align: center;
}

.tooltip-content {
	padding: 10px 20px;
} 

.tooltip-content-right {
	padding: 16px 35px;
	text-align: center;
}

.tooltip-content-down {
	padding: 27px 35px;
	text-align: center;
}
 
a.sidebar-trigger { 
    color:#ffffff;
	z-index: 98;
}

/*####################################################
MODAL
####################################################*/

/* the overlayed element */ 
.simple_overlay { 
     /* must be initially hidden */ 
    display:none; 
    /* place overlay on top of other elements */ 
    z-index:10000; 
    /* styling */    
    min-height:200px; 
    /* 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('images/close.png'); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px;
	z-index: 999;
}

/* styling for elements inside overlay */ 
.details { 
    position:relative; 
    font-size:12px; 
    color:#fff;
	padding: 10px;
}
 
.details h3 { 
    color:#aba; 
    font-size:15px; 
    margin:0 0 -10px 0; 
}