/***********************************
reset
***********************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/***********************************
begin structure & basics
***********************************/
body {
	background: url(../img/background/bg3.png) #242424;
	background-repeat:repeat-x;
	color: #fff;
	font-family: Arial;
}
#wrap {
	margin: 0 auto;
	width: 940px;
}
a , a:visited {
	color: #A6A6A6;
	text-decoration: none;
}
a:hover {
	/*border-bottom: 1px dotted;*/
	color: #fff;
}

/***********************************
header & navigation
***********************************/
#header {
	padding: 20px 0 2px 0;
}
#header_left {
	float: left;
}

#logo {
	/*background: url(../img/logo/paavo_logo.png) no-repeat; */
	display: block;
	height: 77px;
	/*text-indent: -9999px;*/
	width: 350px;
}
#header_right {
	float: right;
}

/* Main Navigation */
#header_right a , #header_right a:visited  { 
	letter-spacing: 2px;
	margin-right: 3px;
	margin-left: 3px;
}

#header_right a:hover  {
	color: #000;
	background-color: #ccc;
	border: 0px;
	/*font-weight: bold;*/
}

/***********************************
latest work
***********************************/
#recentwork {
	background: url(http://paavo.ch/paavo/interface/img/latestwork/latestwork.gif) no-repeat;
	color: #555;
	font: normal 1em Arial;
	height: 337px;
	margin: 0 auto 0 auto;
	padding: 30px 0 0 80px;
	position: relative;
	width: 860px;
}
.next, .next:visited {
	background: url(../img/latestwork/next.gif) 0 0 no-repeat;
	display: block;
	height: 36px;
	margin: 150px 20px 0 0;
	position: absolute;
	right: 0;
	text-indent: -9999px;
	width: 24px;
}
.next:hover {
	background: url(../img/latestwork/next.gif) 0 -36px no-repeat;
}
.prev, .prev:visited {
	background: url(../img/latestwork/prev.gif) 0 0 no-repeat;
	cursor: pointer;
	display: block;
	height: 36px;
	left: 0;
	margin: 150px 0 0 20px;
	position: absolute;
	text-indent: -9999px;
	width: 24px;
}
.prev:hover {
	background: url(../img/latestwork/prev.gif) 0 -36px no-repeat;
}
#recentwork h3 {
	display: block;
	height: 10px;
	position: absolute;
	text-indent: -9999px;
	width: 280px;
	z-index: 100;
}
#recentWorkDetails {
	float: left;
	height: 310px !important;
	z-index: 0;
}
#recentWorkImage {
	float: left;
	height: 337px !important;
	margin: 0 0 0 40px;
	visibility:hidden;
}
#recentwork .project_details {
	float: left;
	height: 230px;
	padding: 80px 0 0 0;
	width: 280px;
}
#recentwork .project_details h2 {
	/* border-bottom: 1px solid #959595; §§§ */
	color: #636363;
	font: bold 1.2em Arial;
	padding: 10px 0 20px 0;
}
#recentwork .project_details p {
	font: normal 0.8em Arial;
	padding: 10px 0;
}
#recentwork .project_details p strong {
	color: #000;
	font: bold 1em Arial;
}
#recentwork .project_details p.project_links a, #recentwork .project_details p.project_links a:visited{
	background: #000;
	color: #da9f11;
	font: bold 1em Arial;
	margin: 0 10px 0 0;
	padding: 3px 6px;
	text-decoration: none;
}
#recentwork .project_details p.project_links a:hover {
	color: #fff;
}
#recentwork .project_image {
	float: left;
	margin: 0 0 0 40px;
}

#recentwork a {
	color: #636363;
}


/***********************************
content
***********************************/
#content {
	border-bottom: 1px solid #959595;
	border-top: 1px solid #959595;
	padding: 30px 0 40px 0;
	margin: 10px 0 0 0;
}
/*
#content h3 {
	font: normal 1em Bold;
	padding: 0 0 20px 0;
	letter-spacing: 1px;
}
*/

#content h3 {
	font: bold 1em Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}


#left {
	float: left;
	padding: 0 20px 0 0;
	width: 680px;
}
#left p {
	color: #A6A6A6;
	font: normal 0.75em Arial;
	line-height: 1.8;
	padding: 10px 0;
}
#left p strong {
	color: #fff;
	line-height: 1.4;
	font: normal 1.2em Arial;
}
#right {
	float: left;
	padding: 0 0 0 20px;
	width: 220px;
}
#right dl{
	font: normal 0.75em Arial;
	padding: 10px 0;
}
#right dt {
	color: #fff;
	font: normal 1.2em Arial;
}
#right dd {
	color: #898989;
	margin: 0 0 20px 0;
}
.banner_contact {
	background: url(../img/contact/envelope.gif) top right no-repeat;
	height: 48px;
	padding: 35px 0 0 0;
}
.banner_contact p {
	font: normal 1.2em Regular;
}
.banner_contact p a, .banner_contact p a:visited {
	padding: 0 3px;
	text-decoration: none;
}
/***********************************
 footer
***********************************/
#footer {
	/* border-top: 1px solid #959595; */
	padding: 40px 0;
	position: relative;
}
#footer p {
	line-height: 1.8;
}
/*
#footer a, #footer a:visited {
	text-decoration: none;
}
#footer a:hover {
	color: #fff;
}
*/
#footer .footer_col_details {
	float: left;
	font: normal 0.7em Arial;
	margin: 0 35px 0 0;
}
#footer .footer_col_details ul li.footer_floats {
	display: block;
	float: left;
}
#footer .footer_col_details ul li.footer_floats span {
	display: block;
	float: left;
	padding: 5px 0 0 0;
}

