html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}
/* CSS Document */
body {
	color:#333;
	font-size:11px;
	font-family:Verdana, Geneva, sans-serif;
	line-height:1.2em
}
a {
	text-decoration:none;
	color:#333
}
.mx-page{ width:100%; height:auto}
#bg-preview{ 	
	margin:0 auto;
 	 width:100%;
}
.mobile,.mobile-l,.tabless,.tabless-l{ 
	border-color: -moz-use-text-color;
	border-radius: 20px 20px 20px 20px;
	border-style: solid;
	margin: 48px auto auto;
	box-shadow:0px 0px 6px #000
 
}
.mobile{     border-width: 65px 35px; }
.mobile-l{   border-width: 35px 65px; }
.tabless{    border-width: 65px 35px; }
.tabless-l{  border-width:  35px 65px; }
iframe {
	background:none;
	border:0;
	z-index:9;
	display:block;
	margin:auto;
	 height:100%;
	 width:100%;
}
#monitor-mode{ position:absolute; right:60px; top:0px; width: 250px; z-index:99999; 
	background: #e5e6e7; 
	border: 1px solid #cacccd; }
#monitor-mode li{ display:inline-block; margin: 5px 7px; height: 30px; float: left;
 line-height: 30px;
 color: #a9a9aa;}
#monitor-mode li a {
	padding: 0 ;
	 text-indent: -999em;
	 overflow: hidden ;
	  display: block;
	  
  height: 30px;
}
#monitor-mode li.btn-desktop a {
 background: url(../images/icon-desktop.png) no-repeat left center scroll;
 width: 34px;
  
}
#monitor-mode li.btn-tabless a {
 background: url(../images/icon-tabless.png) no-repeat left center scroll;
 width: 22px;
 }
#monitor-mode li.btn-tablessl a {
 background: url(../images/icon-tablessl.png) no-repeat left center scroll;
 width: 28px;
 }
#monitor-mode li.btn-mobile a {
 background: url(../images/icon-mobile.png) no-repeat left center scroll;
 width: 16px;
 }
#monitor-mode li.btn-mobilel a {
 background: url(../images/icon-mobilel.png) no-repeat left center scroll;
 width: 23px;
 }
 #monitor-mode li.btn-desktop a:hover,
 #monitor-mode li.btn-desktop a.active{
 background: url(../images/icon-desktop-hover.png) no-repeat left center scroll;
  
}
#monitor-mode li.btn-tabless a:hover ,
#monitor-mode li.btn-tabless a.active{
 background: url(../images/icon-tabless-hover.png) no-repeat left center scroll;
 }
#monitor-mode li.btn-tablessl a:hover,
#monitor-mode li.btn-tablessl a.active
{
 background: url(../images/icon-tablessl-hover.png) no-repeat left center scroll;
 }
#monitor-mode li.btn-mobile a:hover ,
#monitor-mode li.btn-mobile a.active{
 background: url(../images/icon-mobile-hover.png) no-repeat left center scroll;
 }
#monitor-mode li.btn-mobilel a:hover,
#monitor-mode li.btn-mobilel a.active{
 background: url(../images/icon-mobilel-hover.png) no-repeat left center scroll;
 }
#mx-page {
	position:relative;
}
iframe {
	background:none;
	border:0;
	z-index:9
}
#mx-toolbar {
	position:absolute;
	top: 0px;
	right: 0px;
	width: 325px;
	z-index:88
}

#mx-logo {
	width: 250px;
	margin-left: 25px;
}
#mx-logo a {
	background: url(../images/logo.png) no-repeat left top scroll;
	width: 277px;
	height: 39px;
	margin: 10px 0;
	display: inline-block;
	text-indent:-999em;
	overflow: hidden;
}
#mx-demos {
	margin-top: 15px;
}
#mx-logo, #mx-demos {
	float:left;
}
#mx-overlay {
	width:100%;
 
	background:#000;
	position:absolute;
	top:0;
	right:0;
	z-index:10
}
#mx-overlay div {
	 
	width:200px;
	height:200px;
	margin:330px auto
}

/** BUTTON CLOSE|OPEN ACTION **/
#mx-closedemos, #mx-opendemos{
	position:absolute;
	top:0;
	right:10px;
	z-index:99999999;
	 width:30px;
 height: 41px;
	}
#mx-closedemos a, #mx-opendemos a {
	position:absolute;
	top:0;
	right:20px;
	z-index:99999999;
	 text-indent: -999em;
	 overflow: hidden;
	  display: block;
}
#mx-closedemos a{
background: url(../images/icon-close.png) no-repeat left center scroll;
 width:20px;
 height: 21px;
 top: 10px;
 }
 #mx-opendemos a{
 background: url(../images/icon-open.png) no-repeat left top scroll;
  width:30px;
 height: 41px;
 
 }