@charset 'utf-8';

/*
 Keith Schofield 1.0 ENCODING UTF-8
 

/* Basics GUI
------------------------------ */
/*  
 *      File: basis.css
 *      Abstract: CSS properties for Keith Schofield
 *      Version: 1.0
 *      © Marc Wright, Tim Kaiser, Team-Tejat Hamburg 2009 http://www.tejat.de	
  
  indish turquise: #77b5c2
 */  
    
/*body properties*/ 
/*
::selection {
  background: transparent;
}
*/


html{
    overflow:hidden;
    font: 80% Times, serif;
}

/* body properties */
body{
    background-color: #fff; 
    padding: 0;
    margin: 0 ;
    overflow:hidden;
}

img { border: 0px solid #fff; }

.ffw{ cursor: pointer;}

#parent{
  padding-top: 7%;
}

#loading{
  position: absolute;
  top: 45%;
  width: 100%;
  text-align: center;
  z-index: 5;
  font-size: 1em;
  font-style: italic;
  letter-spacing: 1px;
}

/* K. Schofield Logo */
#logo{
    position: relative;
    left:-105px;
    top:20px;
    width: 219px;
    height: 31px;
}

#playstop_div{
  display: none;
}

.ampersand{
  font-family:'palatino linotype',baskerville,'times new roman',serif;
  font-size: 110%;
}

ul#static_lang{
  display:none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
}

/* about/ contact ul li class */
.info{
  margin-left: 30px;
}

/* navigation UL styles */
#ul_projects{
    list-style: none;
    position: relative;
    top: 15px;
    text-align: center;
    padding-bottom: 40px;
    width: 99%;
}

/* navigation LI city styles */
.project_li{
    position: relative;
    text-transform: lowercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-style: italic;
    display: inline-block;
    padding: 3px;
    padding-bottom: 10px;
    
}


.project_li a{
  text-decoration: none;
  color: #000;
}

.project_li a:hover{
  color: #666;
}

/* active portfolio */
.active a{
  color: #4b454b;
}

li#li-imprint.active a{
  color: #4b454b;
}
/* position of picture container 
   ATTENSION - DO NOT ADD A BORDER */
#image_container{
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  display: none;
}


/* navigate right --> */
#image_container img{
  width: 100%;
  min-width: 800px;
  background-color: #000;
  z-index: 10 !important;
}

/* set hidden if no js is active */
img.panorama{
  display: none;
  z-index: 10 !important;
  cursor: e-resize;
}

#navigation{
  display: none;
  position: relative;
  width:100%;
}

/* navigate left <--  */
#nav_overlay{
  z-index:99 !important; 
  border-right: 0px solid red; 
  height: 100%;
  width: 50%;
  position: relative;
  cursor: w-resize;
  border: 0px solid #999;
}

/* text container*/
#text_container{
  position: relative;
  border: 1px solid white;
  z-index: 100;
  display: none;
  background-color: #fff; 
  width: 100%;
  height: 100%;
  
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
  
}


/* inner text container aas picture description */
#inner_text_container{
  border: 0px solid red;
  width: 65%;
  max-width: 700px;
  margin-left: 20%;
  text-align: left;
  font-size: 13px;
  line-height: 20px;
  bottom: 50px;
  position: absolute;
}

/* inner text container at contact and about */

#inner_text_container_contact{
  border: 1px solid #f0ecec;
  width: 96%;
  padding: 10px;
  margin-left: 11px;
  margin-top: 9px;
  text-align: left;
  font-size: 13px;
  line-height: 20px;
  color: #333;
  z-index: 999;
  position: relative;
  height: 81%;
  overflow: hidden;
  overflow-y: auto;
  
}


#inner_text_container_contact a{
  text-decoration: none;
  color: #000;
}
/* pager that shows num images (CLICKABLE) */
#pager{ 
  float:right;
  left: 0px;
  padding:0;
  margin:0;
  margin-top:15px;
  z-index:99;
  border: 0px solid #999;
}

/* is shown when Keith's story about the pic is avail. */
#story{
  display: none;
  float:left;
  left: 0px;
  padding:0;
  margin:0;
  margin-top:7px;
  z-index:99;
  width:19px;
  height:16px;
  background-image: url(http://keith-schofield.com/art/story.png);
  cursor: pointer;
}



#pager a.activeSlide { 
  /*background: #5a6350;*/ 
  color: #5a6350; 
  background-image: url(http://keith-schofield.com/art/switch_dunkel.png); 
  background-repeat: no-repeat;
}
 
#pager a { 
  background-image: url(http://keith-schofield.com/art/switch_hell.png);
  background-repeat: no-repeat;
  text-decoration: none; 
  padding:2px;
  margin-left:4px;
  font: 0px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
  width: 6px !important;
  height:6px !important;
  float: left;
  font-size: 0%;
  color: transparent !important;
  }

/* image title */
#title{
  z-index:999;
  display: none;
  position: absolute !important;
  top: 20%;
  left: 20%;
  width: 312px;
}
#title_contact{
  z-index:999;
  display: none;
  position: absolute;
  top: 20%;
  right: 10%;
  width: 312px;
}
div#title_mid_contact a { outline: none; color: #fff; text-decoration: none; font-weight: bold; }

.drag{
  cursor: move;
}


#title_top, #title_top_contact{
  width:312px;
  height:22px;
  background-image: url(../art/title_top.png);
}

#close{
  background-image: url(../art/close.png);
  width: 13px;
  height:13px;
  position: relative;
  left: 11px;
  top: 5px;
  cursor: pointer;
}
#title_mid{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  width:272px;
  font: 9px Times, serif;
  line-height: 16px;
  letter-spacing: 1px;
  background-image: url(../art/title_mid.png);
  color: #e4e2e2;
}
#title_mid_contact{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  width:272px;
  font: 9px Times, serif;
  line-height: 16px;
  letter-spacing: 1px;
  background-image: url(../art/title_mid.png);
  color: #e4e2e2;
}


#title_bottom, #title_bottom_contact{
  width:312px;
  height:24px;
  background-image: url(../art/title_bottom.png);
  
}


#imprint_text{
  font: 15px Times, serif;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-style: italic;
  padding-left: 40px;
  padding-right: 40px;
  
  text-align: center;
  width: 90%;
  top: 20%;
  position: absolute;
  color: #d5c1c1;
  text-shadow: #fff 0px 1px 1px
  }



/* grow box */
/* intern css, see keith-schofield.js */


.no-javascript{
  position: absolute;
  left: 100px;
  top: 200px;
  font: 0.6em Arial, "Trebuchet MS", Verdana, sans-serif;
}