@charset "utf-8";
/* Stylesheet: Jakob Berr Photography | Medium: Screen*/


/* Body
--------------------------------------------------------------------------------------------------*/

	body	{
			height:100%;
			background-color:#111;
			margin:0;
			padding:0;
			font:62.5%/208% Trebuchet MS,Verdana,Helvetica,Arial,sans-serif;
			color:#DDD;
			text-align:justify;
			}

/* Temp
--------------------------------------------------------------------------------------------------*/
	
	#grid_left p,
	#grid_center p,
	#grid_right p {
			line-height:170%;
			}
	
	#grid_left em,
	#grid_center em,
	#grid_right em {
			margin-right:20px;
			font-style:normal;
			}

	#grid_left,
	#grid_center,
	#grid_right {
			width:270px;
			height:284;
			margin-top:40px;
			text-align:justify;
			}		
	
	#grid_left {
			float:left;
			}
	
	#grid_center {
			margin-left:auto;
			margin-right:auto;
			}
	
	#grid_right {
			float:right;
			}


/* Standard tags
--------------------------------------------------------------------------------------------------*/

	p		{
			font-size:1.2em;
			margin-top:5px;
			}
			
	#imagestage p {
			text-align:justify;
			}
	
	#footer p {
			font-size:1.1em;
			margin-top:9px;
			color:#555;
			}
			
	#thumbs p {
			margin:0 0 25px 0;
			padding:0;
			}
	
	img		{
			border:1px solid #333;
			padding:5px;
			}
	
	#header img {
			border:none;
			padding:0;
			}
			
	#thumbs img {
			background-color:#111;
			padding:3px;
			width:67px;
			}
			
	#fb img {
			border:none;
			}
	
	h1		{
			font-size:2.2em;
			letter-spacing:4px;
			text-align:center;
			color:#666;
			margin:0 0 20px 0;
			}
	
	h2		{
			font-size:2em;
			color:#666;
			padding:0;
			margin:15px 0;
			}
	
	h3		{
			font-size:1.6em;
			color:#666;
			}
	
	#resume_block h2 {
			font-size:1.6em;
			}
	

/* Links
--------------------------------------------------------------------------------------------------*/

	a		{
			color:#777;
			text-decoration:none;
			outline:none;
			font-weight:900;
			}
	
	#header a,
	#footer a {
			font-weight:normal;
			}
	
	em a	{
			color:#C55;
			}
	
	a:hover,
	#frontpage a:hover,
	.portfolio a:hover {
			color:#F00;
			}
	
	#menu ul li a.selected,
	#menu ul li p.selected {
			color:#C00;
			}
			
	#leftnav a,
	#rightnav a {
			padding:280px 20px;
			font-size:1.8em;
			color:#111;
			}
			
	#leftnav a:hover,
	#rightnav a:hover {
			color:#C00;
			}
			
	a.enter {
			padding:20px 150px 100px 150px;
			}


/* Tables & Lists
--------------------------------------------------------------------------------------------------*/

	
	
	table	{
			text-align:left;
			border:none;
			}
	
	#frontpage table {
			text-align:justify;
			}
	
	tr		{
			vertical-align:top;
			}
	
	td,
	tr	{
			padding:0;
			margin:0;
			}
	
	td.underline {
			border-bottom:1px #333 solid;
			padding-top:30px;
			}
	
	td.resume {
			padding-top:15px;
			}
	
	#menu ul li.selected {
			color:#C00;
			}


/* Container
--------------------------------------------------------------------------------------------------*/

	#container {
			margin:30px auto 0 auto;
			width:1024px;
			height:920px;
			background:#000;
			border:1px solid #333;
			}


/* Header
--------------------------------------------------------------------------------------------------*/

	#header	{
			width:1024px;
			height:76px;
			padding-top:20px;
			font-size:1.2em;
			}


/* Footer
--------------------------------------------------------------------------------------------------*/

	#footer	{
			position:absolute;
			left:50%;
			margin-left:-512px;
			top:908px;
			width:1024px;
			height:42px;
			border-top:1px #333 solid;
			}


