@charset "utf-8";

/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
body{font:13px/1.5 Arial, Helvetica, sans-serif;}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:20px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:square}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}

.clear { clear: both }
a { color: #F63 }

body { background:#000000 url(../images/bg.jpg) repeat-x; color: #ffffff }
h1, h2 { margin-bottom: 0px }
#outer_container { width: 960px; margin: 0 auto; position: relative}
#page_title, h1 { font-size: 28px; padding: 4px 0 2px 0px; text-transform:uppercase}
#page_info { font-size: 14px; padding: 4px 0 12px 10px}
#site_name { font-size: 50px; margin: 20px 0 }
/* TOP NAV */

#chikita { width: 550px; margin: 10px auto }
#top_nav { border-top: 1px dotted #333333;  border-bottom: 1px dotted #333333;  color: #ffffff; padding: 8px 0; margin: 0 0 0 0 }
	#top_nav ul { margin: 0; padding: 0 }
	#top_nav ul li{	display: inline; background: url(../images/navigation_dot.png) no-repeat; padding-left: 20px; padding-right: 12px; color: #313131; }
	#top_nav ul a { color: #ffffff; text-decoration:none }
	#top_nav ul a.selected { color: #FFFF66 }
	#top_nav ul li.first{ background: none; padding-left: 0px;}

#left_col {	/*border:1px solid #ff0000; */ width: 610px; display: inline-block; float:left; margin: 0 10px 0 0; position: relative }
#right_col { width: 340px; display: inline-block; float:left; }

#right_col .col1 { width: 160px; float:left; margin: 0 10px }
#right_col .col2 { width: 160px; float:left;  }
#right_col .block { padding: 8px; }
	
/* PORTFOLIO */
#portfolio { position: relative; border-bottom: 1px dotted #333333; padding: 0 0 16px 0; margin: 0 0 15px 0}
.cell { position: relative; height: 149px; width: 236px; display: block; float: left;margin: 0 0 4px 4px; overflow: hidden}
.cell img  { border: 1px solid #333333}
.animate { }



.cell .caption {
	width:236px;
	height:30px;
	background:#000;
	color:#fff;
		
	/* fix it at the bottom */
	position:absolute;
	bottom:-1px; /* fix IE issue */
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=70);    /* ie  */
	-moz-opacity:0.7;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.7;    /* for really really old safari */  
	opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.cell .caption a {
	text-decoration:none;
	color:#fff;
	font-size:12px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
	font-weight: bold;
}

/* BLOG */

.blog_post {padding: 10px 0 30px 0; margin: 0 0 20px 0; position: relative; border-bottom: 1px dotted #333333}
	.blog_post .title, h1 { font-size: 28px; text-transform: uppercase  }
	.blog_post .meta { font-size: 10px; color: #FFFF66; margin-bottom: 4px} 
	.blog_post a { color: #F63 }
	.blog_post .title a { color:#FFFFFF; text-decoration: none; }
	.blog_post .title a:hover { color:#F63; text-decoration: none; }
.blog_post:first-child { padding-top: 0px; }
.blog_post .share { text-align: center; margin-bottom: 10px;}


.blog_col { display:inline-block; float:left; width: 260px; margin-right: 45px}
.blog_col .title { font-size: 22px }


/* ABOUT */
.about { padding: 10px; margin: 0 0 10px 0; position: relative; border-bottom: 1px dotted #333333 }



/* CONTACT FORM */

/* FORMS ================================================================ */

#form_container { display: none; }

input, select, textarea {
	font-size: 14px; padding: 4px; border: 1px solid #CCCCCC;
	color: #434343;
}



textarea { width: 400px; height: 200px }

input.checkbox {
	border: 0px;
}

.form_row {
	padding: 16px 0;
	border-bottom: 1px dotted #CCCCCC;
}

.form_label {
 	float:left;
	width: 150px;
	font-size: 14px;
}

.form_input {
	float: left;
}

.form_input input[type=text]{ width: 400px}

.form_error {
	background: #FFFFCC url(../images/icons/exclamation.png) no-repeat;
	background-position: 10px 50%;
	color: #FF0000;
	padding: 10px 30px; 
	line-height: 1.6em;
	border: 1px solid red;
	margin: 10px 0;
}


/* FOOTER */
#footer { padding: 8px 0px; }


/*Lifestream*/

#mycarousel {
	height:415px;
	overflow:hidden;
	margin:5px 0 20px 0;
	}

#mycarousel li {
	margin:0;
	padding:0;
	}

#mycarousel li {
	font-size:0.9em;
	padding-bottom:14px;
	line-height:145%;
	padding-left:26px;
	line-height:110%;
	}

#mycarousel li.date  {
	text-transform:uppercase;
	font:.65em 'Lucida Grande','Lucida Sans Unicode',Arial;
	color:#a57f88;
	letter-spacing:0.2em;
	padding:0 0 7px 0;
	}

li.twitter {
	background:url(../images/lifestream/twitter.png) no-repeat;
	}

li.delicious {
	background:url(../images/lifestream/delicious.png) no-repeat;
	}		

li.flickr {
	background:url(../images/lifestream/flickr.png) no-repeat;
	}		

li.lastfm {
	background:url(../images/lifestream/lastfm.png) no-repeat;
	}

li.facebook {
	background:url(../images/streamicon_facebook.gif) no-repeat;
	}

li.goodreads {
	background:url(../images/streamicon_goodreads.gif) no-repeat;
	}

li.magnolia {
	background:url(../images/streamicon_magnolia.gif) no-repeat;
	}

li.netflix {
	background:url(../images/streamicon_netflix.gif) no-repeat;
	}

li.pownce {
	background:url(../images/streamicon_pownce.gif) no-repeat;
	}
				
#mycarousel a, #mycarousel a:visited {
	color:#938f83;
	font-size:0.75em;
	}	
		
#item-1 a, #item-1 a:visited {
	font-size:1em;
	color:#f2f0e9;
	}
	
#item-2 a, #item-2 a:visited {
	color:#e7e4d8;
	font-size:0.9em;
	}	

#item-3 a, #item-3 a:visited {
	color:#ccc8bc;
	font-size:0.9em;
	}	

#item-4 a, #item-4 a:visited {
	color:#afaba0;
	font-size:0.75em;
	}	

#mycarousel a:hover, #mycarousel a:active {
	text-decoration:underline;
	}	

#mycarousel img {
	height:160px;
	padding:3px;
	border:1px solid #4f383d;
	margin:0 13px 7px 0;
	display:block;
	}
	
	
	
	
	
	
	/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 260px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}




.jcarousel-skin-tango .jcarousel-container {
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    height: 415px;
    padding: 0px 0px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
	width:290px;
    height: 380px;
	padding-right:20px
}

.jcarousel-skin-tango .jcarousel-item {
	height:300px;
    height: auto;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}



/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    top: -34px;
    left: 250px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../images/next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: -33px;
    left: 225px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../images/prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

/* Ad spaces */
.large_ad { text-align: center; margin: 20px 0 }



/* CONTACT FORM */
em.error {
  background:url("../images/chk_off.png") no-repeat 0px 0px;
  padding-left: 16px;
  margin-top: 4px;
  display: block;
}
span.error {
  background:url("../images/chk_off.png") no-repeat 0px 0px;
  padding-left: 18px;
  margin: 4px 0 0 0px;
  display: inline-block;
}
em.success {
  background:url("../images/chk_on.png") no-repeat 0px 0px;
  padding-left: 16px;
  margin-top: 4px;
  display: block;
}
#warning { display: none;  }