/*************************************************************
 *
 *	File:			main.css
 *	Author:		Andy dePasquale
 *	Created:	May 2010
 *
 * Main stylesheet for all browsers
 * 
 *************************************************************/

/* ***************************
	BODY
*************************** */

body {
	background:					url(../img/patterns/53mod2.gif) top left repeat;
}

body,
div,
p {
	font-family:				Georgia,serif;
	font-size:					11px;
	line-height:				1.9;
	color:						#444;
}

p {
	margin:						0px 0px 10px 0px;
}

a:link {
	color:						#760000;
	text-decoration:			underline;
}
a:active,
a:hover {
	color:						#760000;
	text-decoration:			none;
}
a:visited {
	color:						#9faca0;
}

.hr {
	width:						90%;
	height:						1px;
	margin:						20px 0px 20px 0px;
	margin-left:				5%;
	background-color:			#bababa;
}

h1 {
	color:						#2e3e57;
	font-size:					15px;
	line-height:				1.1;
	margin:						22px 0px 8px 0px;
	position:					relative;
}

h1.pghd {
	margin:						0px 0px 8px 0px;
}

h2 {
	color:						#707070;
	font-size:					13px;
	line-height:				1.1;
	margin:						25px 0px 6px 0px;
}

img.star {
	width:						19px;
	height:						16px;
	position:					relative;
	top:						2px;
	left:						2px;
	display:        inline;
}

#contentLt h2,
#contentRt h2 {
	color:						#760000;
	font-size:					14px;
	line-height:				1.1;
	margin:						15px 0px 5px 0px;
	position:					relative;
}

#contentRt p {
	line-height:				1.5;
}

#contentRt p a:visited {
	color:						#4a5a71;
}

.date {
	font-style:					italic;
	color:						#bbb;
	font-size:					10px;
}

ul {
	list-style-position:		outside;
	padding:					0;
	margin:						3px 0 12px 20px;
}

ul li {
	margin:						0 0 5px 0;
}



/* ***************************
	LAYOUT
*************************** */

#page {
	width:						830px;
	margin:						0 auto;
	background-color:			#fff;
	position:					relative;
}

/*	NOTE: 100% height is meaningless in IE6
	renders as auto instead, i.e. the rendered height of its contents
	fix: attach the side dropshadows to the bottom of #pageBtm instead of the top;
	give them absurdly tall height values and let them run off the top of the page */

#pageShadowLt {
	width:						7px;
	height:						10000px;
	position:					absolute;
	bottom:						4px;
	left:						0px;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/page_shadow_lt.png');
	overflow:         hidden;
}
html>body #pageShadowLt {
	bottom:						5px;
	background:					url(../img/page_shadow_lt.png) top left repeat-y;
}
#pageShadowRt {
	width:						7px;
	height:						10000px;
	position:					absolute;
	bottom:						4px;
	right:						0px;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/page_shadow_rt.png');
	overflow:         hidden;
}
html>body #pageShadowRt {
	bottom:						5px;
	background:					url(../img/page_shadow_rt.png) top left repeat-y;
}

#pageBtm {
	width:						844px;
	height:						5px;
	margin:						0 auto;
	margin-bottom:				8px;
	position:					relative;
}

#pageShadowBtm {
	width:						830px;
	height:						5px;
	float:						left;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/page_shadow_btm.png');
	overflow:         hidden;
}
html>body #pageShadowBtm {
	background:					url(../img/page_shadow_btm.png) top left repeat-x;
}

#pageShadowBtmRt {
	width:						7px;
	height:						5px;
	float:						left;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/page_shadow_btm_rt.png');
	overflow:         hidden;
}
html>body #pageShadowBtmRt {
	background:					url(../img/page_shadow_btm_rt.png) top left no-repeat;
}

#pageShadowBtmLt {
	width:						7px;
	height:						5px;
	float:						left;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/page_shadow_btm_lt.png');
	overflow:         hidden;
}
html>body #pageShadowBtmLt {
	background:					url(../img/page_shadow_btm_lt.png) top left no-repeat;
}

#mast {
	width:						820px;
	height:						176px;
	background:					url(../img/masthead.jpg) top left no-repeat;
	margin:						0px 5px 0px 5px;
	position:					relative;
}

#descriptor {
	height:						24px;
	position:					relative;
	top:						122px;
	right:						16px;
}

