/*
	base.css
 	Author:	Ivan Alexander
			http://www.creativeblaze.com/
*/

/* General css rules */
html 				{height: 100.02%;}
body				{background: #EEE7DD url("../images/body-background.jpg") center top no-repeat !important; font-family: "Trebuchet MS", "Lucida Grande", Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; margin: 0px; padding: 0px; height: 100%;}
form				{padding: 0px; margin: 0px;}
h1, h2, h3, h4, h5	{font-family: "Trebuchet MS", "Lucida Grande", Verdana, Geneva, Arial, Helvetica, sans-serif;}
a					{font-weight: bold;}
p					{padding: 0px 0px 15px 0px; margin: 0px; line-height: 1.4em;}
input				{font-family: Arial, Helvetica, sans-serif; font-size: 90%; padding: 0px; vertical-align: baseline;}
input.text			{padding: 3px 4px 2px 4px; border: 1px solid;}
input.button		{padding: 3px 4px 3px 4px; margin-top: 2px; border: 1px solid; font-weight: bold; cursor: pointer;}
select				{font-family: Arial, Helvetica, sans-serif; font-size: 90%; padding: 2px 3px 1px 3px; border: 1px solid;}
textarea			{font-family: Arial, Helvetica, sans-serif; font-size: 90%; padding: 3px; border: 1px solid; margin: 0px;}
img					{border: 0px;}
th					{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; padding: 2px 5px 2px 5px;}
th a				{text-decoration: none;}
th a:hover			{text-decoration: underline;}
td					{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
strong				{font-weight: bold;}

ul					{padding: 0px 0px 0px 18px; margin: 0px 0px 15px 0px;}
ol					{padding: 0px 0px 0px 35px; margin: 0px 0px 15px 0px;}
ol li				{padding: 0px; margin: 0px 0px 10px 0px;}
li					{padding: 0px; margin: 0px;}

acronym				{cursor: help; font-weight: bold;}

a.button			{display: block; float: left; clear: both; text-decoration: none; font-size: 11px; font-weight: bold; padding: 0px; margin: 2px 0px 0px 0px;}
a.button span		{display: block; cursor: pointer; padding: 7px 35px 10px 35px; margin: 0px;}

a.button			{color: #FFFFFF; background: url("../images/button-background.gif") no-repeat; background-position: left top;}
a.button span		{background: url("../images/button-cap.gif") no-repeat; background-position: right top;}
a.button:visited	{color: #FFFFFF;}
a.button:hover		{text-decoration: none; color: #000000; background-position: left -43px;}
a.button:hover span	{background-position: right -43px;}

.hiddenText			{display: none;}
.clear				{clear: both; height: 1px; overflow: hidden;}
.left				{float: left; margin: 3px 5px 0px 0px;}
.right				{float: right; margin: 3px 0px 0px 5px;}
.picFrame			{border: 1px solid; padding: 1px;}

.dottedRule			{clear: both; height: 1px; overflow: hidden; padding: 0px 0px 8px 0px;}
.pdfLink			{padding: 0px 0px 3px 21px; font-size: 11px;}

/* General format rules */
#pageFrame			{background: url("../images/pageFrame-background.gif") repeat-y; background-position: 0px 50px; position: relative; top: 0px; left: 0px; margin: 0px auto; padding: 0px; width: 852px; height: 100%;}
body > #pageFrame	{height: auto; min-height: 100%;}

#pageHeader			{background: url("../images/pageHeader-background.jpg") no-repeat; z-index: 2; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 852px; height: 204px;}
#pageBody			{background: url("../images/pageBody-background.jpg") no-repeat; position: relative; top: 0px; left: 0px; margin: 0px; padding: 25px 75px 170px 75px; width: 702px;}
#pageFooter			{background: url("../images/pageFooter-background.jpg") no-repeat; position: absolute; bottom: 0px; left: 50px; margin: 0px 0px 0px 0px; padding: 80px 0px 0px 0px; width: 752px; height: 80px;}

#pageHeader a.logo	{background: url("../images/logo-large.png") no-repeat; display: block; position: absolute; top: 15px; left: 337px; width: 178px; height: 146px;}
#pageHeader #navBar	{background: url("../images/navBar-background.gif") no-repeat; position: absolute; top: 179px; left: 50px; width: 752px; height: 30px; padding: 1px 0px 0px 0px;}

#pageHeader #navBar ul				{position: relative; margin: 0px auto; width: 386px; padding: 0px; list-style: none; clear: both;}
#pageHeader #navBar ul li			{position: relative; float: left; text-align: center; font-size: 12px; font-weight: bold; height: 24px; width: 90px; margin: 0px; padding: 0px;}
#pageHeader #navBar ul li.first		{background: url("../images/navBar-startCap.gif") no-repeat; width: 13px;}
#pageHeader #navBar ul li.last		{background: url("../images/navBar-endCap.gif") no-repeat; width: 13px;}
#pageHeader #navBar ul li a			{display: block; height: 24px; position: relative; text-decoration: none; margin: 0px; padding: 0px;}
#pageHeader #navBar ul li a			{background: url("../images/navItem-background.gif"); color: #FFFFFF; background-position: center 0px;}
#pageHeader #navBar ul li a span	{display: block; cursor: pointer;}
#pageHeader #navBar ul li a span.startCap	{background: url("../images/navItem-startCap.gif") no-repeat; background-position: left 0px; margin: 0px; padding: 0px;}
#pageHeader #navBar ul li a span.endCap		{background: url("../images/navItem-endCap.gif") no-repeat; background-position: right 0px; height: 21px; margin: 0px; padding: 3px 0px 0px 0px;}
#pageHeader #navBar ul li a:hover				{color: #000000; background-position: center -40px;}
#pageHeader #navBar ul li a:hover span.startCap	{background-position: left -40px;}
#pageHeader #navBar ul li a:hover span.endCap	{background-position: right -40px;}
#pageHeader #navBar ul li.current					{height: 30px;}
#pageHeader #navBar ul li.current a					{height: 30px; background-position: center -80px; cursor: default;}
#pageHeader #navBar ul li.current a span			{cursor: default;}
#pageHeader #navBar ul li.current a:hover			{color: #FFFFFF;}
#pageHeader #navBar ul li.current a span.startCap	{background-position: left -80px;}
#pageHeader #navBar ul li.current a span.endCap		{background-position: right -80px;}

#pageBody h2			{color: #666666; font-weight: bold; font-size: 18px; margin: 0px; padding: 0px; clear: both;}
#pageBody h3			{color: #CC0000; font-weight: bold; font-size: 14px; margin: 0px; padding: 0px; clear: both;}
#pageBody.doubleColumn #mainColumn	{position: relative; float: left; width: 440px; padding: 0px; margin: 0px;}
#pageBody.doubleColumn #rightColumn	{position: relative; float: left; width: 262px; padding: 0px; margin: 0px; background: url("../images/separator-vertical.gif") repeat-y;}
#pageBody.singleColumn #mainColumn	{position: relative; width: 702px; padding: 0px; margin: 0px;}
#pageBody.singleColumn #rightColumn	{display: none;}

#pageBody #mainColumn .content	{position: relative; margin: 0px;}
#pageBody #mainColumn .quote	{font-size: 18px; font-weight: bold; padding: 0px; color: #FF6600; line-height: 1.3em;}
#pageBody #mainColumn .hangQuote	{position: relative; float: left; left: -0.6em; font-size: 18px; font-weight: bold; padding: 0px; color: #FF6600; margin: 0em -0.7em 0em 0em;}
#pageBody #mainColumn .credit	{font-size: 14px; text-align: right; padding: 0px 0px 15px 0px; color: #666666;}
#pageBody #mainColumn #recentWork		{background: url("../images/recentWork-background.gif") no-repeat; position: relative; top: 0px; left: 0px; margin: 0px; padding: 8px; width: 412px; height: 156px;}
#pageBody #mainColumn #recentWork a		{width: 408px; height: 147px;}
#pageBody #mainColumn #recentWork img	{border: 1px solid; border-color: #000000;}

#pageBody #mainColumn form fieldset						{border: 0px; padding: 0px; margin: 5px 0px 10px 0px;}
#pageBody #mainColumn form fieldset	legend				{border: 0px; padding: 0px; margin: 0px 0px 5px -6px; font-size: 14px; font-weight: bold; font-family: "Trebuchet MS", "Lucida Grande", Verdana, Geneva, Arial, Helvetica, sans-serif;}
#pageBody #mainColumn form fieldset ol					{padding: 0px; margin: 0px;}
#pageBody #mainColumn form fieldset li 					{list-style: none; padding: 0px; margin: 0px 0px 3px 0px; font-size: 12px; font-weight: bold;}
#pageBody #mainColumn form fieldset label				{display: inline-block; vertical-align: baseline; width: 150px; font-weight: normal; text-align: right; padding: 0px; margin: 0px 5px 0px 0px;}
#pageBody #mainColumn form fieldset label.textArea		{vertical-align: top; padding-top: 2px;}
#pageBody #mainColumn form fieldset li label			{display: -moz-inline-box;}
#pageBody #mainColumn form fieldset label span			{display: block; width: 150px; /* Width of labels */}
#pageBody #mainColumn form input.button					{margin: 0px 6px 0px 0px; padding: 2px 8px 2px 8px;}
#pageBody #mainColumn form fieldset li input			{margin: 0px 6px 0px 0px; font-size: 12px;}
#pageBody #mainColumn form fieldset li select			{width: 120px; border: 1px solid; font-size: 12px; height: 21px; padding: 2px 2px 2px 0px; margin: 0px 6px 0px -3px;}

#pageBody.doubleColumn #mainColumn .content	{padding: 0px 12px 0px 0px;}
#pageBody.singleColumn #mainColumn .content	{padding: 0px; margin: 0px -3px 0px 0px; overflow: hidden; width: 705px;}

#pageBody #rightColumn .content			{position: relative; padding: 0px 0px 10px 12px; margin: 0px; font-size: 95%;}
#pageBody #rightColumn ul#preview		{position: relative; margin: 0px; padding: 2px 0px 0px 0px; list-style: none;}
#pageBody #rightColumn ul#preview li	{margin: 0px; padding: 0px; clear: both;}
#pageBody #rightColumn ul#preview li h3	{clear: none;}
#pageBody #rightColumn ul#preview li .caption	{float: left; width: 150px;}
#pageBody #rightColumn ul#preview li .pic	{background: url("../images/portfolioItem-background.gif") no-repeat; position: relative; float: left; width: 89px; height: 89px; margin: 0px 2px 2px 0px; padding: 8px 0px 0px 8px;}
#pageBody #rightColumn ul#preview li .pic img	{width: 76px; height: 76px; margin: 0px; padding: 0px; border: 1px solid; border-color: #000000;}
#pageBody #rightColumn a.button			{float: right;}

#pageFooter #colophon 			{text-align: center; font-size: 95%; font-weight: bold; color: #FFFFFF;}
#pageFooter #colophon a 		{color: #FFFFFF; text-decoration: none;}
#pageFooter #colophon a:hover 	{color: #FFCC33;}


#pageBody ul.portfolio				{position: relative; width: 762px; margin: 0px; padding: 2px 0px 0px 0px; list-style: none; clear: both;}
#pageBody ul.portfolio li			{position: relative; float: left; margin: 0px 1px 1px 0px; padding: 0px; width: 99px;}
#pageBody ul.portfolio li .pic		{background: url("../images/portfolioItem-background.gif") no-repeat; position: relative; float: left; width: 89px; height: 89px; margin: 0px 2px 2px 0px; padding: 8px 0px 0px 8px;}
#pageBody ul.portfolio li .pic img	{width: 76px; height: 76px; margin: 0px; padding: 0px; border: 1px solid; border-color: #000000;}

/* Imagebox Styles */
#ImageBoxOverlay				{background-color: #000; z-index: 50;}
#ImageBoxCaption				{background-color: #FFFFFF;}
#ImageBoxOuterContainer			{z-index: 51;}
#ImageBoxContainer				{width: 250px; height: 250px; background-color: #FFFFFF;}
#ImageBoxCaptionText			{font-weight: bold; padding-bottom: 2px; color: #000;}
#ImageBoxCaptionImages			{margin: 0px; font-size: 90%;}
#ImageBoxNextImage				{background: none; background-color: transparent;}
#ImageBoxPrevImage				{background: none; background-color: transparent;}
#ImageBoxNextImage:hover		{background: url("../images/button-next.png") no-repeat; background-position: right bottom; background-color: transparent;}
#ImageBoxPrevImage:hover		{background: url("../images/button-prev.png") no-repeat; background-position: left bottom; background-color: transparent;}
a #ImageBoxCloseButton			{padding: 4px 28px 6px 3px; margin: 12px 0px 0px 0px; font-size: 15px; line-height: 14px; font-weight: bold; text-decoration: none; background: url("../images/button-close.gif") no-repeat; background-position: right top;}
a:visited #ImageBoxCloseButton	{color: #990000;}
a:hover #ImageBoxCloseButton	{text-decoration: none; background-position: right -30px;}

* html #ImageBoxNextImage		{background: none; background-color: transparent;}
* html #ImageBoxPrevImage		{background: none; background-color: transparent;}
* html #ImageBoxNextImage:hover	{background: url("../images/button-nextr.gif") no-repeat; background-position: right bottom; background-color: transparent;}
* html #ImageBoxPrevImage:hover	{background: url("../images/button-prev.gif") no-repeat; background-position: left bottom; background-color: transparent;}