@charset "utf-8";

/************************************************************************************
CONTENTS HOME
*************************************************************************************/
#content_header{
	z-index:0;
	max-height:320px;
	overflow: hidden;
	margin-bottom: 20px;
}
#offLine{
	padding-top: 40px;
	overflow: hidden;
	font-size: 24px;
	color: #38A015;
}

/************************************************************************************
CONTENTS
*************************************************************************************/
#left_col, #center_col, #right_col {
	height: 60%;
}
#extend{
	height: 95%;
}
#right_of_extend {
	height: 95%;
}
#left_of_extend {
	height: 95%;
}
#left_half_example{
	height: 93px;
	float:left;
	width:49%;
	border: 1px solid #999999;
	margin-bottom:5px;
	margin-left: 1px;
}
#right_half_example{
	height: 93px;
	float:right;
	width:49%;
	border: 1px solid #999999;
	margin-bottom:5px;
	margin-right: 1px;
}
#full_width_example{
	height: 100px;
	overflow: hidden;
	width: 702px;
	border: 1px solid #999999;
	margin-right: 1px;
	margin-left: 1px;
}
#imgList{
	height: 230px;
	overflow: hidden;
	width: 230px;
	border: 1px solid #999999;
	margin-bottom:20px;
	margin-right:20px;
	float:left;
}
#tblList{
	height: 175px;
	overflow: auto;
	width: 230px;
}
#imgButtons{
	height: 230px;
	overflow: auto;
	width: 230px;
	border: 1px solid #999999;
	margin-bottom:20px;
	margin-right:20px;
	float:left;
}
#imgPreview{
	height: 230px;
	overflow: auto;
	width: 706px;
	border: 1px solid #999999;
	margin-bottom:20px;
	float:right;
}
#chooseLayout{
	height: 230px;
	overflow: auto;
	width: 706px;
	border: 1px solid #999999;
	margin-bottom:20px;
	float:right;
}
.lblInfo{
	padding-left:5px;
	margin-bottom:5px;
	line-height:25px;
}
.imgBtn{
	width:215px;
	margin:5px;
}
#btnUpload{
	width:70px;
	margin:5px;
}
#tblFile tr{
	cursor:move;
}
.dragRow{
	background-color: #F2F2F2;
}

/************************************************************************************
SLIDE SHOW
*************************************************************************************/
.left_half{
	height: 230px;
	float:left;
	width:49% !important;
}
.right_half{
	height: 230px;
	float:right;
	width:49%;
}

#slideshow {
	/*
	position:absolute;
	background-color: #F2F2F2;
	*/
	padding: 0px;
	/*-moz-border-radius: 5px;*/
	-webkit-border-radius: 5px;
	margin-bottom:10px;
	width:100%;
	height: 230px;
	text-align: center;
	position:relative;
	z-index:2;
	overflow:hidden;
}
#slideshow div {
	/*
	background-color: #F2F2F2;
	*/
	width:100%;
	height: auto;
	top:10px;
	text-align: center;
	margin-top: 10px;
	z-index:10;
}
#slideshow img {
	vertical-align: middle;
	display: block;
	text-align: center;
	cursor:pointer; 
}
#slideshow div img { 
	margin-left: auto;  
	margin-right: auto;  
	margin-bottom: 0px;  
	text-align: center;
	z-index:10;
}

#img_legend{
	color:black;
	display:block;
	position:relative;
	z-index:50;
	padding-top:3px;
	height:35px;
	width:auto;
	/*-moz-border-radius: 5px;*/
	-webkit-border-radius: 5px;
	font-size:12px;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 0px;
	top:-50px;
	text-align: center;
	z-index:10;
}

#navimg {
	height:45px;
	list-style-type:none;
	z-index:50;
	z-index:10;
}
#navimg li a {
	display:block;
	width:18px;
	height:45px;
	text-indent:-9999px;
	outline:none;
}
#prev a {
	width:19px;
	height:40px;
	background-image: url(../_images/left.png);
	z-index: 100;
	background-repeat: no-repeat;
	float:left;
	text-indent:-9999px;
	position: relative;
	top:200px;
	margin-left:30px;
}
#next a {
	z-index: 100;
	background-image: url(../_images/right.png);
	background-repeat: no-repeat;
	width:19px;
	height:40px;
	float:right;
	text-indent:-9999px;
	position: relative;
	top:200px;
	margin-right:30px;
}
#next a:hover, #next a:focus, #next:active,
#prev a:hover, #prev a:focus, #prev:active {
	text-decoration: none;
	border:0px;
	outline: none;
}
#next a:hover {
	background-image: url(../_images/right_over.png);
	background-repeat: no-repeat;
}
#prev a:hover {
	background-image:url(../_images/left_over.png);
	background-repeat: no-repeat;
}
.nav { margin: 5px 0 }
#nav a, #s7 strong { margin: 0 5px; padding: 0px 5px; border: 1px solid #ccc; text-decoration: none }
#nav a.activeSlide { background: #38A015 }
#nav a:focus { outline: none; }
#output { text-align: left; }
#nav {
	text-align:center; 
	margin:0 auto; 
	position:absolute; 
	margin-top:240px; 
	font-size: .54em;
	 width:960px;
}
.nav_left { width:470px !important; }
.nav_right { width:470px !important; margin-left: 490px !important; }

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 990px or less */
@media screen and (max-width: 990px) {
	#contents {
		height:auto;
	}
}

/* for 700px or less */
@media screen and (max-width: 700px) {
.right_half{
	clear:both !important;
	float:left !important;
	width:100% !important;
}
.left_half{
	width:100% !important;
}
#slideshow{
	width:99% !important;
}
.nav_left {
	 width:100% !important; 
}
#nav {
	margin-top: 470px;
}