@charset "UTF-8";

/*============================================================
 Background Styles
============================================================*/

body {
	background: #0b0b0b url(../images/nav_slice.gif) repeat-x 0 145px;
	text-align: center; }

.wrapper {
	position: relative;
	width: 100%;
	text-align: left;
	margin-right: auto;
	margin-bottom: -80px;
	margin-left: auto; }

#content {
	position: relative;
	width: 960px;
	margin: 0 auto 0; }
	
/*============================================================
 Header Styles
============================================================*/
	
#logo {
	background-image: url(../images/logo.gif);
	background-repeat: no-repeat;
	height: 96px;
	width: 306px;
	float: left;
	margin-top: 16px;
	margin-left: 8px; }
	
.title {
	width: 145px;
	float: right;
	margin-top: 65px;
	margin-right: 8px; }
	
.title p {
	color: #6e6e6e;
	font-size: 15px;
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	line-height: 16px;
	text-decoration: none;
	margin: 0; }
	
/*============================================================
 Navigation
============================================================*/

.menu {
	position: relative;
	top: 33px;
	left: -8px;
	z-index: 50;
	float: right; }

.menu li {
	display: inline;
	float: left;
	width: auto;
	padding-left: 14px;
	list-style-type: none; }
	
.menu li.home a {
	background-image: url(../images/home_button.gif);
	background-repeat: no-repeat;
	display: block;
	width: 146px;
	height: 32px; }
	
.menu li.projects a {
	background-image: url(../images/projects_button.gif);
	background-repeat: no-repeat;
	display: block;
	width: 146px;
	height: 32px; }
	
.menu li.profile a {
	background-image: url(../images/profile_button.gif);
	background-repeat: no-repeat;
	display: block;
	width: 146px;
	height: 32px; }
	
.menu li.shop a {
	background-image: url(../images/shop_button.gif);
	background-repeat: no-repeat;
	display: block;
	width: 146px;
	height: 32px; }
	
.menu li.contact a {
	background-image: url(../images/contact_button.gif);
	background-repeat: no-repeat;
	display: block;
	width: 146px;
	height: 32px; }

.menu a.selected, .menu a:hover {
	background-position: 0 -32px;  }
	
/*============================================================
 Index Page Styles
============================================================*/

#feature {
	position: relative;
	top: 96px;
	left: 169px;
	height: 208px;
	width: 628px;
	float: left;
	margin: 0; }
	
.index_title {
	position: relative;
	top: 144px;
	height: 32px;
	width: 306px;
	clear: both;
	margin: 416px 0 0 169px; }
	
.index_title h1 {
	color: #bf1e2f;
	font-size: 21px;
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	line-height: 21px;
	text-decoration: none;
	margin: 0; }
	
#index_text {
	float: left;
	width: 644px;
	margin: 112px 0 0 169px;
	padding: 0; }
	
#index_columns {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none; }

.column {
	float: left;
	width: 306px;
	margin: 0;
	padding-top: 16px;
	padding-right: 16px; }
	
#index_text p {
	color: #6e6e6e;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none;
	margin: 0;
	padding-top: 16px;
	padding-bottom: 64px; }
	
#index_text p span {
	color: #bf1e2f;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none;
	margin: 0;
	padding-top: 16px; }
	
#index_text a:link {
	color: #6e6e6e;
	font-family: georgia;
	font-style: inherit;
	text-decoration: none;
	border-bottom: 1px dotted #6e6e6e; }
	
#index_text a:visited {
	color: #6e6e6e;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none; }
	
#index_text a:hover {
	color: #e9eaeb;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none;
	border-bottom: 1px dotted #e9eaeb; }
	
#index_text dfn {
	color: #9e9e9e;
	font-size: 14px;
	font-family: georgia;
	cursor: help;
	font-style: italic;
	line-height: 16px; }
	
/*============================================================
 Carousel Styles
============================================================*/

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */

.jcarousel-container {
	position: relative;
	top: 96px;
	left: 169px; }

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

.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: 628px;
    height: 208px; }
		
