/* CSS Document - Grayscale designispoetry.com theme */
/*=== Design & coding by Gabriel Agu (and so much for credits/copywriting) ===*/

body {
	margin: 0px;
	padding: 0px;
	background: #363636;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #555;
}

#container {
	margin: 0px auto;
	width: 600px;
	height: auto;
	padding: 0px 50px 0px 50px;
	background: #fff;
	display: block;
}
#container a {
	outline: none;
	color: #333;
	text-decoration: none;
}
#container a:hover {
	outline: none;
	color: #000;
	text-decoration: none;
}

#header {
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 600px;
	display: block;
}

#header .top {
	margin: 0px;
	padding: 0px;
	width: 600px;
	height: 50px;
	background:url(../img/headertop.jpg) no-repeat top left;
	border-bottom: 1px solid #ccc;
}

#header .topnav {
	margin: 0px;
	padding: 0px;
	height: 150px;
	width: 600px;
	background:url(../img/header_leftside.jpg) no-repeat;
}
#header .topnav ul {
	list-style-type: none;
	margin: 0px 0px 0px 300px;
	padding: 0px;
	width: 160px;
	height: 150px;
}
#header .topnav li {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width: 160px;
	height: 50px;
	display:block;
}
#header .topnav a {
	margin: 0px;
	padding: 0px;
	height: 50px;
	width: 160px;
	display: block;
}
#header .topnav a:hover {
	margin: 0px;
	padding: 0px;
	height: 50px;
	width: 160px;
	display: block;
}
#header .topnav a#home {
	background: url(../img/home_link_bg.jpg) no-repeat top left;
}
#header .topnav a#home:hover {
	background: url(../img/home_link_bg.jpg) no-repeat bottom left;
}
#header .topnav a#portfolio {
	background: url(../img/portfolio_link_bg.jpg) no-repeat top left;
}
#header .topnav a#portfolio:hover {
	background: url(../img/portfolio_link_bg.jpg) no-repeat bottom left;
}
#header .topnav a#contact {
	background: url(../img/contact_link_bg.jpg) no-repeat top left;
}
#header .topnav a#contact:hover {
	background: url(../img/contact_link_bg.jpg) no-repeat bottom left;
}

#content {
	margin: 0px;
	padding: 0px;
	background:url(../img/content_top.jpg) no-repeat top left;
	width: 600px;
	height: 300px;
	border-top: 1px solid #ccc;
}
#content h1 {
	font-size: 12px;
	font-weight:normal;
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
}
#content p {
	margin: 5px 0px 5px 0px;
	padding: 0px;
}
/*== links to portfolio categories ==*/
#content #portfolio_categories {
	margin: 125px 0px 0px 44px;
	padding: 0px;
	width: 520px;
	height: 45px;
}
#content #portfolio_categories a {
	text-decoration: none;
	height: 45px;
	float: left;
	margin: 0px;
	padding: 0px;
}
#content #portfolio_categories a:hover {
	text-decoration: none;
	height: 45px;
	float: left;
}
#content #portfolio_categories a#charcoal {
	background: url(../img/link_charcoal_bg.jpg) no-repeat top left;
	width: 165px;
}
#content #portfolio_categories a#charcoal:hover {
	background: url(../img/link_charcoal_bg.jpg) no-repeat bottom left;
	width: 165px;
}
#content #portfolio_categories a#vector {
	background: url(../img/link_vector_bg.jpg) no-repeat top left;
	width: 119px;
}
#content #portfolio_categories a#vector:hover {
	background: url(../img/link_vector_bg.jpg) no-repeat bottom left;
	width: 119px;
}
#content #portfolio_categories a#web {
	background: url(../img/link_web_bg.jpg) no-repeat top left;
	width: 228px;
}
#content #portfolio_categories a#web:hover {
	background: url(../img/link_web_bg.jpg) no-repeat bottom left;
	width: 228px;
}

