/* GENERIC ELEMENTS */
body, html{
  margin: 0;
  padding: 0;
  font-family: Trebuchet MS, Arial, Verdana;
  font-size: 11px;
  color: #FFF;
  background: #302E30;
  min-height: 100%;
}

html{
  height: 100%;
}

.screenreader{
  display: none;
}

a{
  color: #C6C6C6;
}

h1{
  font-size: 22px;
}

img{
  border: 0;
}

hr{
  display: none;
}

.ruler{
  width: 100%;
  height: 1px;
  background: #302E30;
}

#framework{
  border-top: 1px solid transparent;
  position: relative;
  margin: 0 auto;
  width: 990px;
  min-height: 100%;
  height: 100%;
}

#logo{
  position: absolute;
  top: 26px;
  left: 12px;
  z-index: 2;
}

#logo a{
  display: block;
  background: url('../images/logo_bg.png') 0 0 no-repeat;
  width: 137px;
  height: 29px;
}

#logo img{
  display: none;
}

#pagination{
  position: relative;
  width: 180px;
  height: 30px;
  background: url('../images/pagination_bg.png') 0 0 no-repeat;
}

#pagination .next, #pagination .previous{
  display: block;
  text-indent: -1982px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 35px;
  height: 30px;
  background: url('../images/pagination_bg.png');
}

/* NAVIGATION */
#navigation{
  position: absolute;
  top: 0;
  left: 0;
  background: url('../images/item_bg.png') 0 0;
  padding: 70px 0 5px 0;
  text-transform: uppercase;
  width: 180px;
  z-index: 1;
}

#navigation ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

#navigation ul li{
  font-size: 18px;
}

#navigation ul li#navigation-home{
  display: none;
}

#navigation ul li a{
  display: block;
  width: 156px;
  line-height: 18px;
  padding: 0 12px;
  color: #FFF;
  text-decoration: none;
}

#navigation ul li#navigation-news a:hover{
  background: url('../images/navigation-news-active_bg.png') 0 0 repeat-y;
}

#navigation ul li#navigation-portfolio a:hover{
  background: url('../images/navigation-portfolio-active_bg.png') 0 0 repeat-y;
}

#navigation ul li#navigation-about a:hover{
  background: url('../images/navigation-about-active_bg.png') 0 0 repeat-y;
}

#navigation-maximizer{
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 180px;
  background: url('../images/navigation-maximize-button.png') 0 0 no-repeat;
  cursor: pointer;
  z-index: 900;
}

#navigation #navigation-minimizer{
  position: absolute;
  top: 6px;
  right: 6px;
  height: 13px;
  width: 13px;
  background: url('../images/navigation-minimize-button.png') 0 0 no-repeat;
  cursor: pointer;
}

/* BACKGROUNDSLIDESHOW */
#backgroundimage-container img{
  display: none;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#backgroundimage-container img.active{
  display: block;
}

#button-previous, #button-next{
  z-index: 300;
  width: 180px;
  height: 115px;
  position: absolute;
  top: 300px;
}

#button-previous.active, #button-next.active{
  display: block;
}

#button-previous{
  right: 0;
  background: url('../images/button-previous_bg.png') 0 0 no-repeat;
}

#button-next{
  left: 0;
  background: url('../images/button-next_bg.png') 0 0 no-repeat;
}

#button-previous-overlay, #button-next-overlay{
  background: url('../images/nixel.png') 0 0;
  position: fixed;
  top: 0;
  cursor: pointer;
}

#button-previous-overlay{
  left: 0;
}

#button-next-overlay{
  right: 0;
}

/* CREDITS */
#credits{
  position: absolute;
  bottom: 0;
  left: 60px;
  background: url('../images/item_bg.png') 0 0;
  padding: 8px 10px;
  text-transform: uppercase;
  width: 180px;
  z-index: 300;
  font-size: 9px;
  height: 20px;
  overflow: hidden;
}