/* Facebook
--------------------------------------------------------------------------------------------------*/

	#fb {
			position:absolute;
			left:50%;
			margin-left:-512px;
			top:970px;
			width:1024px;
			height:22px;
			text-align:right;
			padding:0;
			}


/* Spacer
--------------------------------------------------------------------------------------------------*/

	#spacer {
			width:100%;
			height:300px;
			}


/* Thumbs
--------------------------------------------------------------------------------------------------*/

	#thumbs {
			width:113px;
			height:590px;
			overflow:auto;
			position:absolute;
			left:50%;
			margin-left:600px;
			top:167px;
			}
			

/* Index
--------------------------------------------------------------------------------------------------*/

	#frontpage {
			width:1024px;
			height:770px;
			text-align:center;
			position:absolute;
			}
			
	.portfolio {
			width:964px;
			height:652px;
			margin:0 auto 0 auto;
			}


/* About
--------------------------------------------------------------------------------------------------*/

	#about	{
			width:500px;
			text-align:left;
			margin:150px auto 0 auto;
			}
			
	#about_text {
			width:268px;
			float:right;
			text-align:justify;
			padding-top:0;
			font-size:1.2em;
			}


/* Résumé
--------------------------------------------------------------------------------------------------*/

	#resume	{
			width:620px;
			height:580px;
			margin:80px auto 0 auto;
			}
	
	#resume_block {
			width:620px;
			height:505px;
			overflow:auto;
			margin:0;
			font-size:1.2em;
			}


/* Portfolio
--------------------------------------------------------------------------------------------------*/

	#leftnav,
	#rightnav {
			width:76px;
			height:60px;
			margin-top:320px;
			font-size:2.4em;
			text-align:center;
			font-family:Arial, Helvetica, sans-serif;
			}
	
	#leftnav {
			float:left;
			}
	
	#rightnav {
			float:right;
			}
	
	#imagestage {
			width:872px;
			margin:40px auto 0 auto;
			}
			
	#media {
			border:1px solid #333;
			margin:20px auto 0 auto;
			padding:5px;
			}
	
	#caption,
	#caption_vertical {
			margin:0 auto 0 auto;
			text-align:justify;
			}
	
	#caption {
			width:872px;
			}
	
	#caption_vertical {
			width:401px;
			}
			
			
/* Scrollbar
--------------------------------------------------------------------------------------------------*/

	.jspContainer {
			overflow: hidden;
			position: relative;
			}

	.jspPane {
			position: absolute;
			}

	.jspVerticalBar {
			position: absolute;
			top: 0;
			right: 0;
			width: 10px;
			height: 100%;
			background: #222;
			}

	.jspHorizontalBar {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 10px;
			background: #222;
			}

	.jspVerticalBar *,
	.jspHorizontalBar * {
			margin: 0;
			padding: 0;
			}

	.jspCap {
			display: none;
			}

	.jspHorizontalBar .jspCap {
			float: left;
			}

	.jspTrack {
			background: #222;
			position: relative;
			}

	.jspDrag {
			background: #333;
			position: relative;
			top: 0;
			left: 0;
			cursor: pointer;
			}

	.jspHorizontalBar .jspTrack,
	.jspHorizontalBar .jspDrag {
			float: left;
			height: 100%;
			}

	.jspArrow {
			background: #555;
			text-indent: -20000px;
			display: block;
			cursor: pointer;
			}

	.jspArrow.jspDisabled {
			cursor: default;
			background: #777;
			}

	.jspVerticalBar .jspArrow {
			height: 16px;
			}

	.jspHorizontalBar .jspArrow {
			width: 16px;
			float: left;
			height: 100%;
			}

	.jspVerticalBar .jspArrow:focus {
			outline: none;
			}

	.jspCorner {
			background: #eeeef4;
			float: left;
			height: 100%;
			}

	/* Yuk! CSS Hack for IE6 3 pixel bug :( */
	* html .jspCorner {
			margin: 0 -3px 0 0;
			}