#footer .footer_col_copyright {
	float: left;
	font: normal 0.7em Arial;
	padding: 16px 0 0 0;
	margin: 0 45px 0 0;
}

/***********************************
begin work
***********************************/
#project_list_2 {
	display: none;	
}
#content .projects {
	/* border-bottom: 1px solid #959595;§§§ */
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
}
#content .projects .projects_title h3 {
	font: normal 0.83em Bold;
	float: left;
}
#content .projects .projects_title h3 span {
	bottom: 0;
	color: #898989;
	font: normal 1.1em Regular;
	float: left;
	left: 8px;
	padding: 0;
	position: relative;
}
#content .projects .projects_listing {
	position: relative;
	overflow: hidden;
	width: 960px;
}
#content .projects .projects_listing ul li {
	float: left;
	margin: 0 20px 20px 0;
	position: relative;
}
#content .projects .projects_listing ul li a {
	border: 3px solid #fff;
	display: block;
	float: left;
	height: 132px;
	overflow: hidden;
	position: relative;
	width: 214px;
}
#content .projects .projects_listing ul li a .image_holder, #content .projects .projects_listing ul li a .image_holder:visited {
	background: url(../img/ie/opacity.png) repeat;
	color: #fff;
	cursor: pointer;
	display: none;
	font: normal 0.75em Arial;
	height: 132px;
	left: 0;
	padding: 20px;
	position: absolute;
    top: 0; 
    text-decoration: none;
    width: 175px;
}
#content .projects .projects_listing ul li a .image_holder strong {
	font: normal 1.2em Arial;
}
#content .projects .projects_listing ul li a .image_holder span {
	color: #fff;
	display: block;
	font: normal 0.9em Arial;
	padding: 10px 10px 10px 0;
	/* text-transform: capitalize; */
}
#content .projects .projects_listing ul li a .image_holder span.lrn {
	color: #da9f11;
	font: normal 1.1em Arial;
	padding: 0;
	text-transform: none;
}
#content .projects .projects_listing ul li#pagination {
	font: bold 1em Arial;
	margin: 10px 0 0 0;
	position: relative;
	width: 940px;
}
#content .projects .projects_listing ul li#pagination strong {
	display: block;
	float: left;
	height: 20px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 20px;
}
#content .projects .projects_listing ul li#pagination a, #content .projects .projects_listing ul li#pagination a:visited {
	border: 0;
	display: block;
	float: left;
	height: 20px;
	padding: 0;
	position: absolute;
	text-decoration: none;
	top: 0;
	width: 20px;
}
#content .projects .projects_listing ul li#pagination a:hover {
	color: #fff;
}
/***********************************
begin cliets
***********************************/
#content .clients h3 {
	font: normal 1.4em Regular;
	padding: 0;
}
#content .clients #client_categories {
	width: 960px;
	overflow: hidden;
}
#content .clients .nav_categories li {
	float: left;
	margin: 0 20px 0 0;
	width: 220px
}
#content .clients .nav_categories h4 {
	color: #fff;
	font: normal 1.25em Bold;
	margin: 30px 0 10px 0;
}
#content .clients .nav_categories li {
	color: #898989;
	font: normal 0.85em Arial;
}
#content .clients .nav_categories li a,#content  .clients .nav_categories li a:visited {
	color: #fff;
	text-decoration: none;
}
#content .clients .nav_categories li .client_floats li {
	float: none;
	line-height: 1.4;
	margin: 0;
}
#content .clients .nav_categories li a:hover {
	color: #da9f11
}
/***********************************
begin project page
***********************************/
.project_preview {
	float: left;
	width: 710px;
}
.project_preview h2 {
	font: normal 1.4em Regular;
}
#content .project_preview h3.project_scope {
	font: normal 0.8em Regular;
}
.project_preview h3.project_scope span {
	margin: 0 3px 0 0;
}
.project_preview ul li img {
	border: 5px solid #2a2a2a;
	margin: 0 0 10px 0;
}
.project_preview p {
	color: #898989;
	font: normal 0.8em Arial;
	line-height: 1.3;
	padding: 10px 5px;
	text-align: justify;
}
.project_preview p.project_links a, .project_preview p.project_links a:visited {
	background: #000;
	font: bold 1.1em Arial;
	padding: 3px 6px;
	text-decoration: none;
}
.project_preview p.project_links a:hover {
	color: #fff;
}
.browse_projects {
	font: normal 0.8em Arial;
	float: left;
	padding: 0 0 0 20px;
	width: 190px;
}
.browse_projects h2 {
	font: normal 0.8em Bold;
	margin: 0 0 40px 0;
}
#content .browse_projects h3 {
	font: normal 1em Arial;
	margin: 0;
	padding: 0;
}
.browse_projects ul li {
	/* border-bottom: 1px solid #959595; §§§ */
	color: #898989;
	padding: 10px 0;
}
.browse_projects p {
	font: normal 0.85em Arial;
}
.browse_projects ul li a, .browse_projects ul li a:visited {
	color: #fff;
	text-decoration: none;
}
.browse_projects ul li a:hover {
	color: #da9f11;
}
.browse_projects ul li.selected {
	color: #fff;
}
.browse_projects ul li.selected a, .browse_projects ul li.selected a:visited {
	color: #da9f11;
}
.browse_projects ul li.selected a:hover {
	color: #fff;
}

/***********************************
other
***********************************/
.clear:after {
	clear: both;
	content: ".";
	display: block;
	height:0;
	visibility: hidden;
}
.clear {
	display: inline-block;
}
* html .clear {
	height: 1%;
}
.clear {
	display: block;
}