/*
Theme Name: Vexl's OnLine Portfolio
Theme URI: http://www.vexl.net
Description: Theme For Vexl's OnLine Portfolio
Author: Sasa Foric
Author URI: http://www.vexl.net
Version: 2.0
*/


/**************** MAIN ****************/
* {
	font-family: Arial;
	font-size: 12px;
	color: rgb(51,36,36);
	margin: 0px;
	border: 0px;
	padding: 0px;
}

img {
	border: 0px;
}

br {
	line-height: 12px;
}

body {
	background-color: rgb(0,0,0);
	background-image: url('images/background.jpg');
	background-position: center bottom;
	background-attachment: fixed;
}

a {
	color: rgb(0,0,0);
	text-decoration: none;
}

a:hover {
	color: rgb(0,0,0);
	text-decoration: underline;
}

#container {
	position: relative;
	width: 918px;
	background-color: rgb(255,255,255);
	border-left: 1px solid rgb(0,0,0);
	border-right: 1px solid rgb(0,0,0);
	margin: 0px auto 0px auto;
}
/**************** / MAIN ****************/


/**************** HEADER ****************/
#header {
	width: 918px;
	height: 300px;
}

#header .menu {
	width: 918px;
	height: 56px;
	background-color: rgb(0,0,0);
}

#header .menu .menu-holder {
	width: 918px;
	height: 50px;
	border-top: 3px solid rgb(0,0,0);
	border-bottom: 3px solid rgb(0,0,0);
}

#header .menu .menu-holder li {
	float: left;
	list-style: none;
}

#header .menu .menu-holder a {
	display: block;
	height: 50px;
}

#header .menu .menu-holder .blog-menu a {
	width: 183px;
	background: url('images/menu.gif') 0px 0px;
}

#header .menu .menu-holder .blog-menu a:hover {
	background: url('images/menu.gif') 0px -50px;
}

#header .menu .menu-holder .games-menu a {
	width: 184px;
	background: url('images/menu.gif') -183px 0px;
}

#header .menu .menu-holder .games-menu a:hover {
	background: url('images/menu.gif') -183px -50px;
}

#header .menu .menu-holder .webdesign-menu a {
	width: 184px;
	background: url('images/menu.gif') -367px 0px;
}

#header .menu .menu-holder .webdesign-menu a:hover {
	background: url('images/menu.gif') -367px -50px;
}

#header .menu .menu-holder .graphicdesign-menu a {
	width: 184px;
	background: url('images/menu.gif') -551px 0px;
}

#header .menu .menu-holder .graphicdesign-menu a:hover {
	background: url('images/menu.gif') -551px -50px;
}

#header .menu .menu-holder .vexels-menu a {
	width: 183px;
	background: url('images/menu.gif') -735px 0px;
}

#header .menu .menu-holder .vexels-menu a:hover {
	background: url('images/menu.gif') -735px -50px;
}

#header .image {
	width: 918px;
	height: 244px;
	background-image: url('images/image.jpg');
}
/**************** / HEADER ****************/


/**************** CONTAIN ****************/
#contain {
	width: 918px;
	background-image: url('images/gradient.gif');
	background-repeat: no-repeat;
}
/**************** / CONTAIN ****************/


/**************** CONTENT ****************/
#content {
	float: left;
	width: 548px;
	padding: 16px 20px 0px 20px;
}

h1 {
	clear: left;
	width: 100%;
	height: 26px;
	font-family: Arial;
	font-size: 22px;
	color: rgb(80,20,20);
	border-bottom: 2px solid rgb(223,229,231);
}

h1 a {
	font-family: Arial;
	font-size: 22px;
	color: rgb(80,20,20);
	text-decoration: none;
}

h1 a:hover {
	color: rgb(205,0,0);
	text-decoration: none;
}

.details {
	float: left;
	width: 70%;
	height: 30px;
	font-size: 11px;
	color: rgb(95,73,73);
	vertical-align: middle;
	padding: 8px 0px 0px 0px;
}

.details a {
	font-size: 11px;
	color: rgb(95,73,73);
	text-decoration: none;
}

.details a:hover {
	color: rgb(51,36,36);
	text-decoration: underline;
}

.details .bold {
	font-size: 11px;
	font-weight: bold;
	color: rgb(36,57,51);
}