#credits:hover{
  height: auto;
  background: #000;
}

#credits h3{
  margin: 0;
  font-size: 9px;
  font-weight: normal;
}

#credits p{
  margin: 0;
}
#credits .credit{
  font-size: 11px;
}

#credits .credit a{
  color: #FFF;
  text-decoration: none;
}

/* PAGE-PORTFOLIO */
#page-portfolio #categorytitle{
  z-index: 300;
  display: none;
  position: absolute;
  top: 154px;
  width: 180px;
  height: 32px;
}

#page-portfolio #categorytitle.navigation-minimized{
  top: 45px;
}

#page-portfolio #categorytitle a{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-indent: -1982px;
  background: url('../images/item_bg.png') 0 0;
}

#page-portfolio #categorytitle a:hover{
  background: url('../images/categorytitle-rollover_bg.png') 0 0 no-repeat;
}

#page-portfolio #categorytitle.rollover h2{
  display: none;
}

#page-portfolio #categorytitle h2{
  margin: 4px 0 0 12px;
  font-size: 18px;
  text-transform: uppercase;
}

#page-portfolio #photoselector{
  margin-top: 154px;
  background: url('../images/item_bg.png') 0 0;
}

#page-portfolio #photoselector #categories{
  background: #000;
}

#page-portfolio #photoselector #categories ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#page-portfolio #photoselector #categories ul li{
  display: block;
  float: left;
  font-size: 18px;
  padding: 5px;
  margin-right: 15px;
  text-transform: uppercase;
}

#page-portfolio #photoselector #categories ul:after{ 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}

#page-portfolio #photoselector #categories ul li a{
  display: block;
  text-decoration: none;
  padding: 0 5px;
}

#page-portfolio #photoselector #categories ul li.active a{
  background: #302E30;
}

#page-portfolio #photoselector #categories ul li a:hover{
  background: #009FC6;
}

#page-portfolio #photoselector #thumbnails ul{
  list-style: none;
  margin: 0;
  padding: 0 0 10px 0;
}

#page-portfolio #photoselector #thumbnails ul:after{ 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}

#page-portfolio #photoselector #thumbnails ul li{
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  float: left;
  width: 130px;
  height: 115px;
  line-height: 115px;
}

#page-portfolio #photoselector #thumbnails ul li a{
  display: block;
  line-height: 115px;
  width: 100%;
  height: 100%;
  margin-top: 10px;
  margin-right: 10px;
  background: #302E30;
  text-align: center;
}

#page-portfolio #photoselector #thumbnails ul li a:hover{
  background: #000;
}

#page-portfolio #photoselector #thumbnails ul li a img{
  display: inline;
  vertical-align: middle;
}

#page-portfolio #pagination{
  margin-left: 810px;
  margin-top: 5px;
}

#page-portfolio #pagination .previous{
  left: 0;
  background-position: 0 -30px;
}

#page-portfolio #pagination .previous:hover{
  background-position: 0 -60px;
}

#page-portfolio #pagination .next{
  right: 0;
  background-position: -145px -30px;
}

#page-portfolio #pagination .next:hover{
  background-position: -145px -60px;
}

#page-portfolio #photoinfo{
  position: absolute;
  top: 200px;
  left: 0;
  display: none;
}

#page-portfolio #photoinfo.navigation-minimized{
  top: 90px;
}

#page-portfolio.portfolio-showimage #photoinfo{
  display: block;
  height: 16px;
  width: 180px;
  background: url('../images/button-info_bg.png') 0 0;
  z-index: 600;
}

#page-portfolio.portfolio-showimage #photoinfo.open{
  background: url('../images/item_dark_bg.png') 0 0;
  height: auto;
  width: 300px;
}

#page-portfolio #photoinfo div{
  display: none;
  padding: 30px 12px 12px 12px;
}

#page-portfolio #photoinfo div h2{
  font-size: 12px;
  margin: 0;
}

