/*	=========	© 2008 Steve Raskin	=========	*/

@import url(/css/otl_1208_menus.css);
/*@import url(/css/otl_1208_print.css);*/

html *	{ margin: 0; padding: 0; border: 0; outline: 0; /*?*/}
ul, li	{ list-style: none; line-height: 1.2em;}
:focus	{ outline: 0; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }

/*	====== global anchor styles ======	*/
a, a:link, a:visited	{ /*text-decoration: none;*/ color: #f35109; /*orange*/ color: #a8d200; }
a:hover		{ color: #000; text-decoration: underline; }

/*	============	resume stuff	============	*/	
a.external	{ padding-right: 15px; background: transparent url(/images/deco/icon_popup_orange_10x10.gif) right 50% no-repeat; }
/*	icon_popup_black_10x10.gif		icon_popup_10x10.gif	*/


img			{ display: block; }
a img			{ border: none; }
.nowrap		{ white-space: nowrap; }

.clearfix:after	{ /*clearfix*/content:".";display:block;height:0;clear:both;visibility:hidden; }

.left		{ float: left; }
.right	{ float: right; }
.clear	{ clear: both; height: 0; }

input.text	{ width: 100%; height: 1.2em; margin: 0 0 15px 0; padding: .3em; border: 1px solid #999; border-width: 1px 2px 2px 1px; }

/* #e7e4d2; = taupe ... #5496ab; = dark teal */
body	{
	font-family: helvetica, arial, tahoma, sans-serif;
	margin: 30px 0;
	text-align: center;
	font-size: 81%;
	line-height: 1.44em;
	color: #454545;
	background: #fff;
	}
body.gallery	{ background: #151515; }

#container	{
	width: 900px;
	min-height: 750px;
	margin: 0 auto;
	padding: 22px 0 3em 0;
	text-align: left;
	font-size: 1em;
	background: #004860 url(/images/mast_tile_texture_dark_blue_3x150.gif) 0 -30px repeat-x;
	border: 1px solid #004962;
	}
/*
<div id="mast">
<div id="menu">
<div id="page">
	... <div id="column-wrapper">
		... <div class="aux">
		... <div id="main-content">
*/
/*	======	BIG BOXES	======	*/
#mast, #menu, #page, #column-wrapper	{ width: 840px; margin: 0 auto; }

#mast					{ position: relative; height: 44px; color: #fff; }
	#tag				{ position: absolute; right: 0; top: 0; text-align: right; }
	#mast img#logo	{ border: 0px solid #fff; }

#upgrade-browser	{ display: none; }

#menu		{ clear: both; height: 45px; background: transparent url(/images/menu_3/menu_div_bg_tile_3x135.gif) 0 0 repeat-x; }
#menu p	{ position: absolute; left: 15px; top: 20px; color: #fff; display: none; }	/*	wtf?	*/

#page		{ margin: 0 auto; background: #fff; border: 1px solid #004962; border-top: 0; }

#column-wrapper			{ clear: both; min-height: 450px; margin-top: 9px; padding-top: 30px; /* border: 1px solid #004962; border-width: 0 1px; */}
#column-wrapper:after	{ /*clearfix*/content:".";display:block;height:0;clear:both;visibility:hidden; }
body#resume #column-wrapper	{ padding-top: 0; }
.gallery #column-wrapper		{ padding: 0; background: #151515; }


/*	======	FOOTER	======	*/
#footer {
	clear: both;
	position: relative;
 /*	position: fixed;
	left: 0;
	bottom: 0;	*/
/*	width: 100%;	*/
/*	margin-top: 7.5em;	*/
	padding: .9em .9em .9em 1.8em;
	font-size: .9em;
	color: #666;
	background: #e1e1e1;
	}

#footer a			{ color: #b4d236; }
#footer a:hover	{ color: #000; }

#footer #toll-free	{ position: absolute; right: .9em; bottom: .9em; font-size: 1.5em; color: #004962; }



/*	============	PRIMARY LAYOUT	============	*/
/* available width (#column-wrapper total) = 840px:
	- #aux:				180px + (60px padding) = 240px
	- #main-content:	510px + (60px padding, leave 30px gutter) = 600px		*/
.aux,
#main-content	{ float: left; display: block; }

div.aux		{
	width: 180px;
	width: 178px;
	margin: 0 30px 0 30px;
	text-align: center;
	line-height: 1.5em;
	font-size: .9em;
	background: #fff;
	background: transparent url(/images/bg_tiles/tile_f0f0f0.gif) 0 -2px repeat;
	border: 1px solid #ccc;
	border-top: 0px solid #ccc;
	border-bottom: 30px solid #ccc;
	border-width: 15px 1px;
	}

div#main-content		{
/*	div.aux = 180px + 60px margin; remaining width = 600px;	*/
	float: left;
	float: right;
	width: 570px;
	/* 30px whitespace on the right */
	margin-right: 30px;
/*	padding: 45px 0 0 240px;	*/
	padding: 15px 0 90px 0;
	border: 0px solid #efefef;
	}
div#main-content:after	{ /*clearfix*/content:".";display:block;height:0;clear:both;visibility:hidden; }

/*	======	ALT LAYOUTs: RESUME PAGE, CONTACT PAGE	======	*/
body.pofo .aux					{ background: #fff; } 
body#resume .aux,
body.contact .aux,
body#error .aux,
body.gallery .aux		{ display: none; }

body#resume #main-content,
body.gallery #main-content	{ width: 780px; /* 30px whitespace on the right */ padding: 30px 0 90px 0; }


/*	======	HEADERS & BASIC STYLES	======	*/
h1, h2, h3, h4, h5, h6		{ text-align: left; font-size: 1em; font-weight: normal; letter-spacing: 0.09em; }

/*	resume uses only h1, h2, h3	*/
h1						{ /* only in resume */ margin-bottom: -.9em; font-size: 1.8em; text-align: right; color: #000; font-variant: small-caps; }
h2						{ margin: 0 30px .75em 0; font-size: 1.5em; text-align: right; color: teal; border-bottom: 1px solid teal; }
body#resume h2,
body#error h2		{ margin: 1.35em 0 .75em 0; text-align: left; }
body#resume h3		{ margin-top: 1.2em; font-size: 1.2em; letter-spacing: 0; color: #000; }

/* use these for home page aux column	*/
.aux h3	{ margin: .9em 0; font-size: 1.35em; text-align: center; letter-spacing: 0; color: #666; font-weight: bold; font-variant: small-caps; }
.aux h4	{ font-size: 1em; margin: 0 0 3px 0; letter-spacing: 0; color: #333; text-align: center; }

#main-content p	{ margin-bottom: 1.5em; }


/*	======	HOME PAGE: AUX COLUMN = RECENT PROJECTS	======	*/
div.client-logos			{ padding: 1.5em; border: 1px solid #efefef; line-height: 50px;  }
div.client-logos:after	{ /*clearfix*/content:".";display:block;height:0;clear:both;visibility:hidden; }
div.client-logos img		{ float: left; margin-right: 3em; }

div.recent-project	{ width: 135px; margin: 0 auto 1.35em auto; padding-bottom: 1.35em; text-align: center; }
.recent-project img	{ margin: 0 auto; border: 1px solid #ccc; }

#availability			{ width: 117px; margin: 6px auto; margin: 0 auto 2.7em auto; padding: 9px; text-align: left; background: #eaead2; background: #004860; color: #fff; border: 3px solid #ccc; }

div#skype	{ display: none; width: 114px; margin: .9em 0 1.8em 0; text-align: center; border: 0px solid #ddd; }
#skype p		{ margin: 0 3px 3px 0; }
#skype img	{ float: right; margin-bottom: 6px; }

.line-through	{ text-decoration: line-through; }

/*	============	PORTFOLIO	============	*/
/*	#main-content available width = 570px TOTAL */
body.pofo #main-content		{ min-height: 1332px; /*background: #f6f6f6 url(/images/bg_tiles/tile_f0f0f0.gif) 0 -2px repeat; */}
body.pofo .aux					{ border: 0; }

#pofo-menu			{ /*position: fixed; */}
#pofo-ix-content	{ }

#main-content ul	{ margin: 0 0 1.8em 1.5em; }
#main-content li	{ margin-bottom: .3em; list-style: disc; }
#main-content h2	{ margin-right: 0; }

/*	======	Pofo Text	======	*/
div.pofo-text		{
	float: right;
	width: 218px;
	margin-right: 15px;
	padding: .75em 0 1.5em 0;
	text-align: right;
	background: #fff;
	color: #666;
	border: 1px solid #ccc;
	border-width: 1px 1px 30px 1px;
	}
/*	uses 225px total from #main-content, leaving 345px */

.pofo-text h2				{ /* someday I'll open them all and kill the unnecessary h2s */display: none; }
.pofo-text p				{ margin: 0 15px 15px 15px; }
.pofo-text p strong		{ color: #000; }
.pofo-text em				{ color: #b44500; color: #000; }


div.pofo-images	{ display: block; /*float: left;*/ width: 318px; margin-bottom: 30px; padding: 0 0 30px 0; }
.pofo-images img	{ margin-bottom: 30px; padding: 6px; background: #fff; border: 3px double #ccc; }


#loading-msg	{
	display: none;
	width: 220px;
	height: 19px;
	margin: 0 auto;
	background: transparent url(/images/galleries/deco/loading_black_220x19.gif) 0 0 no-repeat;
	text-indent: -9999em;
	}



/*	=========	CONTACT FORM	=========	*/

form		{ display: block; margin: 0; }
form div	{ margin-bottom: 15px; }

input,
textarea,
option,
.radio		{
	padding: 3px 9px;
	background: #f6f6f6;
	color: #de2142;
	color: teal;
	border: 1px solid #abb7b7;
	border-top: 2px solid #abb7b7;
	border-left: 2px solid #abb7b7;
	}

textarea, input	{ width: 300px; }

input.button			{ color: #666; width: 6em; font-weight: bold; text-align: center; border: 1px solid #abb7b7; border-right: 3px solid #abb7b7; border-bottom: 3px solid #abb7b7; }
input.button:hover	{ color: teal; border-color: teal; }





.gallery h2		{
	margin-bottom: 45px;
	padding-bottom: 3px;
	text-align: left;
	font-family: georgia, serif;
	font-style: italic;
	font-size: 1.11em;
	font-weight: bold;
	color: #fff;
	border-bottom: 3px double #999;
	}
.gallery h2 span	{ color: #999; font-weight: normal; font-style: normal; /*text-transform: uppercase; */}
.gallery h3			{ display: block; width: 120px; font-size: 1em; margin: 0 0 9px 0; text-align: left; color: teal; border-bottom: 1px solid teal; }

.gallery a			{ color: #348; text-decoration: none; outline: none; }
.gallery a:hover	{ color: #fff; }



/*
div#main_image.galleria_container
	-> span.caption
	-> div.galleria_wrapper
*/
.caption						{ display: block; float: right; margin-bottom: 6px; font-family: georgia, serif; color:#999; }
div.galleria_wrapper		{ clear: right; border: 0px solid yellow; }


/* Left column: thumbnails, lists */
#main-content div.gallery			{ clear: both; display: block; float: left; width: 135px; margin-right: 15px; }

/* LISTS */
#main-content .gallery ul			{ clear: left; display: block; float: left; width: 171px; width: 135px; list-style: none; margin: 0 0 30px 0; }
#main-content .gallery ul:after	{ /*clearfix*/content:".";display:block;height:0;clear:both;visibility:hidden; }
#main-content .gallery li			{ list-style: none; }

/* UL: thumbnail: see galleria.js: ~ line195: 'show the thumbnail' re: thumb styles to determine dimensions of enclosing li	*/ 
#main-content ul.gallery li	{ display: block; float: left; width: 36px; height: 36px; margin: 0 6px 9px 0; }
.gallery img.thumb				{ /* see galleria.js: ~ line195: 'show the thumbnail' ... */ }
.gallery img.selected			{ border: 1px solid #0ff; }
.gallery li div					{ left: 240px; left: 0; }
.gallery li div .caption		{ font:italic 0.7em/1.4 georgia,serif; }
	
/* UL: gallery menu */
#main-content .gallery-menu li	{ margin: 0 0 .6em 0; font-size: .9em; }
.gallery-menu li a					{ color: #93B401; }
#strathcona #strathcona-link a,
#hudson-river #hudson-river-link a,
#corey #corey-link a,
#bugs #bugs-link a						{ color: #666; }

#main_image		{
	display: block;
	float: left;
	margin: 0;
	background: transparent;
	background: #fff url(/images/galleries/deco/loading_white_219x18.gif) center center no-repeat;
	background: transparent url(/images/galleries/deco/loading_black_219x18.gif) center center no-repeat;
	}
	
#main_image img		{ margin-bottom: 15px; padding: 3px; border: 12px solid #fff; }

/*
div#main_image.galleria_container
	-> div.galleria_wrapper
	-> span.caption
p.nav

http://devkick.com/talk/forum/4/galleria/
http://monc.se/kitchen/category/jquery/
http://outtolaunch.com/html/macro2.shtml#/images/photo_galleries/flowers/2450_600x457.jpg
http://www.google.com/search?sitesearch=devkick.com&as_q=thumbnail%20size
*/

/* prev/next */
.nav	{
	clear: both;
	width: 120px; /*match UL*/
	padding: 3px 0;
	text-align: center;
	letter-spacing: 1px;
	/*text-transform: uppercase;*/
	font-weight: bold;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	}

.nav a 	{ color: teal; outline:none; }

.info		{ display: none; text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p	{ margin-top:1.6em;}