/**
* CSS file for Photog Module,
*
* Product Owner: Michael Landon
* Author: Rex Alemi
* Product Backlog: http://realtour.biz/wiki/wikka.php?wakka=photogbacklog
*/
/**
* Common between all Pages
*/
body{
    background-color:#ffffff;
}
div#photog_wrapper{
  background: url('/img/static/photogbg.png') no-repeat ;
  margin-left:auto;
  margin-right:auto;
  width:940px;
  height:840px;
  position:relative;
  overflow:hidden;
}
/**
* filler class: end of document place holder
*
* since eveything is absolute, a div of filler class is 
* placed at the far bottom end to make sure all pages are
* same length and everything is visible.
*/
.filler{
  position:absolute;
  left:940px;
  top:840px;
  z-index: 1;
}
/**
* title_pic class: the name of the photographer
*
* this picture is loaded at the head of the page
*/
.title_pic{
  position: absolute;
  left: 182px;
  top: 78px;
  z-index: 1;
}
/* display the photographer not found msg*/
.nophotog{
  position: absolute;
  left: 182px;
  top: 78px;
  z-index: 1;
 font-family: "Arial";
 font-size:44px;
 font-weight:bold;
 color: #336699;
}
/**
* footer menu
*
* the navigation menu is at the bottom of the page
* the current page should show as selected on the 
* menu, and the gallery menu has a list of subitems
*/
div.footer_menu {
 position: absolute;
 left: 77px;
 top: 784px;
 z-index: 1;
}
.footer_submenu {
 position: absolute;
 left: 185px;
 top: 813px;
 z-index: 1;
}
.menu_ul{
  display:inline;
  list-style-type: none;
  margin-left:0;
  padding-left:0px;
}
.menu_li{
  display:inline-block;
  zoom:1;
  *display:inline;
  padding-right: 20px;
}
a.footer_item{
 font-family: "Arial";
 font-size:18px;
 font-weight:bold;
 color: #336699;
 text-decoration:none;
}
a.footer_subitem{
 font-family: "Arial";
 font-size:12px;
 font-weight:bold;
 color: #336699;
 text-decoration:none;
  width:200px;
}
a.footer_item:hover, a.footer_subitem:hover {
  text-decoration: none;
  color: #b4d357;
}

a.inactive_submenu{
 font-family: "Arial";
 font-size:12px;
 font-weight:bold;
 color: #b4d357;
 cursor:default;
 text-decoration:none;
}
a.inactive_menu{
 font-family: "Arial";
 font-size:18px;
 font-weight:bold;
 color: #b4d357;
 cursor:default;
 text-decoration:none;
}
/**
* homepage
*
* The home page has a picture that
* fills all the frame.
*/

.homepage_pic{
  position: absolute;
  left: 76px;
  top: 194px; 
  z-index: 1;
}

div.testimonials div.box table.divider td.talker span.company{
  font-size:10px;
  position:relative;
  top:1px;
} 
div.testimonials div.box table.divider td.talker span.fullname{
  font-size:12px;
  font-weight:bold;
  position:relative;
  top:2px;
}
div.testimonials div.box table.divider img.closequote{
  float:right;
  display:inline;
  position:relative;
  top:10px;
}
div.testimonials div.box table.divider td.content{
    padding-left:9px;
    padding-right:5px;
    vertical-align:baseline;
    padding-top:12px;
}
div.testimonials div.box table.divider td.talker{
  width:65px;
  font-family: "Arial";
  padding-left:13px;  
  padding-top:8px;
  vertical-align:top;
}
div.testimonials div.box table.divider td.spacer{
/*  border-left-style:solid;
  border-color:#336699;
*/}
div.testimonials div.box table.divider{
 width:350px;
 margin-top:16px;
 color:#336699;
 height:157px;
}
div.testimonials div.title{
  left:36px;
  top:40px;
  position: absolute;
  font-family: "Arial";
  font-size:24px;
  color: #336699;
}
div.testimonials div.place1{
  left:34px;
  top:77px;
}
div.testimonials div.place2{
  left:34px;
  top:309px;
}
div.testimonials div.place3{
  left:424px;
  top:77px;
}
div.testimonials div.place4{
  left:424px;
  top:309px;
}
div.testimonials div.box span.fulltext{
  font-family: "Arial";
  font-size:12px;
  color: #336699;
}
div.testimonials div.box{
  background: url('/img/static/testimonial_background.png') no-repeat ;
  width:361px;
  height:207px;
  position: absolute;
  z-index: 2;
}
div.testimonials{
  position: absolute;
  left: 76px;
  top: 194px; 
  z-index: 1;
  width:797px;
  height:515px;
}

