/************************************************

Author: David Woolf
Site: Scrollable Template
Date of creation: 11/12/09
Description: A one page portfolio template that uses the scrollTo jquery plugin.

************************************************/

/* Main Styling */

@font-face {
font-family: BoycottRegular;
src: url(fonts/BOYCOTT_-webfont.eot?);
src: url(fonts/BOYCOTT_-webfont.ttf);
src: url(fonts/BOYCOTT_-webfont.svg);
src: local('BoycottRegular');
}

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { 
	margin: 0; 
	padding: 0; 
}

a {
	outline: none;
}

body {
	background: #2a2829 url(../graphics/main_bg.png) repeat-x;
	background-attachment: fixed;
	font: 62.5%/1.6 "verdana", sans-serif;
}

#header { /* Always on top */
	background-color: #F90;
	border-bottom: 1px solid #F90;
	left: 50%;
	margin: 0px 0px 0px -510px;
	height: 99px;
	padding: 0px 30px 0px 30px;
	position: fixed;
	top: 0px;
	width: 960px;
	z-index: 10;
}

#header h1 {
	color: #2a2829;
	float: left;
	font-family: 'BoycottRegular';
	font-size: 5.5em;
	letter-spacing: -.5px;
	line-height: 90px;
}

#linkbar { /* Main links */
	border-bottom: 1px solid #2a2829;
	float: right;
	list-style-type: none;
	margin: 32px 0px 0px 0px;
}

#linkbar li {
	float: left;
	margin: 0px 20px 0px 0px;
}

#linkbar li.last { /* Gets rid of extra space on last link */
	margin: 0px;
}

#linkbar a {
	color: #2a2829;
	display: block;
	font-size: 1.3em;
	font-weight: 800;
	text-decoration: none;
	position: relative;
	top: 3px;
}

#linkbar a:hover {
	color: #493736;
}

#linkbar .current { /* Assigned to clicked link */
	border-bottom: 5px solid #2a2829;
}

#wrapper {
	left: 50%;
	margin: 0px 0px 0px -510px;
	position: relative;
	top: 99px;
	width: 1020px;
	z-index: 5;
}

.content_section {
	border-top: 1px solid #F90;
	min-height: 400px;
	padding: 0px 30px 15px 30px;
	width: 960px;
}

.odd {
	background: #f6f6f6 url(../graphics/background.png) top center no-repeat;
}

.even {
	background: #f2f2f2 url(../graphics/background.png) top center no-repeat;
}

.main_column {
	float: left;
	width: 640px;
}

.sub_column {
	float: right;
	width: 280px;
}	

.content_section h2 {
	color: #222;
	font-size: 4.0em;
	height: 52px;
	margin: 0px 0px 45px 0px;
	position: relative;
}

.content_section h2 span {
	background-color: #F60;
	padding: 0px 12px 4px 12px;
	position: relative;
	float: right;
	top: 0px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius:10px;
}

.content_section h3 {
	color: #493736;
	font-size: 2.8em;
	font-weight: 400;
	letter-spacing: -.5px;
	padding: 0px 0px 10px 0px;
}

.content_section p {
	color: #2a2829;
	font-size: 1.3em;
	padding: 5px 0px 5px 0px;
}

.content_section blockquote {
	background-color: #e2e8e9;
	border: 1px solid #F90;
	margin: 10px 0px 10px 30px;
	padding: 20px;
}

.content_section blockquote p {
	font-style: italic;
}


#footer {
	background-color: #e2e8e9;
	border-top: 1px solid #F90;
	height: 35px;
	padding: 10px 30px 5px 30px;
	width: 960px;
}

#footer h4 {
	color: #2a2829;
	float: left;
	font-size: 2.0em;
}

#footer a {
	color: #2a2829;
	float: right;
	font-size: 1.4em;
	font-weight: 800;
	margin: 5px 0px 0px 0px;
	text-decoration: none;
}

/* Showcase Styling */

#showcase {
	border: 8px solid #2a2829;
	float: left;
	height: 235px;
	max-height: 235px;
	overflow: hidden;
	position: relative;
	width: 444px;
}

#showcase ul {
	list-style-type: none;
}

#showcase li {
	margin: 0px;
	padding: 0px;
	position: relative;
	height: 235px;
}

#showcase img {
	background: transparent;
	border: 0px;
	height: 235px;
	width: 444px;
}

#prevBtn, #nextBtn { /* Showcase Controls */
	background-color: #2a2829;
	display: block;
	height: 25px;
	left: 490px;
	position: absolute;
	top: 299px;
	width: 25px;
}

#nextBtn {
	top: 324px;
}

#prevBtn a { /* Up Triangle */
	background-color: transparent;
	border-bottom: 8px solid #eee;
	border-left: 8px solid #2a2829;
	border-right: 8px solid #2a2829;
	display: block;
	font-size: 0em;
	height: 0px;
	left: 2px;
	padding: 0px;
	position: absolute;
	top: 8px;
	width: 0px;
}

#prevBtn a:hover {
	border-bottom: 8px solid #ccc;
}

