/* 
Theme Name: Impendulo
Theme URL: http://www.impendulo.net
Description: A gorgeous metalic portfolio theme with lots of padding
Author: Joost Kiens
Author URI: http://www.impendulo.net
Version: 1.0.4
Tags: vibrant, padding, portfolio, gray, dark, light
*/

/*                                                           ,,,
                                                            /'^'\
                                                           ( o o )
-------------------------------------------------------oOOO--(_)--OOOo------

Main Style Sheet for www.impendulo.net
Author: Joost Kiens
Author website: www.impendulo.net
Author email: joost(at)impendulo(dot)net
Graphic design by Joost Kiens & K1GRFX

___Content___

1. Reset
2. Typography
3. Form elements
4. Tables
5. General Elements & Layout
6. Branding & Main-nav
7. Site Info
8. Page specific
9. Overrides

___Colors___
blue: #5bc4fb
dark blue #2b6583 (links)
yellow/green #d1d92e
------------------------------------------------------------------------

	OTHER STYLESHEETS
	
	- print.css
	- lteie7.css
	- ie7.css
	
------------------------------------------------------------------------

	TESTED ON
	
	- FF3 (Linux, Windows)
	- FF2 (Linux, Windows)
	- Opera 9.6 (Linux, Windows)
	- Konqueror (Linux)
	- Lynx (Linux)
	- Safari ?? (Windows)
	- Chrome ?? (Windows)
	- MSIE 8 (Windows)
	- MSIE 7 (Windows)
	- MSIE 6 (Windows)

								                                        .oooO
                                                        (   )   Oooo.
---------------------------------------------------------\ (----(   )-------
                                                          \_)    ) /
                                                                (_/       */

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

																	RESET