#page-portfolio #photoinfo.active div.active{
  display: block;
}

#page-portfolio #loading-animation{
  position: relative;
  margin: 0 auto;
  width: 32px;
  height: 32px;
  margin-top: 400px;
  background: url('../images/loading-animation_bg.gif') 0 0 no-repeat;
}

/* PAGE-NEWS */
#page-news #main{
  width: 645px;
  margin-left: 200px;
  padding-top: 64px;
  background: url('../images/item_bg.png') 0 0;
}

#page-news h1{
  color: #FF0000;
  margin-left: 264px;
  text-transform: uppercase;
}

#page-news .newsitem{
  padding: 8px 42px 8px 12px;
  border-top: 1px solid #302E30;
}

#page-news .newsitem.first{
  border-top: 0;
}

#page-news .newsitem:after{ 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}

#page-news .newsitem .images{
  float: left;
  width: 242px;
  text-align: center;
}

#page-news .newsitem .images img{
  display: inline;
}

#page-news .newsitem .text{
  margin-left: 252px;
}

#page-news .newsitem h2{
  color: #FF0000;
  font-size: 22px;
  font-weight: normal;
  margin: 0;
}

#page-news .newsitem p{
  margin: 5px 0 0 0;
}

#page-news #pagination {
  margin-left: 665px;
  margin-top: 5px;
}

#page-news #pagination .next{
  left: 0;
  background-position: 0 -30px;
}

#page-news #pagination .next:hover{
  background-position: 0 -60px;
}

#page-news #pagination .previous{
  right: 0;
  background-position: -145px -30px;
}

#page-news #pagination .previous:hover{
  background-position: -145px -60px;
}

/* PAGE-ABOUT */
#page-about #main{
  width: 645px;
  margin-left: 200px;
  padding: 64px 0 20px 0;
  background: url('../images/item_bg.png') 0 0;
}

#page-about h1, #page-about h2, #page-about #mailblock .label{
  font-weight: bold;
  color: #00FFD2;
}

#page-about h1{
  text-transform: uppercase;
}

#page-about h2{
  margin: 0;
  font-size: 13px;
}

#page-about .images{
  margin-left: 15px;
  margin-top: 60px;
  width: 190px;
  float: left;
}

#page-about .images img{
  margin-bottom: 5px;
}

#page-about .text{
  margin-left: 220px;
  padding-right: 32px;
  font-size: 13px;
}

#page-about #studioblock, #page-about #correspondenceblock, #page-about #mailblock{
  padding-top: 10px;
}

#page-about #studioblock p, #page-about #correspondenceblock p{
  margin: 0;
}

#page-about #studioblock{
  float: left;
}

#page-about #correspondenceblock{
  margin-left: 230px;
  clear: right;
}

#page-about #mailblock{
  margin-top: 40px;
}

#page-about .text:after{ 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}

/* PAGE-404 */
#page-404 #main{
  width: 425px;
  margin-left: 200px;
  padding: 64px 0 20px 220px;
  background: url('../images/item_bg.png') 0 0;
}

/* PAGE-UNSUBSCRIBE */
#page-unsubscribe #main{
  width: 645px;
  margin-left: 200px;
  padding: 64px 0 20px 0;
  background: url('../images/item_bg.png') 0 0;
}

#page-unsubscribe h1{
  color: #FF0000;
  margin-left: 220px;
  text-transform: uppercase;
}

#page-unsubscribe .text{
  margin-left: 220px;
  padding-right: 32px;
  font-size: 13px;
}

/* CAROUSEL-CONTROLS */
.controlbox{
  background: url('../images/controlbox_bg.png') 0 0 no-repeat;
  margin-top: 20px;
  padding-left: 35px;
  height: 10px;
}

.controlbox .controlbutton{
  display: block;
  height: 10px;
  width: 10px;
  background: #B3B3B3;
  float: left;
  margin-right: 5px;
}

.controlbox .controlbutton.active{
  background: #FFF;
}