.details img {
	padding: 0px 10px 0px 0px;
	vertical-align: middle;
}

.comments {
	display: none; /*comments hidden*/
	float: left;
	width: 30%;
	height: 30px;
	font-size: 11px;
	text-align: right;
	color: rgb(230,26,26);
	padding: 8px 0px 0px 0px;
}

.comments img {
	padding: 0px 10px 0px 0px;
	vertical-align: middle;
}

.comments a {
	font-size: 11px;
	color: rgb(230,26,26);
	text-decoration: none;
}

.comments a:hover {
	color: rgb(51,36,36);
	text-decoration: none;
}

.news {
	clear: left;
	position: relative;
	width: 548px;
	text-align: justify;
	line-height: 20px;
	padding: 0px 0px 20px 0px;
}

.news p {
	margin: 0px 0px 10px 0px;
}

.news .date {
	position: absolute;
	top: -40px;
	left: -57px;
	width: 36px;
	height: 50px;
	background-image: url('images/date.png');
}

.news .date .text {
	width: 32px;
	text-align: center;
	font-size: 11px;
	line-height: 14px;
	font-weight: bold;
	color: rgb(108,51,51);
	padding: 4px 2px 0px 2px;
}

.news .top-image {
	width: 120px;
	height: 120px;
	border: 5px solid rgb(223,229,231);
	margin: 0px 10px 0px 0px;
}

.news .image {
	border: 5px solid rgb(223,229,231);
}

.news a img {
	display: block;
	border: 5px solid rgb(223,229,231);
}

.news a:hover img {
	border: 5px solid rgb(218,49,49);
}

.portfolio {
	clear: left;
	width: 548px;
	height: 110px;
	line-height: 20px;
	padding: 20px 0px 0px 0px;
}

.portfolio .portfolio-image {
	width: 300px;
	height: 80px;
	border: 5px solid rgb(223,229,231);
	margin: 0px 10px 0px 0px;
}

.portfolio code {
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: rgb(230,26,26);
	background-color: rgb(255,255,255);
}

.portfolio a img {
	display: block;
	width: 300px;
	height: 80px;
	border: 5px solid rgb(223,229,231);
}

.portfolio a:hover img {
	border: 5px solid rgb(218,49,49);
}

.about-error {
	clear: left;
	width: 548px;
	text-align: justify;
	line-height: 20px;
	padding: 10px 0px 30px 0px;
}

code {
	font-style: italic;
	background-color: rgb(242,226,226);
}

.www-arrow {
	padding: 0px 5px 1px 0px;
}


/*********** comments ***********/
.comment-status {
	font-style: italic;
}

.comment-list {
	width: 538px;
	padding: 10px 0px 0px 10px;
}

.comment-list .comment {
	position: relative;
	text-align: left;
}

.note {
	font-size: 10px;
	font-style: italic;
	color: rgb(95,73,73);
}

.comment-list .comment .count {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 50px;
	height: 20px;
	font-size: 15px;
	color: rgb(190,190,190);
}

.comment-list .comment .signed {
	color: rgb(189,24,24);
	padding: 0px 0px 5px 0px;
}

img.avatar {
	width: 50px;
	height: 50px;
}

.comment-list .comment .image-avatar {
	float: left;
	width: 68px;
	padding: 5px 0px 10px 0px;
}

.comment-list .comment .image-avatar img {
	border: 2px solid rgb(223,229,231);
}

.comment-list .comment .image-avatar a img {
	display: block;
	border: 2px solid rgb(223,229,231);
}

.comment-list .comment .image-avatar a:hover img {
	border: 2px solid rgb(218,49,49);
}

.comment-list .comment .comment-text {
	float: left;
	width: 400px;
}

.comment-list .comment .comment-text p {
	font-style: italic;
	color: rgb(95,73,73);
}

.comment .comment-portfolio-line {
	clear: left;
}

.comment-form {
	font-size: 12px;
	background-color: rgb(255,255,255);
	background-image: url('images/form-gradient.gif');
	background-repeat: repeat-x;
	border: 1px solid rgb(204,204,205);
	padding: 2px 2px 2px 2px;
}

.responses {
	font-weight: bold;
	color: rgb(189,24,24);
}

.comment-buttons {
	float: left;
	height: 22px;
}
/*********** / comments ***********/
/**************** / CONTENT ****************/


