@charset "utf-8";
/* CSS Document */


#mid_top_left{ background:url(images/john/john_eddy_left.jpg) no-repeat; width:339px; height:498px; float:left;}

#mid_top_right{  background:url(images/john/john_right.jpg) no-repeat; width:641px; height:498px; float:right;}
#mid_top_right #center_text{ font-size:18px; font-family:Arial, Helvetica, sans-serif; color:#b8c4cc; margin-top:216px; margin-left:10px; width:303px;}


#pagemenucontainer #pagemenu { float:left; margin-top:12px; }
#pagemenucontainer #pagemenu li{ list-style:none; float:left; height:24px; margin-left:13px;}

#pagemenucontainer #pagemenu #top_link_home,
#pagemenucontainer #pagemenu #top_link_bio,
#pagemenucontainer #pagemenu #top_link_scheudle,
#pagemenucontainer #pagemenu #top_link_photos,
#pagemenucontainer #pagemenu #top_link_store,
#pagemenucontainer #pagemenu #top_link_links,
#pagemenucontainer #pagemenu #top_link_interact,
#pagemenucontainer #pagemenu #top_link_booking,
#pagemenucontainer #pagemenu #top_link_testimonial
{background:url(images/john/john_navigation1.jpg) no-repeat; }

#pagemenucontainer #pagemenu #top_link_home:hover,
#pagemenucontainer #pagemenu #top_link_bio:hover,
#pagemenucontainer #pagemenu #top_link_scheudle:hover,
#pagemenucontainer #pagemenu #top_link_photos:hover,
#pagemenucontainer #pagemenu #top_link_store:hover,
#pagemenucontainer #pagemenu #top_link_links:hover,
#pagemenucontainer #pagemenu #top_link_interact:hover,
#pagemenucontainer #pagemenu #top_link_booking:hover,
#pagemenucontainer #pagemenu #top_link_testimonial:hover
{background:url(images/john/john_navigation_hover.jpg) no-repeat; }

#pagemenucontainer #pagemenu #top_link_home,
#pagemenucontainer #pagemenu #top_link_home:hover{width:48px; height:30px; }

#pagemenucontainer #pagemenu #top_link_bio, 
#pagemenucontainer #pagemenu #top_link_bio:hover{ background-position:-62px 0px; width:28px; height:30px; }

#pagemenucontainer #pagemenu #top_link_scheudle,
#pagemenucontainer #pagemenu #top_link_scheudle:hover{background-position:-103px 0px; width:76px; height:30px;}

#pagemenucontainer #pagemenu #top_link_photos,
#pagemenucontainer #pagemenu #top_link_photos:hover{background-position:-192px 0px; width:57px; height:30px;}

#pagemenucontainer #pagemenu #top_link_store,
#pagemenucontainer #pagemenu #top_link_store:hover{background-position:-262px 0px; width:46px; height:30px;}

#pagemenucontainer #pagemenu #top_link_links,
#pagemenucontainer #pagemenu #top_link_links:hover{background-position:-320px 0px; width:45px; height:30px;}

#pagemenucontainer #pagemenu #top_link_interact,
#pagemenucontainer #pagemenu #top_link_interact:hover{background-position:-378px 0px; width:66px; height:30px;}

#pagemenucontainer #pagemenu #top_link_booking,
#pagemenucontainer #pagemenu #top_link_booking:hover{background-position:-457px 0px; width:67px; height:30px;}

#pagemenucontainer #pagemenu #top_link_testimonial,
#pagemenucontainer #pagemenu #top_link_testimonial:hover{background-position:-530px 0px; width:96px; height:30px;}

#upcomming_post ul{list-style:none;}
#upcomming_post{ margin-top:164px; margin-left:54px; width:230px;}
#upcomming_post h2{ font-size:16px; font-weight:bold; color:#d1c86b; text-align:center; margin:0px; margin-bottom:5px;}
#upcomming_post ul{ margin:0px; padding:0 0px 0 15px;}
#upcomming_post ul li{ margin-bottom:5px;}
#upcomming_post ul li a{ color:#FFFFFF; font-size:15px; text-decoration:none;}
#upcomming_post ul li a:hover{ text-decoration:underline;}

#middle_button{ margin-top:79px;margin-left:59px;}
#middle_button ul{ list-style:none; }
#middle_button ul li{ float:left; }
#middle_button ul .frist_button{  margin-left:27px;}
#middle_button ul .second_button{ margin-left:43px;}


#john_showcase{ background:url(images/john/john_showcase_bg.jpg) no-repeat 0px 28px; width:980px; height:237px; padding-left:10px; }
#john_showcase ul{ list-style:none; margin:0px; padding:0px;}
#john_showcase ul li, #john_showcase ul li a{ float:left;width:191px; height:217px;}

