/* CSS Document */
body{
  color:rgb(233,233,233);
  background-color: rgb(18,21,21);
  font-family:tahoma, sans-serif;
  font-size:14px;
  line-height:1.4em;
}

#containerArea{
  width:988px; /*1036*/
  margin:auto;
  background-color:black;
  border:1px solid rgb(95,96,95);
  margin-top:1px; /*20px*/
  position:relative;
}

a{
  color:rgb(161,159,159);
  outline:none;
  text-decoration:none;
}

a:hover, .selectedLink{
  color:rgb(233,233,233);
}

#header{
  height:200px;
}

#signitureLink{
  position:absolute;
  right:40px;
}

#menu{
  padding-top:178px;
  /*border-bottom:3px solid rgb(43,43,43);*/
  border-bottom:1px solid rgb(95,96,95);
  padding-left:8px;
  height:28px; /*actually 25 px but for animation we need extra 3.*/
  padding-bottom:2px;
}

#menu, #mainContentLeft{
  width:584px;
}

#mainContentLeft h2.anArtworkTitle{
  font-weight:normal;
}

#mainContentLeft.centered{
  text-align:center;
}

#mainContentLeft.broad{
  width:900px;
}

#menu li{
  display:block;
  float:left;
  position:relative;
  height:28px; /*actually 25 px but for animation we need extra 3.*/
}

#menu li img{
  margin-top:3px; /* 0 makes it look like moving upwards */
}

#menu li:hover .subMenu{
  display:block;
}

#menu .subMenu{
  position:absolute;
  top:-62px;
  display:none;
  left:2px;
  height:60px;
}

#menu .subMenu dt{
  height:20px;
}

#mainContentArea{
  width:956px;
  border-left:1px solid rgb(95,96,95);
  margin:auto;
  background: black url(../images/sidebar2.gif) right top no-repeat;
  /*min-height:968px;*/
}

#realContentArea{
  min-height:526px;
  margin-top:24px;
  margin-left:16px;
  margin-right:24px;
  /*border:1px solid red;*/
}

.mainContentHeader{
  margin-bottom:24px;
}

#mainContentLeft{
  width:562px;
  float:left;
  text-align:justify;
  padding-right:12px;
}

#mainContentLeft p{
  margin-bottom:1em;
}

#mainContentLeft .mainImage{
  float:left;
  margin-right:8px;
  margin-bottom:3px;
}

#mainContentLeft h2{
  /*margin-bottom:12px;*/
  clear:both;
  margin-top:8px;
}

#mainContentRight{
  float:right;
  width:340px;
}

#footer{
  clear:both;
}

#footer img{
  float:left;
}

#footerBar{
  
  height: 20px;
  float:right;
  margin-right:12px;
  margin-bottom:1px;
}

/******* contact ********/
#contactLeft{
  float:left;
  width:220px;
}

#contactRight{
  float:left;
  width:342px;
}

.errorMessage{
  color:red;
}

#contactRight table{
  width:100%;
}

#contactRight table td{
  padding:4px;
}

.inputTitle{
  text-align:right;
  vertical-align: top;
  width:70px;
}

#contactRight table input, #contactRight table textarea{
  width:100%;
  border:1px solid rgb(160,157,157);
  background-color:black;
  color:rgb(233,233,233);
}

#contactRight table input#formSubmit{
  width:60px;
  height:24px;
  float:right;
}
/**************************/

.itemDescription{
  margin-top:8px;
}

/*********** dönemler ***********/
#eraBar{
  margin-left:-8px;
}

#eraBar li{
  float:left;
  /*width:59px;*/
  /*margin-right:12px;*/
  cursor:pointer;
}

#eraBarArea{
  position:absolute;
  top:256px;
  width:362px; /*ie7 required it*/
}

#eraBarContainerBg{
  width:316px;
  position:absolute;
  height:1px;
  border-top:1px dashed rgb(48,48,48);
  top:10px;
}

#eraBarContainer{
  height:16px;
  width:332px;
  clear:both;
  position:relative;
  
}

#eraBarContainer li{
  height:16px;
  width:16px;
  margin-right:60px;
  background: url(../images/donembari/gri.gif) no-repeat;
  float:left;
}

#eraBarContainer li.selectedEra{
  background: url(../images/donembari/kirmizi.gif) no-repeat;
}

#eraBarContainer img{
  margin-top:8px;
}

#eraBarContainer a{
  display:block;
  height:16px;
  width:16px;
}



/*********** yayinlar **********/
#yayinlarList li{
  margin-bottom:8px;
}

#yayinlarList img{
  margin-right:12px;
}

/*********** filimler ************/
#videoContainer{
  border:2px solid silver;
  width:360px;
  height:288px;
  margin-bottom:12px;
}

/*********** kaynakça *************/
.detailInfo{
  font-size:small;
  margin-bottom:12px;
}

/*********** images *******/

.scroll-pane {
	width: 294px;
	height: 382px;
	overflow: auto;
	/*background: #ccc;*/
	/*float: left;*/
}


#imagesList{
  width:274px;
}


#imagesList li{
  width:54px;
  height:54px;
  float:left;
  margin:0 12px 12px 0;
  border:1px solid transparent;
}

#imagesList li.selectedItem{
}

#imagesList li.currentItem{
  border:1px solid white;
}


#imagesList li.hoveredItem{
}


#imagesList li img{
  cursor:pointer;
  width:54px;
  height:54px;
}

/********* index page ***********/
#indexPageThumbsContainer{
  
  position:absolute;
  top:0px;
  right:130px;
}

#indexPageThumbsContainer li{
  /*image size is 156*/
  height:156px;
  width:156px;
  /*background-color:rgb(42,43,48);*/
  margin:2px;
  cursor:pointer;
  /*border:1px solid brown;*/
}

.homeThumb0{background: url(../images/homeB1.gif) no-repeat;}
.homeThumb1{background: url(../images/homeB2.gif) no-repeat;}
.homeThumb2{background: url(../images/homeB3.gif) no-repeat;}
.homeThumb3{background: url(../images/homeB4.gif) no-repeat;}

#indexPageThumbsContainer li img{
  margin:19px;
  border:1px solid white;
}

#indexMainContentLeft img{
  display:block;
}

/* kişisel */

div.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
    width: 100%;
    height:120px;
    border:1px solid rgb(95,96,95);
    margin-bottom:16px;
}


div.scrollable ul.items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
}

div.scrollable ul.items li {
  float:left;
  border-right:1px solid rgb(95,96,95);
  width:110px;
  height:110px;
  padding-top:10px;
  padding-left:10px;
  cursor:pointer;
}

/* tooltip */

div.tooltip {
    background:transparent url(../images/tooltip/01.png) no-repeat scroll 0 0;
    height:51px;
    padding-top:0px;
    padding-bottom:0px;
    width:193px;
    font-size:10px;
    display:none;
    color:#fff;
    text-align:center;
}

div.tooltip p{
  margin-top:12px;
}