@import url(clear.css);
@import url(fonts.css);

/* global
--------------------------------------------------------------------------------*/

html, body {
	height:100%;
	}
body {
	background: #FFFFFF;
	color: #333333;
	font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;
	}
	
h1 {
	font: normal 3.6em/40px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	margin-bottom:40px;
	}
	
h1:first-letter {
	color:#A40000;
	}
	
h2 {
	clear:both;
	font: normal 2.8em/20px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	margin-bottom:20px;
	}
h2 span {
	color:#999
	}
h3, .article h2 {
	font: normal 2.2em/20px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	margin-bottom:20px;
	}
h4, .author, .twi .more {
	font: normal 1.8em/20px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
	margin-bottom:20px;
	}

a {
	color:#A40000;
	text-decoration:none
	}
a:hover {
	color:#000;
	border-bottom:1px solid #A40000
	}
img {
	vertical-align:middle
	}
p, ul {
	font-size:1.3em;
	margin-bottom:20px;
	line-height:20px
	}
ul ul {
	font-size:1em;
	}
code {
	color: #444;
	font:normal 14px/20px AndaleMonoRegular, monospace;
}
pre {
	padding: 9px 9px 9px 19px;
	background: #eee url(../img/code.gif) no-repeat;
	border: 1px solid #ccc;
	margin-bottom: 20px;
	font:normal 14px/20px AndaleMonoRegular, monospace;
	overflow:auto;
	
}
blockquote {
	padding: 10px 20px;
	background:#eee url(../img/bq.gif) no-repeat 0 50%;
}
blockquote p {margin:0;padding:10px 0}

cite,
blockquote {
	font-style: italic;
	color: #444;
}
li {
	list-style:none;
	}
.sep {
	height:20px;
	background:url(../img/separator.gif) no-repeat;
	clear:both;
	margin-bottom:40px;
	}


/* error
--------------------------------------------------------------------------------*/

#error h2 {
	font: normal 20em/165px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#ddd
	}
#error #main p {
	font: normal 1.8em/10px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#888
	}

/* sidebar
--------------------------------------------------------------------------------*/

#sidebar {
	width:100px;
	padding:0 20px;
	height:100%;
	min-height:390px;
	background:#a40000 url(../img/sidebar.jpg) no-repeat 50% 100%;
	position:fixed;
	top:0px;
	left:0;
	}
	#logo {
		width:100px;
		height:165px;
		background:url(../img/logo.gif) no-repeat 0 100%;
		text-indent:-100000%;
		display:block;
		padding-top:20px;
		margin-bottom:20px;
		border:none;
		}
	#menu {
		margin-top:20px;
		list-style:none;
		padding-bottom:20px;
		background:url(../img/sep1.gif) repeat-x 0 100%;
		}

		#menu a {
			display:block;
			text-indent:-100000%;
			background-image:url(../img/menu.gif);
			border:none;
			}

		#about {height:18px;background-position:0 0;}
		#work {height:25px;background-position:0 -18px}
		#blog {height:27px;background-position:0 -43px}
		#photo {height:15px;background-position:0 -70px}
		#about:hover {background-position:100% 0;}
		#work:hover {background-position:100% -18px}
		#blog:hover {background-position:100% -43px}
		#photo:hover {background-position:100% -70px}

	.chat {
		padding-bottom:16px;
		background:url(../img/sep1.gif) repeat-x 0 100%;
		}
		.chat span {
			height:17px;
			width:20px;
			float:left;
			background:url(../img/chat.gif) no-repeat;
			margin-right:5px;

			}
		.chat a {
			font: normal 1.6em/12px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
			color:#fff;
			text-transform:uppercase;
			display:inline-block;
			}
		.chat a:hover {
			color:#000
			}

	#foot {
		position:absolute;
		bottom:0;
		left:0;
		width:100px;
		padding:20px;
		font: normal 1.3em/13px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
		text-transform:uppercase;
		color:#fff;
		background:#000;
		border-top:1px solid #cd0000
		}

/* content
--------------------------------------------------------------------------------*/

#main {
	margin:0 0 0 160px;
	padding:20px 0 0 0;
	width:820px;
	}

/* portfolio
--------------------------------------------------------------------------------*/

.ws {padding-bottom:20px;}