/*== charcoal gallery ==*/
#content #charcoal_gallery {
	margin: 0px 0px 0px 0px;
	padding: 0px;
}
#content #charcoal_gallery a {
	margin: 0px 4px 4px 0px;
	padding: 0px;
	width: 70px;
	height: 102px;
	float: left;
}
#content #charcoal_gallery a:hover {
	margin: 0px 4px 4px 0px;
	padding: 0px;
	width: 70px;
	height: 102px;
	float: left;
}
#content #charcoal_gallery a#graf_01 {
	background: url(../img/charcoal/tn_graf_01.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_01:hover {
	background: url(../img/charcoal/tn_graf_01.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_02 {
	background: url(../img/charcoal/tn_graf_02.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_02:hover {
	background: url(../img/charcoal/tn_graf_02.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_03 {
	background: url(../img/charcoal/tn_graf_03.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_03:hover {
	background: url(../img/charcoal/tn_graf_03.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_04 {
	background: url(../img/charcoal/tn_graf_04.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_04:hover {
	background: url(../img/charcoal/tn_graf_04.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_05 {
	background: url(../img/charcoal/tn_graf_05.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_05:hover {
	background: url(../img/charcoal/tn_graf_05.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_06 {
	background: url(../img/charcoal/tn_graf_06.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_06:hover {
	background: url(../img/charcoal/tn_graf_06.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_07 {
	background: url(../img/charcoal/tn_graf_07.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_07:hover {
	background: url(../img/charcoal/tn_graf_07.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_08 {
	background: url(../img/charcoal/tn_graf_08.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_08:hover {
	background: url(../img/charcoal/tn_graf_08.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_09 {
	background: url(../img/charcoal/tn_graf_09.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_09:hover {
	background: url(../img/charcoal/tn_graf_09.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_10 {
	background: url(../img/charcoal/tn_graf_10.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_10:hover {
	background: url(../img/charcoal/tn_graf_10.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_11 {
	background: url(../img/charcoal/tn_graf_11.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_11:hover {
	background: url(../img/charcoal/tn_graf_11.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_12 {
	background: url(../img/charcoal/tn_graf_12.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_12:hover {
	background: url(../img/charcoal/tn_graf_12.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_13 {
	background: url(../img/charcoal/tn_graf_13.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_13:hover {
	background: url(../img/charcoal/tn_graf_13.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_14 {
	background: url(../img/charcoal/tn_graf_14.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_14:hover {
	background: url(../img/charcoal/tn_graf_14.jpg) no-repeat top right;
}
#content #charcoal_gallery a#graf_15 {
	background: url(../img/charcoal/tn_graf_15.jpg) no-repeat top left;
}
#content #charcoal_gallery a#graf_15:hover {
	background: url(../img/charcoal/tn_graf_15.jpg) no-repeat top right;
}

/*== vector graphics gallery*/
#content #vector_gallery {
	margin: 0px 0px 0px 0px;
	padding: 0px;
}
#content #vector_gallery a {
	margin: 0px 4px 4px 0px;
	padding: 0px;
	width: 70px;
	height: 102px;
	float: left;
}
#content #vector_gallery a:hover {
	margin: 0px 4px 4px 0px;
	padding: 0px;
	width: 70px;
	height: 102px;
	float: left;
}
#content #vector_gallery a#vector_01 {
	background: url(../img/vector/tn_vector_01.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_01:hover {
	background: url(../img/vector/tn_vector_01.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_02 {
	background: url(../img/vector/tn_vector_02.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_02:hover {
	background: url(../img/vector/tn_vector_02.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_03 {
	background: url(../img/vector/tn_vector_03.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_03:hover {
	background: url(../img/vector/tn_vector_03.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_04 {
	background: url(../img/vector/tn_vector_04.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_04:hover {
	background: url(../img/vector/tn_vector_04.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_05 {
	background: url(../img/vector/tn_vector_05.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_05:hover {
	background: url(../img/vector/tn_vector_05.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_06 {
	background: url(../img/vector/tn_vector_06.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_06:hover {
	background: url(../img/vector/tn_vector_06.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_07 {
	background: url(../img/vector/tn_vector_07.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_07:hover {
	background: url(../img/vector/tn_vector_07.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_08 {
	background: url(../img/vector/tn_vector_08.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_08:hover {
	background: url(../img/vector/tn_vector_08.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_09 {
	background: url(../img/vector/tn_vector_09.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_09:hover {
	background: url(../img/vector/tn_vector_09.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_10 {
	background: url(../img/vector/tn_vector_10.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_10:hover {
	background: url(../img/vector/tn_vector_10.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_11 {
	background: url(../img/vector/tn_vector_11.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_11:hover {
	background: url(../img/vector/tn_vector_11.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_12 {
	background: url(../img/vector/tn_vector_12.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_12:hover {
	background: url(../img/vector/tn_vector_12.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_13 {
	background: url(../img/vector/tn_vector_13.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_13:hover {
	background: url(../img/vector/tn_vector_13.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_14 {
	background: url(../img/vector/tn_vector_14.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_14:hover {
	background: url(../img/vector/tn_vector_14.jpg) no-repeat top right;
}
#content #vector_gallery a#vector_15 {
	background: url(../img/vector/tn_vector_15.jpg) no-repeat top left;
}
#content #vector_gallery a#vector_15:hover {
	background: url(../img/vector/tn_vector_15.jpg) no-repeat top right;
}

/*== web gallery ==*/
#content #web_gallery {
	margin: 0px 0px 0px 0px;
	padding: 0px;
}
#content #web_gallery a {
	margin: 0px 4px 4px 0px;
	padding: 0px;
	width: 68px;
	height: 100px;
	float: left;
	border: 1px solid #ccc;
}
#content #web_gallery a:hover {
	margin: 0px 4px 4px 0px;
	padding: 0px;
	width: 68px;
	height: 100px;
	float: left;
	border: 1px solid #ccc;
}
#content #web_gallery a#web_01 {
	background: url(../img/web/tn_01.jpg) no-repeat top left;
}
#content #web_gallery a#web_01:hover {
	background: url(../img/web/tn_01.jpg) no-repeat top right;
}
#content #web_gallery a#web_02 {
	background: url(../img/web/tn_02.jpg) no-repeat top left;
}
#content #web_gallery a#web_02:hover {
	background: url(../img/web/tn_02.jpg) no-repeat top right;
}
#content #web_gallery a#web_03 {
	background: url(../img/web/tn_03.jpg) no-repeat top left;
}
#content #web_gallery a#web_03:hover {
	background: url(../img/web/tn_03.jpg) no-repeat top right;
}
#content #web_gallery a#web_04 {
	background: url(../img/web/tn_04.jpg) no-repeat top left;
}
#content #web_gallery a#web_04:hover {
	background: url(../img/web/tn_04.jpg) no-repeat top right;
}
#content #web_gallery a#web_05 {
	background: url(../img/web/tn_05.jpg) no-repeat top left;
}
#content #web_gallery a#web_05:hover {
	background: url(../img/web/tn_05.jpg) no-repeat top right;
}
#content #web_gallery a#web_06 {
	background: url(../img/web/tn_06.jpg) no-repeat top left;
}
#content #web_gallery a#web_06:hover {
	background: url(../img/web/tn_06.jpg) no-repeat top right;
}
#content #web_gallery a#web_07 {
	background: url(../img/web/tn_07.jpg) no-repeat top left;
}
#content #web_gallery a#web_07:hover {
	background: url(../img/web/tn_07.jpg) no-repeat top right;
}
#content #web_gallery a#web_08 {
	background: url(../img/web/tn_08.jpg) no-repeat top left;
}
#content #web_gallery a#web_08:hover {
	background: url(../img/web/tn_08.jpg) no-repeat top right;
}
#content #web_gallery a#web_09 {
	background: url(../img/web/tn_09.jpg) no-repeat top left;
}
#content #web_gallery a#web_09:hover {
	background: url(../img/web/tn_09.jpg) no-repeat top right;
}
#content #web_gallery a#web_10 {
	background: url(../img/web/tn_10.jpg) no-repeat top left;
}
#content #web_gallery a#web_10:hover {
	background: url(../img/web/tn_10.jpg) no-repeat top right;
}


/*== contact page ==*/
#content #contact {
	margin: 0px;
	padding: 0px;
}

#content #contact .input_field {
	margin: 0px;
	padding: 0px;
	width: 150px;
	height: 16px;
	border: 1px solid #ccc;
	background:#f2f2f2;
}
#content #contact .input_textarea {
	margin: 0px;
	padding: 0px;
	width: 150px;
	height: 40px;
	border: 1px solid #ccc;
	background:#f2f2f2;
}
#content #contact .label {
	width:50px;
	display: block;
	height: 14px;
	float: left;
}
#content #contact .input_field2 {
	margin: 0px;
	padding: 0px;
	border: 1px solid #fff;
	width: 70px;
	height: 25px;
	display: block;
	background:url(../img/send_img.jpg) no-repeat top left;
	cursor:pointer;
}
#content #contact .error {
	font-family: Tahoma;
	font-size: 8pt;
	color: red;
	margin-left: 80px;
	display:none;
}
#content .underl a {
	border-bottom: 1px dotted #ccc!important;
}
#content .underl a:hover {
	border-bottom: 1px dotted #000!important;
}

#bottomnav {
	margin: 0px 0px 30px 0px;
	padding: 50px 0px 0px 0px;
	width: 600px;
	height: 100px;
	background: url(../img/bottomnav_header.jpg) no-repeat top left;
	overflow:hidden;
}
#bottomnav ul {
	margin: 0px 0px 0px 2px;
	padding: 0px;
	list-style-type: none;
	float: left;
	width: 220px;
}
#bottomnav ul#recommended {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style-type: none;
	float: left;
	width: 275px;
}
#bottomnav ul#resources {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style-type: none;
	float: left;
	width: 100px;
}
#bottomnav li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	line-height: 20px;
}
#bottomnav a {
	text-decoration: none;
	padding: 0px 5px 0px 5px;
	line-height: 20px;
}
#bottomnav a:hover {
	background: #000;
	color: #999;
	text-decoration: none;
	padding: 0px 5px 0px 5px;
	line-height: 20px;
}

#footer {
	margin: 0px;
	padding: 0px;
	height: 50px;
	text-transform:uppercase;
	border-top: 1px solid #ccc;
}
#footer p {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
}
#footer .links {
	float: right;
}



.cleaner {
	clear: both;
}