.descriptorStarLt,
.descriptorStarRt {
	width:						12px;
	height:						24px;
	margin:						0px 4px 0px 0px;
	float:						right;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/descriptors/star.png');
	overflow:         hidden;
}
.descriptorStarRt {
	margin:						0px 0px 0px 2px;
}
html>body .descriptorStarLt,
html>body .descriptorStarRt {
	background:					url(../img/descriptors/star.png) top left no-repeat;
}

.descriptorOf {
	width:						16px;
	height:						24px;
	margin:						0px -2px 0px 2px;
	float:						right;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/descriptors/of.png');
	overflow:         hidden;
}
html>body .descriptorOf {
	background:					url(../img/descriptors/of.png) top left no-repeat;
}

#footer {
	text-align:					center;
	color:						#aaa;
	width:						820px;
	height:						30px;
	border-top:					1px solid #aaa;
	margin:						15px 5px 0px 5px;
	padding:					8px 0px 0px 0px;
	position:					relative;
}

#footerOrn {
	width:						59px;
	height:						10px;
	background:					url(../img/footer_orn.png) top left no-repeat;
	position:					absolute;
	top:						-6px;
	left:						380px;
	overflow:         hidden;
}

#pgHeightShim { /* keeps main content area at least Npx high */
	width:						1px;
	height:						400px;
	background-color:			#fff;
	float:						left;
	overflow:         hidden;
}

#content {
	width:						820px;
	margin:						20px 5px 0px 5px;
	padding:					0px 0px 15px 0px;
	position:					relative;
}

#contentLt {
	width:						390px;
	padding:					0px 5px 0px 14px;
	float:						left;
	position:					relative;
	z-index:          100;
}

#contentLt img.news {
	margin:						0 10px 10px 0;
}

#contentRt {
	color:						#fff;
	width:						360px;
	padding:					6px 15px 8px 15px;
	margin:						0px 9px 0px 9px;
	background:					url(../img/patterns/14mod.jpg) top left repeat;
	border:						1px solid #999;
	float:						left;
	position:					relative;
	top:						-3px;
	display:					inline;
}

#contentRtImg {
	width:						314px;
	padding:					2px;
	margin:						0px 25px 30px 65px;
	border:						1px solid #999;
	float:						left;
	display:					inline;
}

#contentFull {
	width:						782px;
	padding:					0px 24px 8px 14px;
	position:					relative;
}

#recentWork {
	width:						360px;
	height:						34px;
	margin:						0px 0px 8px 0px;
	position:					relative;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/recent_work_mid.png');
	overflow:         hidden;
}
html>body #recentWork {
	background:					url(../img/recent_work_mid.png) top left no-repeat;
}

#recentWorkLt {
	width:						20px;
	height:						41px;
	position:					absolute;
	left:						-5px;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/recent_work_lt.png');
	overflow:         hidden;
}
html>body #recentWorkLt {
	background:					url(../img/recent_work_lt.png) top left no-repeat;
}

#recentWorkRt {
	width:						19px;
	height:						45px;
	position:					absolute;
	right:						-4px;
	filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/recent_work_rt.png');
	overflow:         hidden;
}
html>body #recentWorkRt {
	background:					url(../img/recent_work_rt.png) top left no-repeat;
}

.imgFeatured {
	width:						340px;
	height:						288px;
	border:						1px solid #aaa;
	padding:					2px;
	margin:						20px 7px 20px 7px;
	background-color:			#efefef;
	position:					relative;
}

.imgFeaturedClient {
	width:						340px;
	height:						288px;
	position:					absolute;
	top:						2px;
	left:						2px;
	/*
	-moz-opacity:				0;
	-ms-filter:					"alpha(opacity=0)";
	filter:						alpha(opacity=0);
	opacity:					0;
	*/
	display:					none;
	z-index:					1;
}

.imgFeatured img,
.imgFeatured .imgFeaturedClient img {
	border:						0px;
}



/*
.clear {
  font-size:          0px;
  height:           1px;
  clear:            both;
  margin-bottom:        -1px;
  background:         transparent;
}
*/



/* ***************************
	NAV
*************************** */

#navCont {
	width:						820px;
	height:						37px;
	background:					url(../img/nav_bg.png) top left repeat-x;
	margin:						0px 5px 6px 5px;
	position:					relative;
}

#navLt {
	width:						4px;
	height:						37px;
	background:					url(../img/nav_bg_lt.png) top left no-repeat;
	float:						left;
	overflow:         hidden;
}

#navRt {
	width:						4px;
	height:						37px;
	background:					url(../img/nav_bg_rt.png) top left no-repeat;
	float:						left;
	overflow:         hidden;
}