.jcarousel-skin-tango .jcarousel-container {
	background: #0b0b0b; }

.jcarousel-skin-tango .jcarousel-container-horizontal {
	width: 628px;
	float: left; }

.jcarousel-skin-tango .jcarousel-container-vertical {
	width: 75px;
	height: 208px;
	float: left; }

.jcarousel-skin-tango .jcarousel-clip-horizontal {
	width: 628px;
	height: 208px; }

.jcarousel-skin-tango .jcarousel-clip-vertical {
	width:  75px;
	height: 208px; }

.jcarousel-skin-tango .jcarousel-item {
	width: 628px;
	height: 208px; }

.jcarousel-skin-tango .jcarousel-item-horizontal {
	margin-right: 10px; }

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

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

/**
 *  Horizontal Buttons
 */

.jcarousel-skin-tango .jcarousel-next-horizontal {
	position: absolute;
	top: 85px;
	right: -55px;
	width: 34px;
	height: 34px;
	cursor: pointer;
	background: url(../images/arrow-next.jpg) no-repeat;
	margin: 0; }

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
	background-position: -34px 0px; }

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

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

.jcarousel-skin-tango .jcarousel-prev-horizontal {
	position: absolute;
	top: 85px;
	left: -55px;
	width: 34px;
	height: 34px;
	cursor: pointer;
	background: url(../images/arrow-prev.jpg) no-repeat; }

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
	background-position: -34px 0; }

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
	background-position: 0 0; }

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
	cursor: default;
	background-position: -68px 0; }
	
/*============================================================
 Profile Page Styles
============================================================*/

.profile_title {
	height: 32px;
	width: 306px;
	clear: both;
	margin: 112px 0 0 491px; }
	
.profile_title h1 {
	color: #bf1e2f;
	font-size: 21px;
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	line-height: 21px;
	text-decoration: none;
	margin: 0; }
	
#profile_text {
	width: 644px;
	float: left;
	margin: -32px 0 0 169px;
	padding: 0; }
	
#profile_columns {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none; }

.column {
	float: left;
	width: 306px;
	padding-top: 16px;
	padding-right: 16px; }
	
#profile_text p {
	color: #6e6e6e;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none;
	margin: 0;
	padding-top: 16px;
	padding-bottom: 64px; }
	
#profile_text p span {
	color: #bf1e2f;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none;
	margin: 0;
	padding-top: 16px; }
	
#profile_text a:link {
	color: #6e6e6e;
	font-family: georgia;
	font-style: inherit;
	text-decoration: none;
	border-bottom: 1px dotted #6e6e6e; }
	
#profile_text a:visited {
	color: #6e6e6e;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none; }
	
#profile_text a:hover {
	color: #e9eaeb;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none;
	border-bottom: 1px dotted #e9eaeb; }
	
#profile_text dfn {
	color: #9e9e9e;
	font-size: 14px;
	font-family: georgia;
	cursor: help;
	font-style: italic;
	line-height: 16px; }
	
/*============================================================
 Portfolio Page Styles
============================================================*/

.portfolio_subject {
	position: relative;
	top: 96px;
	left: 8px;
	width: 145px;
	clear: both; }
	
.portfolio_subject h1 {
	color: #bf1e2f;
	font-size: 40px;
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	line-height: 33px;
	text-decoration: none;
	margin: 0; }
	
.portfolio_content {
	position: relative;
	left: 129px;
	width: 692px;
	overflow: hidden;
	float: left;
	clear: both;
	margin: 30px 0 0; }

.portfilio_content ul {
	float: left;
	list-style-type: none;
	display: inline; }

.portfolio_content li {
	float: left;
	position: relative;
	width: 290px;
	height: 208px;
	overflow: hidden;
	margin: 0 16px 16px 0;
	padding-right: 16px; }

.portfolio_content li img {
	width: 145px;
	height: 208px; }
	
.portfolio_content li div {
	text-align: left; }

.portfolio_content li h3 {
	color: #bf1e2f;
	margin: -208px 0 0 161px;
	font-size: 16px;
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	line-height: 16px;
	padding-bottom: 16px; }

.portfolio_content li p {
	color: #6e6e6e;
	font-family: georgia;
	font-size: 14px;
	line-height: 16px;
	margin: 0 0 0 161px; }
	
.portfolio_content li:hover {
	background-color: #292929; }
	
.portfolio_content li:hover h3 {
	color: #e9eaeb;
	text-decoration: none; }

.portfolio_content li:hover p {
	color: #bf1e2f;
	text-decoration: none; }
	
#clear {
	width: 145px;
	height: 64px;
	clear: both; }
	
