/*
Extractable.com
Title: Default CSS
Date: October 2009
Website:  http://www.extractable.com/
Author:  Pasquale Scerbo (pscerbo@extractable.com)
*/


/*----------------- CSS NORMALIZER -----------------*/
/*
- cancels default styles applied to page elements
- adjusts default elements between browsers to same baseline
*/

div, dl, dt, dd, ul, ol, li, pre, hr, form, fieldset, input, th, td {margin:0; padding:0;}
address, caption, cite, code, dfn, th, var {font-style:normal; font-weight:normal;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font-size:100%;}
select, input, textarea {font:99% verdana,geneva,sans-serif;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-size:100%; font-weight:normal;}
fieldset, img {border:0;}
img {vertical-align:middle;}
select, .inputStyle {border:1px solid #7F9DB9; background:#FFF; padding:.1em; margin:.1em 0 .1em .2em;}
legend {display:none;}
.skipNavigation {position:absolute; left:0px; top:-500px; overflow:hidden;}
select 		{background:#FFF;}
.floatLeft	{ float: left; }
.floatRight { float: right; }
.cleaner	{ clear: both; _font-size: 1%; }
.clear5		{ clear: both; height: 5px; _font-size: 1%; }
.clear10	{ clear: both; height: 10px; _font-size: 1%; }
.clear10	{ clear: both; height: 15px; _font-size: 1%; }
.tabClear	{ clear: both; height: 5px; _font-size: 1%; }
a			{ outline: none; text-decoration: none; color: #f36e21; }
label 		{ cursor: pointer; }


/*----------------- DEFAULT -----------------*/
body		{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666; margin: 0; padding: 0; background: url(img/bg-page.gif) repeat-x #FFF; line-height: 1.7em; }


/*----------------- WRAPPERS -----------------*/
#container	{ width: 948px; margin: auto; padding: 0; height: 600px; } /*main layout container*/

/*----------------- HEADER -----------------*/
#header			{ height: 90px; background: url(img/hor_dots.gif) repeat-x bottom; position: relative; }
#logo			{ position: absolute; top: 51px; left: 0; }
#menu			{ position: absolute; top: 52px; left: 278px; background: none; width: 600px; overflow: hidden; }
#search			{ position: absolute; top: 52px; left: 830px; _left: 830px; }
.searchbox 		{ width: 90px; height: 16px; border: solid 1px #cecece; margin-right: 0px; vertical-align: top; color: #666666; font-size: 10px; }
.searchimg		{ width: 17px; height: 17px; }

/*----------------- MENU -----------------*/
#menu ul	{ margin: 0; padding: 0; list-style: none; }
#menu li	{ margin-right: 15px; float: left; }
#menu li a	{ display: block; float: left; height: 16px; color: #FFF; text-decoration: none; font-size: 14px; font-weight: normal; }

#menu li a#services		{ background: url(img2009/menu-services.gif) 0 0 no-repeat red; width: 55px; height: 16px; text-indent: -9999px; }
#menu li a#clients		{ background: url(img2009/menu-clients.gif) 0 0 no-repeat; width: 46px; height: 16px; text-indent: -9999px; }
#menu li a#methodology	{ background: url(img2009/menu-methodology.gif) 0 0 no-repeat; width: 80px; height: 16px; text-indent: -9999px; }
#menu li a#casestudies	{ background: url(img2009/menu-casestudies.gif) 0 0 no-repeat; width: 79px; height: 16px; text-indent: -9999px; }
#menu li a#blog			{ background: url(img2009/menu-blog.gif) 0 0 no-repeat; width: 34px; height: 16px; text-indent: -9999px; }
#menu li a#company		{ background: url(img2009/menu-company.gif) 0 0 no-repeat; width: 60px; height: 16px; text-indent: -9999px; }
#menu li a#contact		{ background: url(img2009/menu-contact.gif) 0 0 no-repeat; width: 50px; height: 16px; text-indent: -9999px; }


#menu li a#services:hover		{ background: url(img2009/menu-services.gif) 0 -16px no-repeat; width: 55px; height: 16px; text-indent: -9999px; }
#menu li a#clients:hover		{ background: url(img2009/menu-clients.gif) 0 -16px no-repeat; width: 46px; height: 16px; text-indent: -9999px; }
#menu li a#methodology:hover	{ background: url(img2009/menu-methodology.gif) 0 -16px no-repeat; width: 80px; height: 16px; text-indent: -9999px; }
#menu li a#casestudies:hover	{ background: url(img2009/menu-casestudies.gif) 0 -16px no-repeat; width: 79px; height: 16px; text-indent: -9999px; }
#menu li a#blog:hover			{ background: url(img2009/menu-blog.gif) 0 -16px no-repeat; width: 34px; height: 16px; text-indent: -9999px; }
#menu li a#company:hover		{ background: url(img2009/menu-company.gif) 0 -16px no-repeat; width: 60px; height: 16px; text-indent: -9999px; }
#menu li a#contact:hover		{ background: url(img2009/menu-contact.gif) 0 -16px no-repeat; width: 50px; height: 16px; text-indent: -9999px; }

#menu li a#services.on,
#menu li a#clients.on,
#menu li a#methodology.on,
#menu li a#casestudies.on,
#menu li a#blog.on,
#menu li a#company.on,
#menu li a#contact.on	{ background-position: 0 -16px; }

/*----------------- BANNERS -----------------*/
#homeFlash	{ width: 946px; height: 330px; float: left; clear: both; margin: 2px 0 7px 0; overflow: hidden; }

/*----------------- HOME PAGE COMPONENT -----------------*/
.comp235		{ float: left; width: 197px; background: url(img2009/bg-comp241.gif) repeat-y right; padding: 18px 18px 0 20px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.comp235.last	{ background: none; }
.comp235 h2		{ color: #666666; font-weight: bold; margin-bottom: 24px; font-size: 13px; }
.comp235 p			{ color: #777; font-size: 11px; margin: 0 0 20px 0; }
.comp235 .date	{ color: #999; font-size: 10px; }

.comp235 ul			{ margin: 0; padding: 0; list-style: none; }
.comp235 li			{ line-height: 1.5em;  }
.comp235 li a		{ text-decoration: none; background: url(img2009/arrow-ext.gif) no-repeat right 8px; padding-right: 8px; }
.comp235 li a:hover	{ text-decoration: underline; }

/*----------------- FOOTER -----------------*/
#footer				{ padding-top:39px; padding-bottom: 20px; position: relative; background: url(img/bg_footer.gif) repeat-x; color: #CBCBCB; font-size: 0.80em; clear: both; }
a.footlink 			{ padding-left: 15px; padding-right: 15px; color: #cbcbcb; text-decoration: none; border-left: 1px solid #f5f6f5; }
a.footlink:hover	{ text-decoration: underline; color: #F5772D; }