.service_data div.table_wrapper{
  top:70px;
  position: relative;
  height:428px;
  overflow:auto;
  margin-top:15px;
}
.service_data div.title{
  left:20px;
  top:40px;
  position: absolute;
  font-family: "Arial";
  font-size:24px;
  color: #336699;
}
.service_data{
  position: absolute;
  left: 76px;
  top: 194px; 
  z-index: 1;
  width:797px;
  height:515px;
}
table.service_table{
  width:100%;
  border-collapse: collapse;
  height:100%;
  border: 1px solid #cccccc; 
}
table.service_table th{
  background-color:#336699;
  color: #ffffff;
  font-weight:bold;
  border: 1px solid #cccccc; 
  font-family: "Arial";
  font-size:14px;
  text-align:left;
  padding:0px 20px;
  height:25px;
}
table.service_table td{
  border: 1px solid #cccccc;
  color: #555555;
  padding: 0px 20px; 
  font-family:Arial;
  font-size:12px;
  height:25px;
}
table.service_table td.price{
  text-align: right;
  background-color:#99b3cc;
  color: #ffffff;
}
/**
* About page
*
* The about page has a background that
* uses homepage class, it also has a 
* the title, content and email 
*/
.about_title{
  position: absolute;
  left: 111px;
  top: 267px;
  font-family: "Arial";
  font-size:24px;
  color: #336699;
  z-index: 2;
}
/*

.about_content{
  top: 369px;
  left: 111px;
  position: absolute;
  width: 249px;
  height: 360px;
  font-family: "Arial";
  font-size:12px;
  color: #555555;
  z-index: 2;
}
*/
.about_content{
  top: 331px;
  left: 111px;
  position: absolute;
  width: 249px;
  height: 270px;
  font-family: "Arial";
  font-size:12px;
  color: #555555;
  z-index: 2;
  overflow-y: auto;
  padding-right:10px;
  text-align:justify;
}
.about_email{
  top: 600px;
  left: 110px;
  position: relative;
  color: #336699; 
  z-index: 3;
  width:50%;
}
a.email_button:hover{
   background-position:  0px -24px;
}
a.email_button{
   background-image: url('/img/static/photog_email_button.png');
   height: 23px;
   width: 30px;
   display: inline-block;
   position: relative;
   top: 36px;
   zoom:1;
   *display:inline;
}  
.email_text{
  position: relative;
  top: 31px;
  left:8px;
  font-family: "Arial";
}
/**
* Contact Page
*
* Contact page background uses home page class,
* it has a title, and address and sets of key-values
* like t: for telephone and w: for website.
*/

.contact_keypair{
  top:423px;
  left:111px;
  position: absolute;
  width:246px;
  font-family: "Arial";
  font-size:14px;
  z-index: 2;

}
.contact_key{
  font-family: "Arial";
  font-size:14px;
  color: #b4d357;
  z-index: 2;
  
}
.contact_value{
  font-family: "Arial";
  font-size:14px;
  color: #555555;
  z-index: 2;

}

.contact_address{
top:337px;
  left:111px;
  position: absolute;
  width:246px;
  font-family: "Arial";
  font-size:14px;
  color: #555555;
  z-index: 2;
  
}
.contact_title{
 color: #336699;
  font-family: "Arial";
  font-size:24px;
 position: absolute;
 left: 108px;
 top: 268px;
 z-index:2;
}
/**
* Thumbnails
*
* There are 4 pages that use thumbnails
* Still shots and thumbshots use a vertical
* column of thumbnails, virtual and panorama
* tours use a horizontal column.
*/