/*============================================================
 Contact Page Styles
============================================================*/
	
.contact_title {
	height: 32px;
	width: 306px;
	clear: both;
	margin-left: 169px;
	padding-top: 96px; }
	
.contact_title h1 {
	color: #bf1e2f;
	font-size: 21px;
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	line-height: 21px;
	text-decoration: none;
	margin: 0; }
	
	
#contact_text {
	float: left;
	width: 644px;
	margin-top: -32px;
	margin-left: 169px; }	

#contact_columns {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none; }

.column {
	float: left;
	width: 306px;
	padding-top: 16px;
	padding-right: 16px; }
	
#contact_text p {
	color: #6e6e6e;
	font-size: 14px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none;
	margin: 0;
	padding-top: 16px; }
	
#contact_text p span {
	color: #bf1e2f;
	font-size: 21px;
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	line-height: 16px;
	text-decoration: none;
	margin: 0; }
	
/*============================================================
 Contact Form Styles
============================================================*/

#contact_form {
	position: relative;
	top: 64px;
	left: 130px;
	width: 682px;
	height: 400px;
	z-index: 10;
	clear: both;
	margin-bottom: 20px; }

.form {
	padding-bottom: 50px; }
	
.form label {
	color: #bf1e2f;
	font-size: 21px;
	font-family: georgia;
	font-style: italic;
	text-decoration: none;
	padding: 0;
	margin: 0;
	float: left;
	width: 160px; }

.form ul li {
	list-style: none;
	display: inline; }

#name, #email, #message { /* Contact form fields styles */
	color: #6e6e6e;
	font-family: helvetica, arial, sans-serif;
	font-size: 14px;
	padding: 0;
	margin: 15px 0 15px 10px;
	border-style: none;
	display: block; }
	
#name, #email {
	width: 470px;
	height: 32px;
	background: url(../images/fields.gif);
	padding-left: 10px; }
		
#message {
	width: 470px;
	height: 198px;
	overflow: auto;
	padding: 10px 3px 3px 8px;
	background: url(../images/message.gif); }
	
#name:focus, #email:focus {
	background: url(../images/fields_focus.gif); }
	
#message:focus {
	background: url(../images/message_focus.gif);
		}
	
/* Styles for the buttons "send" and "reset" in the contact form */

.button {
	font-size: 14px;
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	background: url(../images/send_reset.png);
	padding: 3px;
	width: 72px;
	height: 32px;
	border: none;
	margin-left: 15px;
	float: right; }
	
.button:hover {
	color: #FFFFFE;
	background: url(../images/send_reset_hover2.png); }

.message {
	display: none; }
	
.contact ul {
	list-style-type: none; }
		
.contact li {
	list-style-type: none; }
	
.contact li.special {
	display: none; }
	
/* Contact form styling - Messages displayed when an email is sent */

#alert {
	margin-bottom: 0px;
	padding-bottom: 14px; }
	
#alert li {
	padding: 7px; }
	
.error {
	background-color: #feded9;
	border: #a8130d solid 1px;
	color: #a40802; }
	
.sent {
	background-color: #ddeec1;
	border: #5a6f34 solid 1px;
	color: #53682b; }
	
/*============================================================
 Footer Styles
============================================================*/

.footer {
	position: relative;
	width: 100%;
	margin: -80px auto 0;
	background-image: url(../images/footer.gif);
	background-repeat: repeat-x;
	background-position: center 0;
	z-index: 0;
	clear: both; }

.footer p {
	color: #6e6e6e;
	font-size: 11px;
	font-family: georgia;
	line-height: 16px;
	text-align: center;
	top: 40px;
	width: 100%;
	margin: 0 auto;
	padding-top: 48px; }

.footer a:link {
	color: #6e6e6e;
	font-size: 11px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none; }

.footer a:visited {
	color: #6e6e6e;
	font-size: 11px;
	font-family: georgia;
	line-height: 16px;
	text-decoration: none; }

.footer a:hover {
	color: #e9eaeb;
	font-size: 11px;
	font-family: georgia;
	line-height: 16px;
	border-bottom: 1px dotted #e9eaeb; }