/**************** SIDEBAR ****************/
#sidebar {
	float: left;
	width: 310px;
	padding: 20px 20px 0px 0px;
}

.title {
	clear: left;
	width: 100%;
	height: 22px;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	line-height: 16px;
	color: rgb(189,24,24);
	border-bottom: 2px solid rgb(223,229,231);
}

.title1 {
	clear: left;
	width: 100%;
	height: 22px;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	line-height: 14px;
	color: rgb(189,24,24);
}

.blog {
	float: left;
	width: 145px;
	height: 105px;
}

.blog-spacer {
	float: left;
	width: 20px;
	height: 105px;
}

.link {
	width: 145px;
	height: 11px;
	padding: 10px 0px 0px 0px;
}

.link img {
	padding: 0px 10px 0px 0px;
}

.link a {
	color: rgb(51,36,36);
	text-decoration: none;
}

.link a:hover {
	color: rgb(230,26,26);
	text-decoration: none;
}

.category {
	float: left;
	width: 145px;
	height: 135px;
	padding: 0px 20px 0px 0px;
}

.links {
	float: left;
	width: 145px;
	height: 135px;
}

.button a {
	display: block;
	width: 145px;
	height: 22px;
	line-height: 20px;
	color: rgb(230,26,26);
	border-bottom: 1px solid rgb(223,229,231);
}

.button a:hover {
	text-decoration: none;
	background-color: rgb(251,245,245);
}

.twitter-quote {
	clear: left;
	position: relative;
	width: 310px;
}

.twitter-quote .follow {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 80px;
	height: 24px;
	text-align: right;
}

.twitter-quote .follow a {
	font-weight: bold;
	text-decoration: underline;
}

.twitter-quote .follow a:hover {
	text-decoration: none;
}

.twitter-quote .image {
	float: left;
	width: 50px;
	padding: 20px 0px 0px 0px;
}

.twitter-quote .text {
	float: left;
	width: 260px;
	color: rgb(95,73,73);
	line-height: 19px;
	padding: 15px 0px 20px 0px;
}

.twitter-quote .text img {
	line-height: 11px;
	padding: 0px 7px 0px 0px;
}

.twitter-quote .text ul {
	display: block;
	list-style-type: none;
}

.twitter-quote .text ul li {
	padding: 0px 0px 5px 0px;
}

.twitter-quote .text ul li span {
	display: block;
	color: rgb(95,73,73);
	list-style-type: none;
}

.twitter-quote .text ul li a {
	display: block;
	font-size: 11px;
	line-height: 11px;
	color: rgb(14,67,116);
	text-decoration: none;
}

.twitter-quote .text ul li a:hover {
	display: block;
	font-size: 11px;
	line-height: 11px;
	color: rgb(51,36,36);
	text-decoration: none;
	list-style-type: none;
}

.twitter-quote .right {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 120px;
	height: 24px;
	font-size: 11px;
	text-align: right;
	color: rgb(95,73,73);
}

.twitter-quote .right .date {
	font-size: 11px;
	color: rgb(230,26,26);
}

.featured {
	width: 310px;
	height: 90px;
	padding: 0px 0px 10px 0px;
}

.featured img {
	width: 300px;
	height: 80px;
	border: 5px solid rgb(223,229,231);
}

.featured a img {
	display: block;
	border: 5px solid rgb(223,229,231);
}

.featured a:hover img {
	border: 5px solid rgb(218,49,49);
}

.advertising {
	width: 300px;
	height: 250px;
	border: 5px solid rgb(223,229,231);
}

.tag-cloud {
	width: 310px;
	padding: 10px 0px 20px 0px;

}

.tag-cloud a {
	font-family: Arial;
	color: rgb(95,73,73);;
}

.tag-cloud a:hover {
	font-family: Arial;
	color: rgb(0,0,0);
	text-decoration: underline;
}

.follows {
	padding: 10px 0 0 0;
	margin: 0 0 50px 0;
}

.validation {
	clear: left;
	width: 310px;
	height: 15px;
	text-align: right;
	margin: 0 0 30px 0;
}

.author {
	position: absolute;
	top: 214px;
	right: -23px;
	width: 22px;
	height: 86px;
}
/**************** / SIDEBAR ****************/