@charset "utf-8";
/* reset and main page styles */
/*****************/

.container_all { width:980px; margin:0 auto; padding:0; height:890px; position:relative; }
.glrycontainer { width:980px;  min-height:890px; height:auto; background:#FFF; }
.galtop_img{
	position:absolute;
	top:0px;
	left:0px;
	width:980px;
	background:url(../galryimages/galtopimg.jpg) no-repeat top center;
	height:159px;/*600*/
	z-index:1;
}
.galbottom_img{
	position:absolute;
	top:755px;
	left:0px;
	width:980px;
	background:url(../galryimages/galdownimg.jpg) no-repeat top center;
	height:175px;/*600*/
	z-index:1;
}

.gal_title{
	position:absolute;
	top:8px;
	left:180px;
	width:500px;
	font-family: 'CaviarDreamsRegular';
	color:#0099FF;
	text-transform:uppercase;
	font-size:2.5em;
	font-weight:normal;
	z-index:1;
}
.gal_titlehide{
	position:absolute;
	top:440px;
	left:200px;
	width:500px;
	font-family: 'CaviarDreamsRegular';
	color:#0099FF;
	text-transform:uppercase;
	font-size:2.5em;
	font-weight:normal;
	/* opacity 0 */
	z-index:5; 
}
.img_message{
	position:absolute;
	top:630px;
	left:182px;
	width:580px;
	height:90px;
	background:url(../galryimages/message_bg.png) repeat top left;
	padding:10px;
	font-family: Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:1em;
	font-weight:normal;
	/* opacity 0 */
	z-index:4; 
}


/*gallery numbers list */
ul.sg_galleryList{
	list-style:none;
	position:absolute;
	width:850px;
	height:50px;
	left: 82px;/*82*/
	top: 74px;
	/* opacity 0 */
	z-index:3;
}
ul.sg_galleryList li{
	width:78px;
	height:50px;
	margin:0px 1px;
	float:left;
	text-transform:uppercase;
	cursor:pointer;
	font-size:1.25em;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	text-shadow:0px 0px 1px #fff;
	color:#000;
	background:#FFF;
	text-align:center;
	line-height:50px;
	
}
ul.sg_galleryList li a { text-decoration:none; color:#000; display:block; width:78px; height:50px;}
ul.sg_galleryList li.current{
	color:#FFF;
	background:#0099FF;
	height:60px;
	margin-top:-5px;
}
ul.sg_galleryList li.current:hover{
	border:none;
}
ul.sg_galleryList li a:hover{ color:#FFF;}


/** sc_menu **/

div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 145px;
  top:760px;/*680*/
  left:70px;
  width: 800px;
  /* Add scroll-bars */
  overflow: auto;
  /* opacity 0 */
  z-index:3; 
}
ul.sc_menu {
  display: block;
  height: 110px;
  /* Max width here, for users without Javascript */
  width: 5000px;
  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;
  -moz-opacity: 0.5;
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
.sc_menu a {
  display: block;
  text-decoration: none;
  
}
.sc_menu li span { display:none;}
.sc_menu span {
  /* We want a caption to display on the next line */
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 0.75em;
  color: #fff;
}

.sc_menu span {
  display: none;
  margin-top: 3px;
  text-align: center;
  font-size: 0.75em;
  color: #fff;
}
.sc_menu a:hover span {
  display: block;
}
.sc_menu img {
	height:95px;
  border: 3px #fff solid;
}
.sc_menu a:hover img {
	height:95px;
  
}
.sc_menu li a.current { border-top:2px #FF9900 solid;} 

/* preview container */
img.big { width:600px; height:600px;}
.thumbs img { width:92px; height:76px;}


#previewContainer{
	position:absolute;
	top:140px;
	left:182px;
	bottom:0px;
	margin:0;
	width:600px;
	padding:0;
	height: 600px;/*600*/
	 /* opacity 0 */
	background-color:#000000;
	display:block;
	z-index:3;

}

.next_g { background:url(../galryimages/next-arrw.png) no-repeat; width:55px; height:56px; position:absolute; right:10px; top:250px; display:none; z-index:10;}
.prev_g { background:url(../galryimages/prev-arrw.png) no-repeat; width:55px; height:56px; position:absolute; left:10px; top:250px; display:none; z-index:10;}
.next_g:hover,.prev_g:hover { cursor:pointer}


/*opacity 0 elements */
.gal_titlehide,.img_message,ul.sg_galleryList,div.sc_menu,#previewContainer { -moz-opacity:0; -webkit-opacity:0; opacity:0;}


@font-face {
    font-family: 'CaviarDreamsRegular';
    src: url('fonts/CaviarDreams-webfont.eot');
    src: url('fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/CaviarDreams-webfont.woff') format('woff'),
         url('fonts/CaviarDreams-webfont.ttf') format('truetype'),
         url('fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
.closeicon { top:64px; right:42px; position:absolute; z-index:200;}

@media only screen and (max-width: 592px) and (min-width: 320px){
	.container_all { width:100%;}
	.container_all { height:625px !important;}
	.glrycontainer { min-height:625px; }
	
	.galtop_img,.glrycontainer { width:100%; }
	img.big { width:100%; height:auto;}
	ul.sg_galleryList { width:98%; left:2%; }
	ul.sg_galleryList li { width:10%;}
	ul.sg_galleryList li a { width:100%;}
	
	#previewContainer { width:90%; left:5%; height:291px }
	.galbottom_img { width:100%; top:455px; }
	div.sc_menu { width:92%; left:4%; top:472px;  }
	.img_message { left:5%; top:321px; width:82%; padding:1%; }
	.next_g,.prev_g { top:130px;}
	
	.gal_title { width:98%; left:2%; font-size:1.675em; }
	.closeicon { right:2%; }
	
	.gal_titlehide { width:96%; left:2%; top:300px;}
	
}

@media only screen and (max-width: 479px) and (min-width: 343px){
	#previewContainer { width:70%; left:15%; }
	.img_message { width:68%; left:15%;}
}
@media only screen and (max-width: 592px) and (min-width: 480px){
	
	#previewContainer { width:52%; left:24%; }
	.img_message { width:50%; left:24%;}
}
@media only screen and (max-width: 800px) and (min-width: 768px){
	 .container_all { width:100%;}
	 .galtop_img,.glrycontainer { width:100%; }
	 
	 img.big { width:100%; height:auto;}
	ul.sg_galleryList { width:98%; left:2%; }
	ul.sg_galleryList li { width:10%;}
	ul.sg_galleryList li a { width:100%;}
	
	#previewContainer { width:64%; left:18%; height:500px; }
	.img_message { width:62%; left:18%;}
	
	
	div.sc_menu { width:92%; left:4%; top:752px;  }
	.img_message {top:521px; padding:1%; }
	.next_g,.prev_g { top:130px;}
	
	.gal_title { width:98%; left:2%; font-size:1.675em; }
	.closeicon { right:2%; }
	
	.gal_titlehide { width:66%; left:17%; top:380px;}
	.galbottom_img { width:100%; top:725px; }
}