#navMain {
	width:						395px;
	height:						29px;
	float:						left;
	padding:					4px 208px 4px 209px
}

.navDivider {
	width:						29px;
	height:						29px;
	background:					url(../img/nav_divider.png) top left no-repeat;
	float:						left;
	overflow:         hidden;
}

a.navHome,
a.navHomeSel,
a.navPortfolio,
a.navPortfolioSel,
a.navAbout,
a.navAboutSel,
a.navContact,
a.navContactSel {
	text-decoration:			none;
	height:						29px;
	display:					block;
	float:						left;
	cursor:						pointer;
	overflow:         hidden;
}

a.navHome,
a.navHomeSel {
	width:						61px;
	display:					block;
	background:					url(../img/nav_home.png) no-repeat;
}
a.navHome:link,
a.navHome:visited {
	background-position:		0px 0px;
}
a.navHome:active,
a.navHome:hover,
a.navHomeSel {
	background-position:		0px -29px;
}

a.navPortfolio,
a.navPortfolioSel {
	width:						61px;
	display:					block;
	background:					url(../img/nav_home.png) no-repeat;
}
a.navPortfolio:link,
a.navPortfolio:visited {
	width:						97px;
	background:					url(../img/nav_portfolio.png) 0px 0px no-repeat;
}
a.navPortfolio:active,
a.navPortfolio:hover,
a.navPortfolioSel {
	width:						97px;
	background:					url(../img/nav_portfolio.png) 0px -29px no-repeat;
}

a.navAbout,
a.navAboutSel {
	width:						61px;
	display:					block;
	background:					url(../img/nav_home.png) no-repeat;
}
a.navAbout:link,
a.navAbout:visited {
	width:						67px;
	background:					url(../img/nav_about.png) 0px 0px no-repeat;
}
a.navAbout:active,
a.navAbout:hover,
a.navAboutSel {
	width:						67px;
	background:					url(../img/nav_about.png) 0px -29px no-repeat;
}

a.navContact,
a.navContactSel {
	width:						61px;
	display:					block;
	background:					url(../img/nav_home.png) no-repeat;
}
a.navContact:link,
a.navContact:visited {
	width:						83px;
	background:					url(../img/nav_contact.png) 0px 0px no-repeat;
}
a.navContact:active,
a.navContact:hover,
a.navContactSel {
	width:						83px;
	background:					url(../img/nav_contact.png) 0px -29px no-repeat;
}




/* ***************************
	MAIN CONTENT AREA
*************************** */

/* portfolio */

#contentRtPortfolio {
	width:						392px;
	padding:					6px 0px 8px 0px;
	margin:						32px 9px 0px 9px;
	float:						left;
/*	position:					relative;
	top:						-3px; */
}

#tnCol {
	width:						360px;
	margin:						10px 0px 0px 0px;
	position:					relative;
}

#clientImgArea {
	width:						360px;
	padding:					6px 15px 8px 15px;
	background:					url(../img/patterns/14mod.jpg) top left repeat;
	border:						1px solid #999;
	position:					relative;
/*	top:						-3px;
	overflow:					hidden; */
}

#clientLoc {
	font-style:					italic;
	color:						#bbb;
	margin:						0px 0px 6px 0px;
	position:					relative;
	top:						-4px;
}

#tnMsgCont {
	height:						26px;
}

.tnMsgOff {
	font-style:					italic;
	color:						#bbb;
	font-size:					10px;
	line-height:				1.5;
	padding:					8px 0px 2px 3px;
}

.tnMsgOver {
	font-style:					normal;
	font-weight:				bold;
	color:						#99abba;
	font-size:					11px;
	line-height:				1.5;
	padding:					8px 0px 0px 3px;
}

ul#tnList {
	list-style-type:			none;
	margin:						0;
	padding:					0;
}
	
ul#tnList li {
	float:						left;
	margin:						0;
	padding:					0;
	position:         relative;
}
	
ul#tnList li a:link,
ul#tnList li a:hover,
ul#tnList li a:active,
ul#tnList li a:visited {
	width:						30px;
	height:						30px;
	margin:						3px;
	padding:					2px;
	border:						1px solid #bbb;
	background-color:			#fff;
	display:					block;
}
	
ul#tnList li a.sel,
ul#tnList li a:hover,
ul#tnList li a:active {
	border:						1px solid #888;
	background-color:			#e8d7a2;
}

ul#tnList li a img {
	border:						0px;
}