#nextBtn a { /* Down Triangle */
	background-color: transparent;
	border-top: 8px solid #eee;
	border-left: 8px solid #2a2829;
	border-right: 8px solid #2a2829;
	display: block;
	font-size: 0em;
	height: 0px;
	left: 2px;
	position: relative;
	top: 6px;
	width: 0px;
}

#nextBtn a:hover {
	border-top: 8px solid #ccc;
}

#description {
	float: right;
	margin-top: -12px;
	width: 450px;
}

#description p {
	margin-left: 2px;
}

/* Column Styling */

#column_holder {
	height: 150px;
	margin: 25px auto 10px auto;
	width: 960px;
}

#left_column {
	border-left: 1px solid #F90;
	float: left;
	height: 150px;
	padding: 0px 0px 2px 20px;
	position: relative;
	width: 619px;
}

#right_column {
	border-left: 1px solid #F90;
	float: right;
	height: 150px;
	padding: 0px 0px 2px 20px;
	position: relative;
	width: 279px;
}

#column_holder h3 {
	color: #2a2829;
	font-size: 2.1em;
	padding: 0px 0px 5px 0px;
}

#column_holder ul {
	list-style-type: none;
	margin: 5px 0px 0px 0px;
}

#column_holder li {
	color: #2a2829;
	font-size: 1.3em;
	padding: 0px 0px 10px 0px;
}

#left_column li {
	color: #2a2829;
	height: 100px;
	position: relative;
}

#left_column li p  {
	color: #2a2829;
	font-size: 1.2em;
	left: 25px;
	padding: 0px 15px 0px 0px;
	position: absolute;
	top: 12px;
}

#left_column li img {
	left: 0px;
	position: absolute;
	top: 0px;
}

#left_column li h5 {
	bottom: 0px;
	font-size: 1.1em;
	padding: 0px;
	position: absolute;
	right: 15px;
}

/* Portfolio Items Styling */

#portfolio_items {
	list-style-type: none;
	margin: 15px 0px 0px 0px;
}

#portfolio_items li {
	background-color: #888;
	float: left;
	height: 150px;
	margin: 0px 20px 20px 0px;
	overflow: hidden;
	padding: 1px;
	position: relative;
	width: 172px;
}

#portfolio_items .last_row_item {
	margin: 0px 0px 20px 0px;
}

#portfolio_items a img {
	background-color: transparent;
	border: 0px;
	height: 150px;
	width: 172px;
}

/* About Styling */

#testimonials {
	margin-top: 1px;
	max-width: 280px;
}

#testimonials h3 {
	border: 1px solid #F90;
	border-bottom: 0px;
	font-size: 2.2em;
	padding: 4px 0px 5px 15px;
}

#testimonials ul {
	border: 1px solid #F90;
	list-style-type: none;
}

#testimonials li {
	background: url(../graphics/small_testimonial_open.png) no-repeat;
	border-bottom: 1px solid #F90;
	color: #2a2829;
	font-size: 1.3em;
	margin: 0px 0px -1px 0px;
	padding: 12px 18px 10px 18px;
}

#testimonials li h5 {
	font-size: 1.0em;
	text-align: right;
}

/* Contact Styling */

#contact {
	margin: -5px 0px 0px 0px;
}

#contact fieldset {
	border: 0px;
	width: 600px;
}

#contact input {
	border: 1px solid #F90;
	display: block;
	height: 21px;
	margin: 10px 0px 10px 0px;
	padding: 7px 5px 2px 5px;
	width: 330px;
}

input:focus, textarea:focus {
	background-color: #f6f6f6;
}

#contact textarea {
	border: 1px solid #f90;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	height: 175px;
	max-height: 175px;
	min-height: 175px;
	max-width: 500px;
	min-width: 500px;
	padding: 7px 5px 2px 5px;
	width: 500px;
}

#contact #submit {
	background-color: #2a2829;
	border: 0px;
	color: #fff;
	font-size: 1.4em;
	height: 35px;
	padding: 5px 5px 7px 5px;
	text-align: center;
	width: 80px;
}

#contact #submit {
	cursor: pointer;
}

#contact_info {
	border: 1px solid #F90;
	margin: 5px 0px 0px 0px;
	width: 278px;
}

#contact_info h3 {
	border-bottom: 1px solid #F90;
	font-size: 2.2em;
	padding: 3px 0px 5px 15px;
}

#contact_info ul {
	border-bottom: 1px solid #F90;
	list-style-type: none;
	margin: 0px 0px -1px 0px;
	padding: 10px 0px 10px 0px;
}

#contact_info li {
	color: #2a2829;

	font-size: 1.2em;
	padding: 5px 15px 5px 15px;
}

#contact_info ul#social {
	height: 30px;
	padding: 15px 0px 15px 15px;
}

#contact_info ul#social li { /* Social Icons List Styling */
	display: block;
	float: left;
	padding: 0px;
}

#contact_info ul#social li a {
	display: block;
	float: left;
	margin: 0px 10px 10px 0px;
}

#contact_info ul#social li a img {
	border: 0px;
	background: transparent;
}

/* Predefined Classes */

.clear_div {
	clear: both;
}

.category {
	font-weight: 800;
}

.main_image {
	border: 1px solid #fff;
	margin: 0px 0px 5px 0px;
	width: 638px;
}