.thumb_list_vertical {
   position : absolute;
   top:194px;
   left:804px;
   overflow:auto;
   height:480px;
   width:77px;
}
.thumb_list_vertical ul{
   list-style-type: none;
   display: inline;
   margin-left:0;
   padding-left:0;
   width:auto;
   list-style-position:inside;
}
.thumb_list_item{
   width:auto;
}
/**
* Thumb caption
*
* the thumbnails in vitual and panorama tours
* have a name and a description,
* which has to wrap in the space provided
*/
.thumb_caption{
 position:absolute;
 left: 804px;
 top: 666px;
 color:#336699;
 font-family: "Arial";
 font-size:12px;
}
.tour_screen{
    width:522px;
    height:362px;
    background: url('/img/static/photog_tour_screen.png');
    background-repeat: no-repeat;
    position:absolute;
    left:100px;
    top:227px;
    z-index:1;
}
.thumb_caption .sub_caption{
  color:#99b3cc;
}
.thumb_image{
 cursor: pointer;
}
/**
* main picture in the Still and Night Shot Screens
*
*/
#shot_pic{
  position: absolute;
  left: 77px;
  top: 194px;
}
#hdr_before{
  position:absolute;
  left:77px;
  top: 194px;
  z-index:2;
}
#hdr_after{
  position:absolute;
  left:441px;
  top: 194px;
  z-index:2;
}

.hdr_caption{
  position:absolute;
  top:449px;
  color:#336699;
  font-family: "Arial";
  font-size:14px;
}
.caption_right{
left: 441px;
}

.caption_left{
left: 77px;
}
.hdr_title{
  position:absolute;
  top:500px;
  left:77px;
  color:#336699;
  font-family: "Arial";
  font-size:24px;
}

.hdr_text{
  position:absolute;
  top:534px;
  left:77px;
  width:516px;
  color:#555555;
  font-family: "Arial";
  font-size:12px;
  text-align:justify;
}
.tour_title{
  position:absolute;
  top:235px;
  left:633px;
  color:#336699;
  font-family: "Arial";
  font-size:24px;
}
.tour_text{
  position:absolute;
  top:292px;
  left:633px;
  width:226px;
  color:#555555;
  font-family: "Arial";
  font-size:12px;
  text-align:justify;
}
a#tour_arrow:hover{
  background-position: 0px 89px;
}
a.thumb_arrow:hover{
  background-position: 0px 44px;
}
a.thumb_arrow{
position:absolute;
background:url('/img/static/green_arrows.png');
left:39px;
top:15px;
height:45px;
width:40px;
}
#tour_arrow{
position:absolute;
background:url('/img/static/green_buttons.png');
left:330px;
top:350px;
height:82px;
width:87px;
z-index:6;
}
#tour_pic{
  position: absolute;
 cursor: pointer;
  left:115px;
  top: 240px;
  z-index:4;
}
#refer_player{
  left:940px;
  top:40px;
  z-index:12;
  position:absolute;
}
#close_player{
  left:940px;
  top:5px;
  z-index:12;
  position:absolute;
  cursor:pointer;
}
#tour_player{
  position: absolute;
/*  left:115px;
  top: 240px;
*/  left:0px;
  top: 0px;
  z-index: 10;
  width: 945px;
  height: 845px;
}
.thumb_list_horizontal {
   position : absolute;
   top:590px;
   left:115px;
}
.thumb_list_horizontal ul{
   list-style-type: none;
   display: inline;
   margin:1px;
   padding-left:0;
}
.thumb_horizontal_item {
 width:120px;
 display: inline-block;
 zoom:1;
 *display:inline;
 position:relative;
}
.vthumb_name{
  color:#336699;
  font-family: "Arial";
  font-size:12px;
 font-weight:bold;
}
.vthumb_desc{
  color:#336699;
  font-family: "Arial";
  font-size:11px;
  position:absolute;
  width:115px;
  top:77px;
}
.shotoverlay{
    position:absolute;
    background-color:#ffffff;
    background-image:url('/img/css/spacegallery/ajax_small.gif');
    background-position:center;
    background-repeat:no-repeat;
    z-index:10;
    display:none;
}