********************************************************************
/*Reset browser CSS based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ and the Yahoo fonts reset css*/
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-weight: inherit;	font-style: inherit;	font-family: inherit;	vertical-align: baseline;}
body{font:13px/1.231 tahoma, verdana, arial, helvetica, sans-serif;/* font-size:small;* font:x-small;*/}
/* remember to define focus styles! */
:focus {outline: 0;}
/*Change this*/
body {color: #666;background: white;}
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: "" "";}
a {text-decoration: none;}
select,input,a.button,textarea, button{font:99% tahoma, verdana, arial, helvetica, sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;/** font-size:108%;*/line-height:100%;}
/***********************************************************************

																	TYPOGRAPHY

***********************************************************************/
h2 {font-size: 216%; color: #333; padding: 0px 0 2px 0; border-bottom: 1px solid #666; margin-bottom: 28px; font-weight: normal;}
h3 {font-size: 182%; color: #333; padding: 0px 0 2px 0; border-bottom: 1px solid #666; margin-bottom: 18px; font-weight: normal;}
h4 {font-size: 138.5%; font-weight: bold;}
h5 {font-size: 138.5%; font-weight: normal;}
abbr {border-bottom: 1px dotted;}

.message { padding: 20px; margin-top: 40px; background: #f1ffdf; border: 1px solid #d3ff99; text-align: left;}
#nav-bar .wrapper #main-nav ul li a:link {color: #ccc;}
#nav-bar .wrapper #main-nav ul li a:visited {color: #ccc;}
#nav-bar .wrapper #main-nav ul li a:hover {color: #5bc4fb;}
#nav-bar .wrapper #main-nav ul li a:active {color: #121212;}
#nav-bar .wrapper #main-nav ul li.current_page_item a:link, #nav-bar .wrapper #main-nav ul li.current_page_ancestor a:link {color: #5bc4fb;}
#nav-bar .wrapper #main-nav ul li.current_page_item a:visited, #nav-bar .wrapper #main-nav ul li.current_page_ancestor a:visited {color: #5bc4fb;}
#nav-bar .wrapper #main-nav ul li.current_page_item a:hover, #nav-bar .wrapper #main-nav ul li.current_page_ancestor a:hover {color: #5bc4fb;}
#nav-bar .wrapper #main-nav ul li.current_page_item a:active, #nav-bar .wrapper #main-nav ul li.current_page_ancestor a:active {color: #121212;} 

#main-content p, .faq-answers {margin-bottom: 10px; line-height: 153.9%;}
#main-content a.faq-question {display: block; margin-bottom: -5px;}
#main-content a:link {color: #2b6583}
#main-content a:visited {color: #0099ff}
#main-content a:hover {color: #333; text-decoration: underline;}
#main-content a:active {color: #d1d92e;}
#main-content ul.item-list {margin-top: -10px;}
#main-content ul.item-list li {padding-left: 0px; background: url(images/content-bullet.png) no-repeat 0 13px; padding: 10px 0 10px 30px; border-bottom: 1px dashed #ccc;}
#main-content ul.item-list li:last-child {border-top: none;}
#main-content ul.item-list li.last {border: none;}

#site-info-nav ul li.current_page_item a:link {color: #5bc4fb}
#site-info-nav ul li.current_page_item a:visited {color: #5bc4fb}
#site-info-nav ul li.current_page_item a:hover {color: #d1d92e}
#site-info-nav ul li.current_page_item a:active {color: #fefefe; text-decoration: underline;}
#site-info-nav ul li a {border-left: 1px solid #222;}
#site-info-nav ul li:first-child a {border-left: none;}
#site-info-nav ul li a:link {color: #d1d92e}
#site-info-nav ul li a:visited {color: #d1d92e;}
#site-info-nav ul li a:hover{color: #5bc4fb}
#site-info-nav ul li a:active {color: #fefefe; text-decoration: underline;}

#site-info .copy-right a {color: #aaa; text-decoration: underline;}
em {font-style: normal;}
/***********************************************************************

																FORM ELEMENTS

***********************************************************************/
#main-content a.button {display: block; _width: 50px; float: left; padding: 0 48px 0 0; margin: 10px 0 0px 0; height: 44px; border: 0; cursor: pointer; text-align: center; color: #333; overflow: visible}
#main-content a.button span {display: block; padding: 0 15px 0 15px; height: 44px; color: #333; font-size: 108%; line-height: 42px; white-space: nowrap;}
#main-content a:hover.button {color: #121212; text-decoration: none;}
#main-content a.button::-moz-focus-inner /* fixing evil default firefox padding */ {padding:0; border:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){
a.button span {margin-top: -0px;}
}/* Safari & Chrome hack*/


a.button-style1 {background: transparent url(images/button-sprites.png) no-repeat right 1px; position: relative; left: 173px; top: -35px;}
a.button-style1 span {background: transparent url(images/button-sprites.png) no-repeat left 1px;}
a:hover.button-style1 {background-position: right -180px;}
a:hover.button-style1 span {background-position: left -180px;}

a.button-style2 { background: transparent url(images/button-sprites.png) no-repeat right -88px;}
a.button-style2 span { background: transparent url(images/button-sprites.png) no-repeat left -88px;}
a:hover.button-style2 {background-position: right -269px;}
a:hover.button-style2 span {background-position: left -269px;}

a.button-style3 { background: transparent url(images/button-sprites.png) no-repeat right -132px;}
#main-content a.button-style3 span { background: transparent url(images/button-sprites.png) no-repeat left -132px; color: #fff;}
a:hover.button-style3 {background-position: right -313px;}
#main-content a:hover.button-style3 span {background-position: left -313px; color: #fefefe;}

a.button-style4 {background: transparent url(images/button-sprites.png) no-repeat right -44px;}
a.button-style4 span {background: transparent url(images/button-sprites.png) no-repeat left -44px;}
a:hover.button-style4 {background-position: right -225px;}
a:hover.button-style4 span {background-position: left -225px;}

/*Tabs*/
ul.tabNavigation {overflow: hidden; height: 100%; margin-top: 40px;}
ul.tabNavigation li {display: inline;}
#main-content ul.tabNavigation li a {color: #666; float: left; padding: 20px 40px 40px 30px; margin: 0 5px 0 0; display: block; height: 20px; overflow:hidden; font-size: 182%; background: #d9d9d9 url(images/inactive-tab-shadow.png) no-repeat bottom; border: 1px solid #c6c4c4; border-width: 1px 1px 0px 1px; border-bottom: 1px solid #e1e0e0; z-index: 1000;}
ul.tabNavigation li a img {margin-right: 20px;}
ul.tabNavigation li a span {position: relative; top: -18px;}
#main-content ul.tabNavigation li a.selected{ text-decoration: none; color: #666; background: url(images/form-tab.png); color: #666; border: 1px solid #e1e0e0; border-width: 1px 1px 0 1px; border-bottom: transparent 1px solid;}
/*#main-content ul.tabNavigation li a:visited {color: #333;}*/
#main-content ul.tabNavigation li a:hover { text-decoration: none; background: #e5e5e5; color: #666}
#main-content ul.tabNavigation li a:hover.selected {background: url(images/form-tab.png);}
ul.tabNavigation li a:focus {outline: 0;}
div.tabs div#first, div.tabs div#second {background: url(images/sprites-portfolio.png) no-repeat -633px -0px; margin: -2px -40px 0 -40px; padding: 40px; overflow: hidden; width: 800px; height: 100%;}
div.tabs div#first h2, div.tabs div#second h2{margin-top: 0;}

.wpcf7-form {overflow: hidden; height: 100%;}
.sender-info {float: left; width: 380px; margin-right: 40px; display: inline;}
.sender-message {float: right; width: 380px; display: inline;}
.wpcf7-form .button {clear: both;}
.wpcf7-form input, .wpcf7-form textarea {border: 1px solid #cacaca; background: #f1f1f1; width: 344px; padding: 13px; margin-bottom: 20px;}
.wpcf7-form input:focus, .wpcf7-form textarea:focus {border: 1px solid #aaa;}
.wpcf7-form label {font-weight: bold; display: block; margin-bottom: -5px; color: #666;}
.wpcf7-form label .req {font-weight: normal; color: #aaa;}
.wpcf7-form .button input {width: 124px; height: 43px; padding: 43px 0 0; background: transparent url(images/send-button.png) no-repeat 0 -45px; border: none; cursor: pointer; text-indent: -9999px; float: right; margin: 20px 425px 0 0; overflow: hidden;}
.wpcf7-form .button input:hover {background-position: 0 0;}
.wpcf7-form legend {font-weight: bold; font-size: 138.5%; color: #aaa; padding-bottom: 12px;}
textarea {overflow: auto;}

#wpcf7-f1-p77-o1 textarea {height: 198px;}
#wpcf7-f2-p77-o2 textarea {height: 290px;} 
/***********************************************************************

																	TABLES

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


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

												GENERAL ELEMENTS AND LAYOUT

***********************************************************************/
body {background: #46463e; text-align: center;}
body .wrapper {width: 960px; text-align: left; margin: 0 auto; overflow: hidden; height: 100%;} 
.clear-both {clear: both; height: 0;}
a .alignleft {margin: 8px 16px 16px 0;border: 1px solid #121212; display: inline; float: left;}
/***********************************************************************

														BRANDING & MAIN NAV

***********************************************************************/
#nav-bar {background: #666 url(images/branding-bar-bg-top.png) repeat-x; overflow: hidden;}
#nav-bar .wrapper {overflow: hidden; height: 121px;}
#nav-bar .wrapper h1 {margin-left: 80px; float: left; width: 261px; display: inline;}
#nav-bar .wrapper h1 span {position: absolute; left: -9999px;}
#nav-bar .wrapper #main-nav {float: right; width: 524px; overflow: visible; margin: 45px 54px 0 40px; display: inline;}
#nav-bar .wrapper #main-nav ul {margin: 0 auto; float: right; position: relative;}
#nav-bar .wrapper #main-nav ul li {display: inline; float: left; position: relative;}
#nav-bar .wrapper #main-nav ul li.back {background: url(images/main-nav-active-bg2.gif) no-repeat right -30px; width: 9px; height: 30px; z-index: 0; position: absolute;}
#nav-bar .wrapper #main-nav ul li.back .left {background: url(images/main-nav-active-bg2.gif) no-repeat top left; height: 30px; margin-right: 9px; /* 7px is the width of the rounded shape */}
#nav-bar .wrapper #main-nav ul li a {padding: 0 24px; margin: 5px 0 6px 0; z-index: 10; display: block; position: relative; overflow: hidden; font-size: 123.1%; text-transform: capitalize;}
#branding {background: #121212 url(images/branding-border-bottom.png) repeat-x 0 238px; height: 240px;}
#main-content {background: url(images/metal-bg2.jpg) repeat-x;}
#main-content .wrapper {width: 800px; background: #fefefe url(images/content-gradient-top.png) no-repeat; border: 2px solid #2a2a2a; border-width: 0 2px 0 2px; padding: 73px 80px 80px 80px;}
/***********************************************************************

															PAGE SPECIFIC

***********************************************************************/
/*HOME*/
.home-wrapper {overflow: visible; height: 100%; position: relative;}
.home-wrapper .column1, .home-wrapper .column2, .home-wrapper .column3 {width: 240px; float: left; display: inline;}
.home-wrapper .column2 {margin: 0 40px;}
.home-wrapper a.button {padding-bottom: 20px; margin-bottom: 20px;}
.home-wrapper .recent-project {width: 529px; margin-right: 31px;}
.home-wrapper .recent-project img {position: relative; top: -6px; left: -6px;}
.what-who-why {margin-bottom: 73px;}
/*ABOUT*/
.about-wrapper .column1 {width: 380px; float: left; margin-right: 40px;}
.about-wrapper .column2 {width: 380px; float: left;}
/*PORTFOLIO OVERVIEW*/
.featured-project {width: 800px; height: 320px; background: url(images/featured-project.jpg); margin-bottom: 40px; position: relative;}
.featured-project #featured-project-description {position: relative; top: 40px; left: 40px; width: 320px; height: 240px; border: 1px solid #121212;}
.featured-project #featured-project-description .content-wrapper { position: relative; padding: 40px 40px 20px 40px; height: 180px; width: 240px;}
.featured-project #featured-project-description .overlay {position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: #121212; opacity: 0.8; filter:alpha(opacity=80); -ms-filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8;}
.featured-project h5 {position: relative; color: #fefefe; font-size: 182%; font-weight: normal; padding: 0px; border: none;}
.featured-project p {position: relative; top: 0px; color: #fefefe; padding: 0px;}
.featured-project a.button {position: relative; top: 0px; left: 100px;}
.sub-project {background: url(images/sprites-portfolio.png) no-repeat -633px -0px; margin: 0 -40px; padding: 40px 40px 40px 40px; overflow: hidden; height: 100%;}
.sub-project a img.thumb {padding: 21px 20px 19px 20px; background: url(images/sprites-portfolio.png) no-repeat -150px 0px; float: left; margin-right: 40px; display: inline; width: 201px;}
.sub-project a:hover img.thumb {background-position: -391px 0px;}
.sub-project .description {overflow: hidden; float: left; display: inline; width: 516px;}
.sub-project h3 {color: #333; font-weight: normal;}
.sub-project a.button {position: relative; left: 355px;}
.sub-portfolio-nav {position: relative; left: -120px; top:30px;}
.sub-portfolio-nav li {display: inline;}
/*PORTFOLIO-SUBPAGE*/
.slide-show {overflow: hidden; height: 100%; margin-bottom: 40px; position: relative; top: 20px;text-align: center;}
.slide-show ul.thumbnails {clear: both; margin: 0 0 0 -32px; padding: 0;}
.slide-show ul.thumbnails li {background: none; border: none; display: inline; margin: 0 0 0 32px; padding: 0;}
.slide-show ul.thumbnails li img {border: 1px solid #121212; cursor: -moz-zoom-in; cursor: pointer; cursor: hand;}
.slide-show p {text-align: left; color: #aaa; float: left; width: 800px;}
#lightbox-caption-title {color: #333;}
.subpage-description {width: 520px; float: left; margin-right: 40px; overflow: hidden; height: 100%; display: inline;}
.subpage-description a.button {position: relative; left: 380px;}
.subpage-elements {width: 240px; float: left; display: inline;}
/*FAQ*/
.faq-questions {margin-bottom: 40px; position: relative; left: 20px; }
.faq-questions a {text-decoration: underline;}
.faq-answers a.faq-question {font-size: 138.5%; color: #333;}
.faq-answers ol li {margin-top: 20px;}
.faq-answers ol li:first-child {margin-top: 0;}
.faq-answer ul {margin-bottom: 10px;}
.faq-answer ul li {list-style-type: disc;}
.faq-answer {padding: 20px 0 20px 20px;}
/***********************************************************************

																SITE INFO

***********************************************************************/
#site-info {background: #121212 url(images/siteinfo-border-top.png) repeat-x; padding: 20px;}
#site-info .wrapper {background: url(images/content-gradient-bottom.png) no-repeat; padding-top: 29px; position: relative; top: -29px; overflow: hidden; height: 100%;}

#site-info div#site-info-nav {clear: both; float: right; width: 960px; overflow: hidden; margin:0 auto; height: 100%; text-align: center;}
#site-info div#site-info-nav ul {margin: 0px auto 40px auto;/* float: left; position: relative; left: 50%; */ overflow: hidden; height: 25px;}
#site-info div#site-info-nav ul li {float: left; /*position: relative; right: 50%;*/}
#site-info div#site-info-nav ul li a {width: auto; display: block; font-size: 100%; padding: 0 70px; text-transform: capitalize; font-weight: normal;}

#site-info .phonetics {color: #333; margin: 0px 40px 40px 80px; width: 200px; float: left; clear: both; display: inline;}
#site-info .phonetics .languages, #site-info .phonetics .pronunciation {display: block; border-bottom: 1px solid; padding-bottom: 5px;}
#site-info .phonetics .words {display: block; padding: 5px 0 10px 0;}
#site-info .phonetics .translation {display: block; padding-top: 5px;}

#site-info blockquote {float: left; width: 600px; margin-top: -23px; background:  url(images/siteinfo-quote-top.png) no-repeat; padding-top: 9px;}
#site-info blockquote h4 {color: #454545; padding: 11px 40px 10px 40px; background: #141414; /*url(images/sprites2.png) no-repeat -4px -90px;*/ border: 1px solid #202020; border-width: 0 1px 0 1px;}
#site-info blockquote p.quote {padding: 0px 40px 44px 40px; background: #141414 url(images/quotes.png) no-repeat 10px -20px; border: 1px solid #202020; border-width: 0 1px 0 1px; font-style: italic;}
#site-info blockquote p.attribution {color: #454545; display: block; margin: -34px 0 20px -1px; padding: 0px 0px 72px 40px; background: url(images/siteinfo-quote-bottom.png) no-repeat 0 33px;}

#site-info .copy-right {text-align: center; color: #454545; clear: both;}
/*********************************THE END******************************/
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9000;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10000;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}