/*#john_showcase  #chr_uncle_smily{background:url(images/john/john_img_1.png) no-repeat; }
#john_showcase  #chr_smokey{background:url(images/john/john_img_2.png) no-repeat; }
#john_showcase  #chr_andy{background:url(images/john/john_img_3.png) no-repeat;}
#john_showcase  #chr_bady_princess{background:url(images/john/john_img_4.png) no-repeat;}
#john_showcase  #chr_human_baby{background:url(images/john/john_img_5.png) no-repeat;}

#john_showcase  #chr_uncle_smily:hover{background:url(images/john/john_img_11.png) no-repeat; }
#john_showcase  #chr_smokey:hover{background:url(images/john/john_img_22.png) no-repeat; }
#john_showcase  #chr_andy:hover{background:url(images/john/john_img_33.png) no-repeat;}
#john_showcase  #chr_bady_princess:hover{background:url(images/john/john_img_44.png) no-repeat;}
#john_showcase  #chr_human_baby:hover{background:url(images/john/john_img_55.png) no-repeat;}*/

#john_showcase  #chr_uncle_smily, #john_showcase  #chr_uncle_smily:hover{background:url(images/john/1.png) no-repeat; }
#john_showcase  #chr_smokey, #john_showcase  #chr_smokey:hover{background:url(images/john/2.png) no-repeat; }
#john_showcase  #chr_andy, #john_showcase  #chr_andy:hover{background:url(images/john/3.png) no-repeat;}
#john_showcase  #chr_bady_princess, #john_showcase  #chr_bady_princess:hover{background:url(images/john/4.png) no-repeat;}
#john_showcase  #chr_human_baby, #john_showcase  #chr_human_baby:hover{background:url(images/john/5.png) no-repeat;}

#john_showcase  #chr_uncle_smily:hover,
#john_showcase  #chr_smokey:hover,
#john_showcase  #chr_andy:hover,
#john_showcase  #chr_bady_princess:hover,
#john_showcase  #chr_human_baby:hover
{background-position:0px -216px; }

#video_gallery{ background:#6d839b; /*height:200px;*/ border:7px solid #073356; padding:5px;  }
#video_gallery #video_player, 
#video_gallery  ul li{ float:left; }
#video_gallery #video_player #video_thumbnail  ul{ margin:0px;}
#video_gallery #video_player #video_thumbnail  ul li{  cursor:pointer; }

#video_gallery #video_player{  background:#000000;}
#video_gallery #video_thumbnail{ /* height:189px;*/   margin:10px;}
#video_gallery #video_text{ width:350px; float:right; margin:10px;}
#video_gallery #video_text p{ color:#FFFFFF; }

#video_player_pos{ height:350px;}


/*#video_gallery #video_thumbnail ul{ list-style:none; margin-left:13px;}
#video_gallery #video_thumbnail ul li{ width: 80px; margin:auto;}
#video_gallery #video_thumbnail ul li img{ padding:2px; border:1px solid #999999;}
*/
#footer{ background:url(images/john/john_footer.jpg) no-repeat;
		 height:46px; width:958px; margin:auto;margin-top:5px; margin-bottom:5px;
}
#footer #left_footer{ padding-top:12px; padding-left:45px; float:left; width:500px; color:#666666;}
#footer #right_footer{ padding-top:9px; padding-left:45px; float:right; margin-right:35px;}
#footer #right_footer .facebook,
#footer #right_footer .twitter{color:#333333; padding:5px 0 9px 30px;text-decoration:none; font-size:11px;}
#footer #right_footer .facebook{background:url(images/john/john_facebook.jpg) no-repeat;}
#footer #right_footer .twitter{background:url(images/john/john_twitter.jpg) no-repeat;}

.span-24{ margin-left:5px; margin-top:5px;}
.span-12{ margin-right:0px;}

.clr{ clear:both;}

.post_title{ font-size:17px; font-weight:bold;}
.post_title a{ color:#4f96c0;}
input[type=submit]{
	border:1px solid #000000;
	background-color:#2168A9;
	background-image:none;
	background-position:0 0;
	background-repeat:repeat;
	color:#FFFFFF;
	
}

#info_text{ 
	padding:5px; 
	margin-top:10px; 
	margin-bottom:10px; 
	color:#333;
	font-size:16px;
	font-weight:bold;
}
#info_text a{ color:#333333;}

#menu_top_icons{ float:right; margin-top:20px; margin-bottom:10px;}
#menu_top_icons ul{ list-style:none;}
#menu_top_icons ul li{ float:left; padding-right:15px;}

/**************************** Scroll Icon ******************/

div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  
  width: 500px;
  /* Add scroll-bars */
  overflow: auto;
  text-align:center;
  padding-left:20px;
}
ul.sc_menu {
  display: block;
 
  /* Max width here, for users without Javascript */
  width: 1500px;
  padding: 15px 0 0 15px;
  /* Remove default margin */
  margin: 0;
  /*background: url('navigation.png');*/
  list-style: none;
}
.sc_menu li {
  display: block;
  float: left;
  padding: 0 4px;
}
.sc_menu a {
  display: block;
  text-decoration: none;
}
.sc_menu span {
  /* We want a caption to display on the next line */
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.sc_menu span {
  display: none;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.sc_menu a:hover span {
  display: block;
}
.sc_menu img {
  border: 3px #fff solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.sc_menu a:hover img {
  filter:alpha(opacity=50);
  opacity: 0.5;
} 

.click_text{	
	text-align:center;
	color:#ffffff;
	font-weight:bold;
}