.hrDivider {
	width:						60%;
	height:						1px;
	margin:						20px 0px 20px 0px;
	margin-left:				17%;
	background-color:			#99abba;
	overflow:         hidden;
}

a.external {
	padding:					0px 21px 0px 0px;
	background:					url(../img/external.png) top right no-repeat;
}


/* form */

form {
	position:						relative;
}
input.text {
	font:								1.2em/1.1em Helvetica,sans-serif;
	height:							16px;
	width:							300px;
	margin:							0 5px 7px 0;
	padding:						3px 4px 1px 3px;
	border:							1px solid #ccc;
	border-top-color:		#b2b2b2;
	border-left-color:	#b2b2b2;
	display:            block;
	clear:              both;
}

textarea {
  font:								  1.2em/1.2em Helvetica,sans-serif;
  width:                300px;
  padding:						  3px 4px 1px 3px;
  border:							  1px solid #ccc;
	border-top-color:		  #b2b2b2;
	border-left-color:	  #b2b2b2;
	resize:               vertical; /* safari only */
}

.fItem {
	margin:						1px 0px 1px 0px;
	display:					block;
}

.fLabel {
	font-weight:				bold;
	text-align:					right;
	line-height:				1.7;
	width:						80px;
	padding:					3px 4px 0px 0px;
	float:						left;
}

.fField {
	float:						left;
}

form .error input,
form .error textarea {
  border-color:         #e99b21;
}
form .error .fLabel {
  color:                #e99b21;
}

#sendEmail {
  display:          none; 
  width:						450px;
  min-height:       300px;
  height:           auto !important;
  height:           300px;
  padding:					10px;
  border:						1px solid #99abba;
	position:					absolute;
	top:						60px;
	left:						180px;
	z-index:        9000;
  filter:						progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/px_sage_op70.png');
}
html>body #sendEmail {
	background:					url(../img/px_sage_op70.png) top left repeat;
}

#sendEmailMsg {
	color:						#c00;
	text-indent:				84px;
	padding:					0px 0px 3px 0px;
}

#sendEmail .actions {
	padding:					10px 0;
}

#sendEmail #responseMsg {
  text-align:       center;
  font-size:        1.2em;
  padding-top:      126px;
  display:          none;
}

a.btn {
  color:            #fff;
  font:             normal 1.2em/1em "Lucida Grande",Helvetica,sans-serif;
  letter-spacing:   0.05em;
  text-transform:   uppercase;
  text-align:       center;
  text-decoration:  none;
  width:            130px;
  height:           22px;
  margin-right:     6px;
  padding-top:      8px;
  background:       transparent url(../img/btns.png) 0 0 no-repeat;
  float:            left;
  display:          inline;
}
a.btn:hover,
a.btn:active {
  background-position:-132px 0;
}
a.btnNonpref {
  background-position:0 -33px;
}
a.btnNonpref:hover,
a.btnNonpref:active {
  background-position:-132px -33px;
}



/* double selectors */

.bold {
	font-weight:				bold;
}

.unbold {
	font-weight:				normal;
}

.ital {
	font-style:					italic;
}

.right {
	text-align:					right;
}

.silver {
	color:						#878796;
}

.movProjectPg {
	margin:						20px 20px 20px 50px;
	float:						left;
}

.height50 {
	height:						50px;
}

.invisible {
	visibility:					hidden;
}

.visible {
	visibility:					visible;
}

.unDisplayed {
	display:					none;
}

.displayed {
	display:					block;
}

/* Tips overrides */
div.tooltip {
	width:						151px;
	height:						auto;
	display:					block;
	visibility:					visible;
	position:					absolute;
	top:              25px;
  left:             -10000px;
/*  left:             10px;*/
	cursor:           pointer;
	z-index:          1000;
}

div.tooltip .tip-top,
div.tooltip .tip-pt {
	width:						151px;
	height:						1px;
	overflow:         hidden;
	position:         relative;
	background:					transparent url(../img/tooltip_top.png) 0 -24px no-repeat;
}
div.tooltip .tip-pt {
	width:						37px;
	height:						24px;
	background-position:-14px 0;
  left:             14px;
  top:              0;
}

div.tooltip .tip-btm {
	width:						151px;
	height:						2px;
	background:					transparent url(../img/tooltip_btm.gif) top left no-repeat;
	overflow:         hidden;
}

div.tooltip .tip {
	text-align:					center;
	font:						bold 1em/1.1em "Lucida Grande",Arial,sans-serif;
	width:						126px;
	padding:					8px 12px;
	background-color:			#eeddaf;
	border-right:				1px solid #cececd;
}