/*	=========	© 2010 Steve Raskin	=========	*/
@import url(/css/otl_0210_nav.css);
@import url(/css/otl_css3.css);

html *	{ margin: 0; padding: 0; border: 0; outline: 0; /*?*/}
ul, li	{ list-style: none; line-height: 1.2em;}
li a		{ text-decoration: none; }
: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	{ color: #f35109; color: #a8d200; color: #a2c900; }
a:hover					{ color: #000; }

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

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; }

/*	======	BIG BOXES	======	*/
/*
<div id="container">
	<div id="mast">
	<div id="menu">
	<div id="column-wrapper">
		<div class="aux">
		<div id="main-content">

#e7e4d2; = taupe ... #5496ab; = dark teal
*/

body	{
	font-family: geneva, helvetica, arial, tahoma, sans-serif;
	text-align: center;
	font-size: 81%;
	line-height: 1.65em;
	text-align: left;
	color: #454545;
	background: #fff url(/images/mast_tile_texture_dark_blue_3x150.gif) 0 0 repeat-x;
	background: #fff url(/images/mast_tile_yellow_21x150.gif) 0 0 repeat-x;
	background: #d2f0d2 url(/images/mast_tile_texture_dark_blue_3x150.gif) 0 -0px repeat-x;
	background: #fff url(/images/bg_body_eschercombo_30x450.gif) 0 0 repeat-x;
	background: #fff url(/images/mast_tile_texture_dark_blue_6x720.png) 0 0 repeat-x;

}
body.gallery	{ background: #151515; }

/*	======	#container holds the drop-shadow bg	======	*/
#container	{
	width: 1020px;
	/*min-height: 750px;*/
	margin: 30px auto 0 auto;
	padding-top: 30px;
	font-size: 1em;
	background: transparent url(/images/bg_container_1020x3c.png) 0 0 repeat-y;
	}

#mast,
#menu,
#column-wrapper,
#footer				{ width: 900px; margin: 0 auto; }

/*	======	MASTHEAD		======	*/
#mast				{ display: block; height: 30px; position: relative; color: #000; background: #fff; }
#mast #logo		{ float: right; display: block; width: 273px; margin-right: -6px; }
#mast #tag		{ float: left;  display: block; width: 286px; margin: 6px 0 0 3px; }


/*	======	SITE NAV		======	*/
#menu		{ clear: both; height: 45px; background: transparent url(/images/menu_3/menu_div_bg_tile_3x135.gif) 0 -45px repeat-x; border-top: 0px solid #0d87a7; }
#upgrade-browser	{ display: none; /* see otl_0210_ie6.css */ }

/*	======	COLUMN-WRAPPER		======	*/
#column-wrapper			{ clear: both; min-height: 450px; padding-top: 45px; }
#column-wrapper:after	{ /*clearfix*/content:".";display:block;height:0;clear:both;visibility:hidden; }
noscript p					{ margin: -15px 0 30px; padding: 15px; background: #fff; color: red; line-height: 1.65em; border: 1px solid red; }

/*	======	COLUMNS	======	*/
/*
#column-wrapper = 900px; #aux = 210px + 30px right-margin = 240px ... ergo #main-content = 660px
#column-wrapper = 900px; #aux = 240px + 30px right-margin = 270px ... ergo #main-content = 630px
*/

/*	======	COLUMN: AUX	======	*/
div.aux	{ display: block; float: left; width: 210px; width: 240px; margin-right: 30px; line-height: 1.5em; font-size: .9em; }

/*	======	COLUMN: MAIN CONTENT	======	*/
div#main-content			{ float: left; width: 660px; width: 630px; width: 621px; padding-right: 6px; }
div#main-content:after	{ /*clearfix*/content:".";display:block;height:0;clear:both;visibility:hidden; }

/*	======	EXCEPTIONS	======	*/
body#resume .aux,
body.contact .aux,
body#error .aux		{ display: none; }

body#resume #main-content,
body.contact #main-content,
body.gallery #main-content	{ width: 900px; width: 885px; padding: 0 6px; }


/*	======	FOOTER	======	*/
#footer {
	clear: both;
	position: relative;
 /*	position: fixed;
	left: 0;
	bottom: 0;	*/
/*	width: 100%;	*/
/*	margin-top: 7.5em;	*/
	width: 930px;
	margin: 30px;
	padding: 15px;
	font-size: .9em;
	color: #555;
	background: #eee;
	border-top: 1px solid #999;
	border-bottom: 3px double #999;
	}

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

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


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

h1.hdr		{ clear: both; display: block; position: relative; margin: 45px 0 0 0; text-indent: -999em; border-bottom: 1px dotted #0f6996; }
h1.hdr span	{ display: block; position: absolute; top: 0; text-indent: 0; }

/*	======	home page	======	*/
h1#about-otl				{ height: 21px; margin-top: 0; background: #fff url(/images/headers/hdr_about_otl_160x21.gif) right top no-repeat; border: 0; }
h1#why-choose-me			{ height: 26px; background: #fff url(/images/headers/hdr_why_choose_me_387x26.gif) right bottom no-repeat; }
h1#why-choose-me			{ height: 26px; background: #fff url(/images/headers/hdr_why_choose_me_216x26.gif) left bottom no-repeat; }
h1#why-choose-me-not		{ height: 30px; background: #fff url(/images/headers/hdr_why_choose_me_not_426x30.gif) right bottom no-repeat; }
h1#this-just-in			{ height: 27px; background: #fff url(/images/headers/hdr_this_just_in_165x27.gif) right bottom no-repeat; }
h1#design-accessibility	{ height: 29px; background: #fff url(/images/headers/hdr_desisgn_accessibility_303x29.gif) left bottom no-repeat; }

/*	======	pofo page	======	*/
h1#xhtml-css-dev		{ margin-top: 0; /*pofo_ix.php */ height: 25px; background: #fff url(/images/headers/hdr_xhtml_css_dev_350x25.gif) right bottom no-repeat; }
h1#accessibility		{ height: 28px; background: #fff url(/images/headers/hdr_accessibility_177x28.gif) right bottom no-repeat; }
h1#on-browsers			{ height: 20px; background: #fff url(/images/headers/hdr_on_browsers_173x20.gif) right bottom no-repeat; }
h1#usability			{ height: 28px; background: #fff url(/images/headers/hdr_usability_121x28.gif) right bottom no-repeat; }
h1#on-design			{ height: 31px; background: #fff url(/images/headers/hdr_on_design_147x31.gif) right bottom no-repeat; }
h1#design				{ height: 26px; background: #fff url(/images/headers/hdr_design_81x26.gif) right bottom no-repeat; }


/*	======	resume page	======	*/
h1#sr-cv					{ height: 28px; margin-top: 0; background: #fff url(/images/headers/hdr_sr_cv_332x28.gif) left bottom no-repeat; border: 0; }
	#sr-cv span			{ left: 345px; top: 9px; }
h1#summary				{ height: 27px; margin-top: 15px; background: #fff url(/images/headers/hdr_summary_122x27.gif) right bottom no-repeat; border: 0; }
	#summary span		{ right: 137px; top: 3px; }
h1#experience-code	{ height: 56px; background: #fff url(/images/headers/hdr_experience_code_538x56.gif) right bottom no-repeat; border: 0; }
h1#experience-music	{ height: 47px; background: #fff url(/images/headers/hdr_experience_music_340x47.gif) right top no-repeat; border: 0; }
h1#education			{ height: 17px; background: #fff url(/images/headers/hdr_education_133x17.gif) right bottom no-repeat; border: 0; }

/*	======	contact page	======	*/
h1#contact-me			{ height: 18px; margin-top: 0; background: #fff url(/images/headers/hdr_contact_me_156x18.gif) right bottom no-repeat; }

div.label-input,
label, input, textarea	{ display: block; clear: both; }


/*	resume uses only h1, h2, h3	*/
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; text-align: justify; }


/*	======	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; }

div#slideshow			{ width: 210px; border: 1px solid #fff; }
#slideshow div			{ display: none; width: 210px; margin: 0 auto; }
#slideshow .first		{ display: block }
#slideshow img			{ margin: auto; display: block }



#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		{ }
body.pofo .aux					{ float: left; /*border: 0; */}

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

div#thumbs-wrapper			{ border: 0px solid red; }
div#thumbs-wrapper:after	{ /*clearfix*/content:".";display:block;height:0;clear:both;visibility:hidden; }

#thumbs-wrapper img			{ float: left; margin-right: 30px; }

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

/*	======	Pofo Text	======	*/
.pofo-text		{ float: right; width: 285px; padding: .75em 0 1.5em 0; background: #fff; color: #666; }

/*	uses 225px total from #main-content, leaving 345px */
.pofo-text h2						{ /* someday I'll open them all and kill the unnecessary h2s */display: none; }
#main-content .pofo-text p		{ margin: 0 15px 15px 15px; text-align: left; }
.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 #f0f0f0; }


#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;
	padding: 6px 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.menu

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 */
.menu	{
	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;
	}

.menu 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;}