/*

frank johannes photography
http://www.frankjohannes.com

S C R E E N . C S S

Version: 		1.0
Last modified:	5.08.2011

*/


/*  I M P O R T   S T Y L E S
--------------------------------------------------------------------------------------------------- */

@import url(reset.css); /* Reset CSS */


/*  G L O B A L   S E T T I N G S   A N D   C L A S S E S
--------------------------------------------------------------------------------------------------- */

body { height: 100%; background: #fff; font-size: 100.01%; color: #000; text-align: center; }

#distance { width: 1px; height: 50%; margin-bottom: -270px; /* half of container's height */ float: left; } /* Vertical zentriert bei fester Höher (http://d-graff.de/fricca/center.html) oder bei variabler Höhe (http://brunildo.org/test/shrink_center_4.html) */
#container { background: transparent; clear: left; /* clear effect from #distance */ position: relative; font: italic 0.75em/140% Georgia, "Times New Roman" ,serif; text-align: left; color: #000; width: 1030px; height: 485px; margin: 0 auto 0; }
.webkit { width: 100%; height: 100%; /* Safari und Chrome brauchen ein zusätzliches DIV, um die 100% Höhe zu erkennen */ }
body#intro #container { cursor: pointer; }

h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl, pre, address, table, form, fieldset { margin-bottom: 15px; }


/* Headings ------------------- */

h1 { font-size: 30px; line-height: 1.2; color: #000; }
h2 { font-size: 24px; line-height: 1.2; color: #000; }
h3 { font-size: 16px; line-height: 1.4; }
h4 { font-size: 12px; }
h5 { font-size: 12px; }
h6 { font-size: 12px; }


/* Text ------------------- */

p { font-weight: normal; font-size: 1.5em; line-height: 1.35; }


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

a:link { color: #000; text-decoration: underline; -webkit-transition: color 0.2s linear; -moz-transition: color 0.2s linear; transition: color 0.2s linear; }
a:visited { color: #000; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }
a:active { color: #000; text-decoration: none; }


/* Debug ------------------- */

pre#debug { position: absolute; right: 20px; top: 20px; width: 800px; display: none; text-align: left; font-size: 0.8em; color: #999; background: #fff; z-index: 2000; }


/*  N A V I G A T I O N
--------------------------------------------------------------------------------------------------- */

nav { position: absolute; top: 0; left:0; width: 210px; height: 485px; }

nav ul { font-size: 12px; font-weight: bold; margin: 0; position: absolute; top: 198px; left: 0; z-index: 1; overflow: hidden; }
nav li { display: block; width: 200px; height: 18px; margin-bottom: 21px; }

nav a:link, nav a:visited { color: #000; text-decoration: none; margin-left: 0; }
nav a:hover, nav a:active { color: #000; text-decoration: underline; }

nav a { display: block; }
nav .current a { text-decoration: line-through; cursor: default !important; background-position: 0 -36px !important; }
nav a:hover{ background-position: 0 -18px !important; }
nav .current a:hover{ background-position: 0 -36px !important; }

nav a { width: 200px; height: 18px; display: block; }
nav a strong { display: none; }

nav a#about { background: url('../images/about.png') no-repeat 0 0; }
nav a#contact { background: url('../images/contact.png') no-repeat 0 0; }
nav a#portraits { background: url('../images/portraits.png') no-repeat 0 0; }
nav a#campaigns { background: url('../images/campaigns.png') no-repeat 0 0; }
nav a#publications { background: url('../images/publications.png') no-repeat 0 0; }
nav a#fashion { background: url('../images/fashion.png') no-repeat 0 0; }
nav a#inbetween { background: url('../images/inbetween.png') no-repeat 0 0; }
nav a#bruno-magazine { background: url('../images/bruno-magazine.png') no-repeat 0 0; }


/*  L O G O
--------------------------------------------------------------------------------------------------- */

div#logo { position: absolute; top: 52px; left: 3px; width: 200px; height: 55px; z-index: 3; overflow: hidden; }
div#logo a { display: block; }
body#intro div#logo { display: none; }
body#intro div#logo img { position: absolute; top: -55px; }


/*  M A I N
--------------------------------------------------------------------------------------------------- */

#content { position: absolute; top: 0; left: 280px; width: 690px; height: 485px; padding: 0; }
p.page { margin-top: 200px; display: none; }
p.current { display: block; }
p.text { margin-top: 200px; }

/* Introgallery ---------------------- */

#background-gallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: none; }
#background-gallery img { position: absolute; display: none; }
#background-gallery a.current img { display: block; }
#background-gallery a.next img { display: block; }
#background-gallery a.current img { z-index: 2; }
#background-gallery a.next img { z-index: 1; }

/* Ausrichtung der Bilder in Introgalerie. Sind center-Angaben enthalten, werden diese durch Javascript umgesetzt, siehe: resizeBgImage() in common.js */
#background-gallery img.left-top { left: 0; top: 0; }
#background-gallery img.left-bottom { left: 0; bottom: 0; }
#background-gallery img.right-top { right: 0; top: 0; }
#background-gallery img.right-bottom { right: 0; bottom: 0; }
#background-gallery img.center-top { top: 0; left: 0; }
#background-gallery img.center-bottom { bottom: 0; left: 0; }
#background-gallery img.left-center { left: 0; top: 0; }
#background-gallery img.right-center { right: 0; top: 0; }
#background-gallery img.center-center { left: 0; top: 0; }


/* Gallery -------------------- */

#gallery ul li img { cursor: pointer; }
.ajax-loader { width: 100%; height: 100%; background: transparent url('../images/ajax-loader.gif') no-repeat center center; }

div#last { position: absolute; width: 422px; height: 485px; bottom: 0; left: -77px; cursor: pointer; display: none; }
div#next { position: absolute; width: 405px; height: 485px; bottom: 0; right: -60px; cursor: pointer; display: none; }
div#title, div#download { position: absolute; width: 620px; height: 20px; bottom: -50px; left: 0; }
div#page { position: absolute; width: 70px; height: 20px; bottom: -50px; left: 621px; text-align: right; }

div#last span, div#next span { position: absolute; bottom: 0; display: block; text-align: center; font-size: 3em; cursor: pointer; }
div#next span { right: 0; width: 60px; }
div#last span { left: 17px; width: 60px; }
div#download span { font-size: 1.2em; }