﻿/* base styles for cms*/
/*
Version:4.1.1	
	2015-06-15: add styles to make youtube video responsive

*/


/*Responsive General styles
--------------------------------------------------------------------------------------------------------------------*/

img { border : 0; max-width: 100%;}
table { border-collapse : collapse; border-spacing : 0; width : 100%; }
.section { clear: both; padding: 0; margin: 0; width:100%;}
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }
.no-top-margin {margin-top:0; }
.fix-width { width:auto; }
.hide-for-large {display:none; visibility:hidden; }

@media only screen and (max-width: 480px){
	input, select, textarea { width: 100%; }
	input[type=checkbox] {width:auto;}
}


/*---------------------------------------------------------------------------------------------------------------------*/
html{-ms-overflow-style: scrollbar;}
#wrapper { max-width:62.5em; margin:0 auto; }
.frontend {max-width:100%; overflow:hidden; }
.header {clear: both; font-size: 1em; /* 13 / 16 */ /*max-width: 92.3em;*/ /* 1200px / 13 */ margin: 0 auto; padding: 0; position: relative; }

body, h1, h2, h3, h4, h5, h6, button, input, select, textarea
 { font-family : Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif; margin-bottom:0.3em; line-height:110%;}
h1, h2, h3, h4, h5, h6 { letter-spacing: 0; }

h1 { font-size:2.75em; line-height:1.2; }
h2 { font-size:1.75em; line-height: 1.25; }
h3 { font-size:1.5em; line-height: 1.25; }
h4 { font-size:1.25em; line-height:1.25; }
h5 { font-size:1em; line-height:1.25;}

input.rnd, select.rnd, textarea.rnd { border:1px solid #ccc; padding:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }

#footercontainer { background-color:#fff; border:none; font-size:0.8em;}
footer { width: 100%; /* 1000px / 1250px */ font-size: 1em; /* 13 / 16 */ max-width: 92.3em; /* 1200px / 13 */ 
		 margin: 0 auto; padding: 0; color: #999; }
	footer strong { font-size: 1.077em; /* 14 / 13 */ color: #aaa; }
	footer a:link, footer a:visited { color: #999; text-decoration: underline; }
	footer a:hover { color: #fff; text-decoration: underline; }


header, footer, #maincontent, .maincontent {width:100%;}
.data { display:none; position:absolute; top:-1000px; left:-1000px;}
/* modify the default font for jQuery UI */
.ui-widget {font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif; }




/* bridge media query with jquery
--------------------------------------------------------------------------------------------------------------------*/
.breakpoint-detector {}

a.skip-nav-link {position: absolute; left: -999px;}
a.skip-nav-link:focus {left:5px;}

/* for huge*/
@media only screen and (min-width: 1025px) {
	.breakpoint-detector {float:left; font-size:3px; text-align:justify }
	.show-margin-for-huge {padding-left: 10px; padding-right:10px; }
}

/* for large and lower */
@media only screen and (max-width: 1024px) {
	.show-margin-for-huge {padding-left: 0; padding-right:0; }

}
/* for large and upper*/
@media only screen and (min-width: 769px) {
	.hide-for-large { display:none; visibility:hidden; }
	.show-for-large { display:normal; visibility:visible;}
	
}

/* for large */
@media only screen and (min-width:769px) and (max-width:1024px) 
{ 
	.breakpoint-detector {float:left; font-size:2px; text-align:center;}
	.show-margin-for-huge {padding-left: 10px; padding-right:10px; }
}

/* for medium and lower */
@media only screen and (max-width: 768px) {
	.hide-for-medium {display:none; }
	.hide-for-large { display:normal; visibility:visible;}
	.show-for-large { display:none; visibility:hidden;}
}


/*for medium and upper */
@media only screen and (min-width: 481px){
	
	.hide-for-small {display:normal;visibility:visible; }
	.fix-width-for-large { width:auto;}
	
}

/*for medium*/
@media only screen and (min-width:481px) and (max-width:768px) 
{ 
	.breakpoint-detector {float:left; font-size:1px; text-align:right; }
}


/*for small*/
@media only screen and (max-width: 480px){
	.breakpoint-detector {float:none; font-size:0; text-align:left; }
	.hide-for-small {display:none;visibility:hidden;}
	.fix-width-for-large {width:100%;}
	

}


/*CMS common styles*/

.clear {height:0; clear:both; }
.clear-overflow { height:0; clear:both; overflow:hidden;}
.red {color: #f00;}
.green {color: #006600;}
.msg {font-weight: bold;}
.info {color:#003399; }
.err {color: #f00;}
.success {color: #006633;}
.note {color: #888888;}
.b {font-weight:bold;}
.rt {text-align: right;}
.center {text-align: center;}
.italic {font-style:italic;}
.hide { position: absolute; top: -20em; left: -200em; }
.hidden { visibility: hidden; position: absolute; }
.hide-overflow {overflow:hidden;} 

/* CMS master page styles*/




/*CMS content admin interface
--------------------------------------------------------------------------------------------------------------------*/
.content-module {position:relative; min-height:20px;}
.content-module .admin-link-holder {text-align: right; padding-bottom: 0; position:absolute; bottom:0; right:0; z-index:10;}
.content-module .admin-link-holder-flash {position:static;}

.content-module .admin-link {cursor: pointer; color:#f00; font-weight:bold; background-color:#ccc; padding:0 3px; font-size:1em;}

.admin-panel {width:150px; position:fixed; right:0; top:0; z-index:10; background-color:#e80b0b;}
.admin-panel .go-to-admin-link a {text-decoration:none; display:block; padding:5px; color:#fff;}
.admin-panel .go-to-admin-link a:hover {background-color:#e80b0b; text-decoration:none; color:#fff;}


/*
visual elemenet styles	
-----------------------------------------------------------------------------------------------------------------------
*/

/* 2015-06-15: to make youtub video responsive*/
.video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