.f-item {float:left;width:240px;margin: 0 20px 20px 0;position:relative;overflow:hidden;padding:9px; border:1px solid #ddd;}
.f-item h3 {text-transform:none;padding:0 10px;background:#000;color:#fff;position:absolute;width:220px;left:9px;bottom:0;margin-bottom:0;z-index:2;line-height:40px;border-bottom:9px solid #fff}
.f-item h3 a {color:#fff}
.f-item h3 a:hover {border:none}
.f-item img {padding-bottom:40px;width:240px;height:200px;}
.f-info {position:absolute;top:206px;left:9px;width:220px;height:43px;padding:10px;background:#A40000;z-index:1;color:#fff;overflow:hidden}
.f-info a {color:#fff}
.f-info a:hover {color:#000}
.f-info .more {position:absolute;bottom:0;left:0;padding:10px;margin:0;width:220px;color:#830000;}
.f-date {color:#fff;font: normal 2.6em 'CuprumFFURegular', Arial, Helvetica, sans-serif;margin-bottom:10px;}
.f-date span {color:#000;margin-left:-5px}

.folmenu {float:right;font: normal 2.2em/20px 'CuprumFFURegular', Arial, Helvetica, sans-serif;text-transform:uppercase;}
.folmenu li {float:left;list-style:none;padding:0 15px 0;background:none;border-right:1px solid #ccc;}

.folmenu li.last {padding:0 0 0 15px;border:none}




/* article
--------------------------------------------------------------------------------*/

.article li, .f-info li {padding-left:15px;background:url(../img/bull.gif) no-repeat 0 8px;}

.article {
	background:url(../img/sep2.gif) repeat-y 55px 0;
	margin-bottom:40px;
	position:relative;
	padding-left:75px;
	}
	.sum {}
		.more {
			font: normal 1.6em/20px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
			color: #999;
			}
	.a-info {
		width:35px;
		position:absolute;
		top:0;
		left:0;
		
		}
		.a-date {
			font: normal 1.8em/1em 'CuprumFFURegular', Arial, Helvetica, sans-serif;
			margin-bottom:10px;
			text-align:center
			}
			.a-date span {display:block;}
			.day {color:#444}
			.year {color:#999;}
			.ccount {
				width:35px;
				height:30px;
				background:url(../img/balon.gif) no-repeat 0 0;
				color:#fff;
				font: normal 1.7em/22px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
				text-align:center;
				display:block;
				text-decoration:none
				}
			.ccount:hover {
				background-position:0 100%;
				border:none;
				color:#fff
				}
	










.cover {float:left;margin:0 10px 16px 0;}
.cover img {width:100px;height:100px;border-bottom:3px solid #A40000;padding-bottom:1px}
.cover:hover img {border-bottom:3px solid #000;}
.gphot {float:left;margin:0 16px 16px 0}
.gphot a img {border-bottom:3px solid #A40000;padding-bottom:1px}
.gphot a:hover img {border-bottom:3px solid #000;}

/* comment
--------------------------------------------------------------------------------*/

.rline {
	position:relative;
	padding-left:54px;
	margin-bottom:40px;
	}
	.av {
		position:absolute;
		top:0;
		left:0;
		width:57px;
		background:url(../img/ar.gif) no-repeat 100% 26px;
		padding-bottom:10px;

		}
	.rbody {
		border-left:3px solid #A40000;
		background:#eee;
		padding:10px 20px
		}
		.rbody p {margin:20px 0 10px}
		.rbody .author {margin-top:10px;}

	.clink {
		position:absolute;
		right:20px;
		top:20px;
		color:#c8c8c8;
		font: normal 4em/40px 'CuprumFFURegular', Arial, Helvetica, sans-serif;
		}


/* make
--------------------------------------------------------------------------------*/

.i {width:35px;font: normal 3em/35px 'CuprumFFURegular', Arial, Helvetica, sans-serif;text-align:center;color:#fff;background:#A40000;display:block;}
.make {padding:20px;}
.make p {font: normal 2.2em/20px 'CuprumFFURegular', Arial, Helvetica, sans-serif;margin:0;text-transform:uppercase;}

/* hCard
--------------------------------------------------------------------------------*/

.hc {display:block;width:35px;height:35px;background:url(../img/hcard.gif) no-repeat 0 0;}
.hc span {display:none;}
.hc:hover {background-position:0 100%;border:none;}

.photo {margin-right:20px}
.vcard {padding:20px}
.vcard p {font: normal 1.6em/20px 'CuprumFFURegular', Arial, Helvetica, sans-serif;margin:0;text-transform:uppercase;overflow:hidden}
.vt {color:#999;width:120px;display:inline-block}

/* form
--------------------------------------------------------------------------------*/

.cform {margin:0 0 20px 55px;padding:20px;background:#eee;}
.ti input, textarea {padding:5px;width:300px;border:1px solid #ddd}
textarea {width:500px;height:148px;vertical-align:text-top;margin-right:5px}
.button {padding: 5px;font: normal 16px/1em 'CuprumFFURegular', Arial, Helvetica, sans-serif;color:#fff;background:#A40000;cursor:pointer;border:none}
.button:hover {background:#000;cursor:pointer}
.disabled, .disabled:hover {background:#ccc;cursor:auto;}



.nav {margin-left:55px;background:url(../img/sep2.gif) repeat-y 0 0;padding-left:20px;}
#main .pnav {background:#eee;font: normal 2em/40px 'CuprumFFURegular', Arial, Helvetica, sans-serif;margin-bottom:20px;text-align:center}
#main .pnav li {padding-left:0;background:none;display:inline;}
#main .pnav li a, .liselected {padding:0 4px}


/* helpers
--------------------------------------------------------------------------------*/

.black {color:#000;}
.gray {color:#666;}
.lgray {color:#999;}
.cl_n {clear:none}
.flr {float:right}
.fll {float:left}
.mr0 {margin-right:0}
.mr10 {margin-right:10px}
.mb0 {margin-bottom:0}
.mb20 {margin-bottom:20px}
.mt20 {margin-top:20px}
.mt40 {margin-top:40px}
.mb40 {margin-bottom:40px}
.twi .more {margin-top:10px}
.mb10, .tweetList {margin-bottom:10px}
.clear {clear:both;}
.mr20 {margin-right:20px}
.pb0 {padding-bottom:0}
.clfix {width:100%;overflow:hidden;}

/* twitter
--------------------------------------------------------------------------------*/

.twi {background:#eee url(../img/tw.gif) no-repeat 0 100%;padding: 10px 20px 10px 75px;margin-bottom:20px;}
.twi h3 {margin:10px 0 20px;}
.twi li, .twi p {margin:20px 0 10px;}
.twi li small {display:block;color:#666;}