@-ms-viewport {
  width: device-width;
}


/*  Style for preview pages */
body, ul, ol, h1,h2,h3,h4,h5,h6,form,li,p,input,select,legend,textarea{ margin:0; padding:0;}
body{font-size:13px;font-family: Arial, Helevtica, Verdana, san-serif;line-height:23px;position:relative;color:#666;}
h1, h2, h3, h4 , span{font-family: 'Open Sans', arial, sans-serif;font-weight: normal; margin-bottom: 0px; font-weight: 300 !important; }
h1{	font-size: 28px; margin-bottom:10px;}
h2 {	font-size: 28px; margin-bottom:14px;}
h3 { font-size: 22px;margin-bottom: 20px;}
h4 {	font-size: 18px;}
h5 {	font-size: 14px;}
a {color: #777;outline: none;}
a:hover {	color: #444;	text-decoration: underline;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
ul, ol{padding-left:20px;}


.error, .success, .info, .warning {
  padding: 3px 8px 3px 6px;
  border-style: solid;
  border-width: 1px;
  margin-bottom: 20px;
  font-weight: bold;
}

.wrapper_fullwidth{width:100%;position:relative;z-index: 1;background: #000;height:40px;clear:both;font-size: 10px;color: #999;}
.wrapper_fullwidth a{text-decoration: none;display: block;float:left;line-height: 40px;}
.wrapper_fullwidth a:hover{color:#bbb;}
.right{float:right; }
.right a{text-decoration: underline; }
.right a:hover{text-decoration: none; }
.center{ position: relative;margin:0 auto 20px auto;width:640px;padding-top:40px;padding-bottom:0px;text-align:center}
.text-center{ text-align:center}
.row{ position: relative; margin:20px auto 20px auto;width:840px;}
.row a img{border:none;}
.row  a:hover img{opacity:0.7;}
/* Nicolas Gallagher's micro clearfix */
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }
.column{ position: relative;float:left;margin:15px 13px 45px 13px;}
.content{position: relative;float:left;width:260px;overflow: hidden; color:#666;padding-left:30px;}
.content ul{padding-bottom:30px;}
.content ul li{list-style-position: inside;}
.block{position: relative;width:350px;float:left;overflow: hidden;}
.block-center{ position: relative;margin:0 auto 0px auto;width:350px;}
.block a{text-decoration: none;}
.example {	background-color:#959595;height: 60px;width: 60px;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;text-align:center;}
.example h5 {color:#fff;padding-top:20px;font-size: 16px;}
.example:hover, .active {background-color:#474747;cursor:pointer;}
.thumb_img {	float: right;margin: 0px 0px 0px 20px;}
.description {display:block;	overflow: hidden;padding: 0px 0px 20px 0px;}
.info {display:block; padding: 0px 0px 10px 15px;}
.info { background-color:#bbe9f7 ; border-color: #6b99c7; }
.sliders {display:block; padding: 0px 0px 0px 0px;}
.white {	color:#fff;font-size: 10px;}
.hand {	 cursor: pointer;}
.border-box{border:1px solid; border-color: #ccc ;padding: 10px 20px 10px 20px;}
.border-box ul{list-style-type:none; padding-left:20px;}
.controls ul{list-style-type:none;}
.controls a{text-decoration: underline;}

table td{ padding:10px 10px 10px 10px;}
#features{position: relative;margin:0 auto 0px auto;width:400px;}
#features ul li{list-style-position: inside; }
#main{float:right; width:350px;padding-top:40px;padding-bottom:10px;}
#bottom{font-size: 11px; color:#aaa;}
#bottom a{float:none; display:inline;}

.button{display: block;	width: 30px;height: 29px;text-indent: -9999px;	left: 0px;outline: none; float:left;}
#play{	background-image: url(../img/play.png);	}
#play:hover{background: transparent url(../img/play_hover.png) bottom left no-repeat;}

#stop{	background-image: url(../img/stop.png);	}
#stop:hover{background: transparent url(../img/stop_hover.png) bottom left no-repeat;}

#pause{	background-image: url(../img/pause.png);	}
#pause:hover{background: transparent url(../img/pause_hover.png) bottom left no-repeat;}

#pause3s{width: 90px;background-image: url(../img/pause3s.png);	}
#pause3s:hover{background: transparent url(../img/pause3s_hover.png) bottom left no-repeat;}



.container_code {border:1px solid #d7d7d7;background-color:#fafafa;color:#000000;font-size:14px; font-family:monospace;overflow:auto;padding: 8px 10px 8px 8px;border-left:#95d8b7 4px solid;}
.container_code pre {margin:0px !Important; padding:0px !Important;}
.container_code .html_com {color:#88acc9;}
.container_code .html_doctype {color:#bfbfbf;}
.container_code .html_tagop {color:#804000;}
.container_code .html_attrop {color:#804000;}
.container_code .html_tag {color:#c08000;}
.container_code .html_attr {color:#4682b4;}
.container_code .html_attrvalue {color:#f58c83;}
.container_code .jscript_com {color:#88acc9;}
.container_code .jscript_invalid {color:#ff0000;}
.container_code .jscript_keyword {color:#0000ff;}
.container_code .jscript_number {color:#31a310;}
.container_code .jscript_string {color:#0080c0;}
.container_code .jscript_regexp {color:#008040;}
.container_code .jscript_coreobj {color:#9a81fe;}
.container_code .jscript_globconst {color:#95a8ea;}
.container_code .jscript_globmethod {color:#cf80ff;}
.container_code .jscript_prop {color:#38a9d3;}
.container_code .jscript_method {color:#a55f8c;}


 
div.highlight { 
	border:1px solid #d7d7d7;background-color:#fafafa;color:#000000;font-size:14px; font-family:monospace;overflow:auto;padding: 8px 10px 8px 8px;border-left:#95d8b7 4px solid;
}
div.highlight pre{
	width: 100%;
	overflow: auto;
	padding:0;
	margin:0;
	font-size:12px;
	clear: both;
}

/* tabs */
div.highlight ul.tabs {
	overflow: hidden;
	padding: 5px 0 5px 0;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid #E0E0E0;
	width: 100%;
}
div.highlight ul.tabs li {
	padding: 0;
	margin: 0 5px;
	float: left;
	background: none;
	border-bottom: 1px dashed #CCC;
	line-height:1.0em;
	color: #CCC;
	cursor: pointer;
}
div.highlight ul.tabs li.active {
	border-bottom: none;
	cursor: default;
}

/* pre */
div.highlight pre.code ol {
	margin: 0;
	padding:0 0 0 45px;
	background:#e7e5dc; 
}
div.highlight pre.code ul {
	margin: 0;
	padding:0;	
}
div.highlight pre.code ol li,
div.highlight pre.code ul li {
	padding:0 0 0 5px;
	border-left:3px solid #CCC;
	background:#F8F8F8;
}
div.highlight pre.code ul li {
	border-left:none;
}
div.highlight pre.code ol li.even,
div.highlight pre.code ul li.even {
	background-color:#FFFFFF;
}
div.highlight pre.source {
	display: none;
	padding:0 0 0 5px;
}

/* highligting */
pre.code .str { 
	color: #f58c83; 
}
pre.code .kwd,
pre.code .kwd span { 
	color: #070;
}
pre.code .com,
pre.code .com span { 
	color:#88acc9;
	font-style: italic;
	font-weight: normal; 
}
pre.code .typ { 
	color: #4682b4; 
}
pre.code .lit { 
	color: #066;
}
pre.code .pun { 
	color: #660; }
pre.code .pln { 
	color: #000; 
}
pre.code .tag { 
	color: #c08000;
	font-weight: bold;  
} 
pre.code .atn { 
	color: #4682b4; 
}
pre.code .atv { 
	color: #f58c83; 
}
pre.code .dec { 
	color: #4682b4; 
}
pre.code .fnc,
pre.code .fnc span { 
	color: #00b; 
}
pre.code .html_tagop {color:#804000;}

/* css */
.css pre.code .kwd,
.css pre.code .kwd span { 
	color: #c08000;
	font-weight: bold; 
}
/* php */
.php pre.code .str,
.php pre.code .str span { 
	color: #d00; 
}
.php pre.code .var,
.php pre.code .var span { 
	color: #00b; 
}
.php pre.code .com,
.php pre.code .com span { 
	color:#ff8000;
	font-style: italic;
	font-weight: normal; 
}