@charset "utf-8";
/* CSS Document */

/* Globals
********************************************************************************/
	* {margin: 0; padding: 0}
	body {font-size: 80%; color: #444; font-family: Georgia, "Times New Roman", Times, serif;
		background: #7e0f20 url(../images/layout/bg.jpg) center top no-repeat}

	h1 {float: left; width: 350px}
	h2 {float: right; width: 376px; margin-right: 66px; height: 150px; background-color: white}
	h3 {margin-left: 66px; margin-bottom: 1.0em; color: #c05048; 
		font-weight: normal; font-size: 220%; letter-spacing: 0.2em}
	h4 {margin-bottom: 0.5em; color: #c05048; 
		font-weight: bold; font-size: 120%; letter-spacing: 0.2em}
	h5 {font-size: 110%}
	
	a {color: #444; text-decoration: none}
	p a, h5 a {border-bottom: 1px dotted #c05048}
	p a:hover, h5 a:hover {border-bottom-style: solid}
	a img {border: none}
	
	ul {}
	li {}
	
	#wrap {position: relative; width: 792px; margin: auto}
	
	.thisRed {color: #c05048}
	.lozenge {padding: 8px; background: #e2d5cc}
	.lozTight {padding: 4px; background: #e2d5cc}

/* Header block
********************************************************************************/
	#masthead {width: 792px; height: 213px; margin: 20px auto 0 auto; 
		background-color: white; border-bottom: 1px solid #bc4f47}

	#contacts {position: absolute; top: 160px; left: 146px; color: #404040; text-align: center}
	#phone {margin-top: 0.3em; font-size: 120%; letter-spacing: 0.2em}

	#navTop {position: absolute; right: 8px; top: 180px; color: #c05048; font-size: 120%}
	#navTop a {color: #888; text-decoration: none; border-bottom: 1px dotted silver}
	#navTop a:hover {color: #c05048; border-bottom: 1px solid #c05048}

/* Main content
********************************************************************************/
	#content {width: 776px; min-height: 400px; margin: 0 auto 20px auto; 
		background: #f9f7f5 url(../images/layout/bgContent.jpg) center top no-repeat; 
		padding: 1.5em 8px 0 8px}
	#content p {line-height: 1.7; margin-bottom: 1em; }
	#content p.intro {font-size: 120%; letter-spacing: 0.1em; }

/* Main content - grid positioning
********************************************************************************/
/* Item anchors */
	.left1 {float: left}
	.left2 {float: left; margin-left: 66px}
	.left3 {float: left; margin-left: 132px}
	.left4 {float: left; margin-left: 198px}
	.left5 {float: left; margin-left: 264px}
	.left6 {float: left; margin-left: 330px}
	.right1 {float: right; margin-right: 0px;}
	.right2 {float: right; margin-right: 66px;}
	.right3 {float: right; margin-right: 132px;}
	.right4 {float: right; margin-right: 198px;}
	.pullL1 {margin-left: -66px;}

/* Item widths */
	.span2 {width: 116px}
	.span3 {width: 182px}
	.span4 {width: 248px}
	.span5 {width: 314px}
	.span6 {width: 380px}
	.span7 {width: 446px}
	.span8 {width: 512px}
	.span9 {width: 578px}
	.span10 {width: 644px}
	.span11 {width: 710px}
	.span12 {width: 776px}

/* Other */
	.gutR {margin-right: 16px}
	.gutB {margin-bottom: 16px}
	.lineSpace1 {padding: 1em 0}

/* Footer block
********************************************************************************/
	#footer {margin-top: 0.5em; padding-top: 1.5em; border-top: 1px solid #e2d5cc;}
	#footer a {color: #c05048; background: white; text-decoration: none; 
		border: 1px dotted #e2d5cc; margin-right: 1em; padding: 2px}
	#footer a:hover {color: white; background-color: #c05048; 
		border-color: #a40623; border-style: solid; }
	#subFooter {color: #888}

	#devCred {width: 792px; height: 70px; padding-top: 20px; text-align: right; 
		font-size: 80%; color: silver; font-family: 'trebuchet ms', sans-serif; 
		background: url(../images/layout/talespin.gif) no-repeat right -5px}
	#devCred a {color: silver; text-decoration: none; border-bottom: 1px dotted silver}
	#devCred a:hover {color: #eee; border-bottom: 1px solid #eee}

/* Gallery pages
********************************************************************************/
	#gallery {position: relative; float: left; width: 330px; height: 432px; 
		margin: 8px; background: white}
	
	img.full, #mainPic	{position: absolute; top: 8px; left: 8px; width: 248px; height: 416px}
	img.full {display: none}
	#mainPic {z-index: 1}

	img.thumb {position: absolute; right: 4px; width: 50px; height: 92px; border: 4px solid white}
	img#thumb1 {top: 4px}
	img#thumb2 {top: 112px}
	img#thumb3 {top: 220px}
	img#thumb4 {top: 328px}
	
	#gallery a:hover img.full {display: block; z-index: 10}
	#gallery a:hover img.thumb {border-color: #f5ccab}

/* CV pages
********************************************************************************/
	#cv th {font-size: 120%; color: #c05048}
	#cv .colA, #cv .colB, #cv .colC {padding: 0.3em 0}
	#cv .colA {width: 314px; padding-right: 16px; text-align: left}
	#cv .colB {width: 248px; padding-right: 16px; text-align: left}
	#cv .colC {width: 182px; text-align: right}


/* The grid
********************************************************************************/
/*
	#content {background: white url(../images/layout/grid792-12.png) center top repeat-y}
*/

/* CSS3
********************************************************************************/
	#masthead, #content {
		-moz-box-shadow: 5px 5px 10px #888;
		-webkit-box-shadow: 5px 5px 10px #888;
		box-shadow: 5px 5px 10px #888;
		}

	#content {
		-moz-border-radius-bottomleft: 20px;
		-moz-border-radius-bottomright: 20px;
		-webkit-border-radius-bottomleft: 20px;
		-webkit-border-radius-bottomright: 20px;
		border-radius-bottomleft: 20px;
		border-radius-bottomright: 20px;
		}

	.lozenge {
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
		-moz-box-shadow: 5px 5px 10px #888;
		-webkit-box-shadow: 5px 5px 10px #888;
		box-shadow: 5px 5px 10px #888;
		}

	.lozTight {
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		-moz-box-shadow: 2px 2px 4px #888;
		-webkit-box-shadow: 2px 2px 4px #888;
		box-shadow: 2px 2px 4px #888;
		}

/* Gallery */
	#mainPic {
		/*
		-moz-box-shadow: 4px 4px 5px #888;
		-webkit-box-shadow: 4px 4px 5px #888;
		box-shadow: 4px 4px 5px #888;
		*/
		}
	img.thumb {
		-moz-box-shadow: 1px 1px 3px #888;
		-webkit-box-shadow: 1px 1px 3px #888;
		box-shadow: 1px 1px 3px #888;
		}