#exAll{width:600px; margin:30px auto; color: #333;}
#exAll input,#exAll textarea{width:100%;}
#exAll ul li{float: left; margin:0 5px;}
#exAll ul{clear: both; height:50px;}
#exAll h1{text-align:left; font-size:20px; padding:10px 0; font-weight:bold; font-family:arial;}
.bx{margin:20px; float: left; width:300px; height:400px;}
.code{width:280px; border:1px solid #ccc; height:200px; padding:10px; overflow: scroll;}

body,html{height:100%; width:100%; background:url("../../wp-content/themes/zxcvbnm/images/bk0.png.html");}
canvas{background:#ccc;}
#container{height:100%; width:100%; position: relative; padding:0px;}
#nav{position: fixed; z-index:9999; width:100%; bottom:0; color:#ccc; display:block; margin-top:0px;}
#nav ul li{float: left; padding:0 10px 0 0; margin:0 10px 0 0; background:url("../images/v2_border.png") right repeat-y;}
#nav ul li.first{padding:0 10px;}
#nav ul{line-height:25px; height:25px; padding:5px 0 6px 0;}
#nav_left{width:50%;background:#0c2430;float: left;}
#nav_right{background:#0c3245;}
#nav_right li{height:25px; overflow: hidden; float: right !important; padding:1px 10px 0 0 !important;}

#ex1 li a{
color: #555;
text-decoration:none;
text-align:center;
text-shadow: 0 1px 0 white;
height:20px;
line-height:20px;
padding:7px 12px 6px;
font-weight: bold;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.off{
border: 1px solid;
border-color: #AAA #BBB #CCC;
-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25),0 1px 0 white;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25),0 1px 0 white;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffCCC,EndColorStr=#ffe6e6e6);
background-image: -moz-linear-gradient(top,#DDD 0,#EEE 100%);
background-image: -ms-linear-gradient(top,#DDD 0,#EEE 100%);
background-image: -o-linear-gradient(top,#DDD 0,#EEE 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DDD),color-stop(100%,#EEE));
background-image: -webkit-linear-gradient(top,#DDD 0,#EEE 100%);
background-image: linear-gradient(to bottom,#DDD 0,#EEE 100%);
}

.on {
text-shadow: 0 1px 0 white;
border: 1px solid;
border-color: #CCC #CCC #AAA;
background-color: #E0E0E0;
-moz-box-shadow: inset 0 0 1px #fff;
-ms-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px white;
box-shadow: inset 0 0 1px white;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffFAFAFA,EndColorStr=#ffdcdcdc);
background-image: -moz-linear-gradient(top,#FAFAFA 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#FAFAFA 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#FAFAFA 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#FAFAFA 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#FAFAFA 0,#dcdcdc 100%);}

.hover {
text-shadow: 0 1px 0 white;
border: 1px solid;
border-color: #CCC #CCC #AAA;
background-color: #E0E0E0;
-moz-box-shadow:0 0 4px #CCC;
-ms-box-shadow:0 0 4px #CCC;
-webkit-box-shadow:0 0 4px white;
box-shadow:0 0 4px #CCC;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffFAFAFA,EndColorStr=#ffdcdcdc);
background-image: -moz-linear-gradient(top,#EEE 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#EEE 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#EEE 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#EEE 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#EEE 0,#dcdcdc 100%);}

#ex2 li a{
font-size: 12px;
color: #ffffff;
padding: 8px 20px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #7d0000;
text-decoration:none;
}

.on2{
background: -moz-linear-gradient(top,#bb0000 0%,#a80000 39%,#870000);
background: -webkit-gradient(linear, left top, left bottom, from(#bb0000),color-stop(0.39, #a80000),to(#870000));
-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:0px -1px 2px rgba(000,000,000,0.9),0px 1px 2px rgba(000,000,000,0.8);
}

.off2{
background: -moz-linear-gradient(top,#bb0000 0%,#a80000 39%,#870000);
background: -webkit-gradient(linear, left top, left bottom, from(#bb0000),color-stop(0.39, #a80000),to(#870000));
-moz-box-shadow:inset 0px 0px 13px rgba(18,18,18,0.7);
-webkit-box-shadow:inset 0px 0px 13px rgba(18,18,18,0.7);
text-shadow:0px -1px 2px rgba(000,000,000,0.9),0px 1px 2px rgba(000,000,000,0.8);
}

.hover2{
background: -moz-linear-gradient(top,#bb0000 0%,#a80000 39%,#870000);
background: -webkit-gradient(linear, left top, left bottom, from(#bb0000),color-stop(0.39, #a80000),to(#870000));
-moz-box-shadow:0px 1px 10px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:0px 1px 10px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:0px -1px 2px rgba(000,000,000,0.9),0px 1px 2px rgba(000,000,000,0.8);
}


#ex10 li a{
display: block;
text-align:center;
vertical-align: middle;
padding:5px 10px;
color: #fff;
font-size:11px;
text-decoration:none;
}

.on10 {
background: #cde;
border: 2px solid #ccc;
border-color: #8ba2c1 #5890bf #4f93ca #768fa5;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
border-radius:20px;
box-shadow: 0 2px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
-moz-box-shadow: 0 2px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
-webkit-box-shadow: 0 2px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
}
.hover10 {
background: #cde;
border: 2px solid #ccc;
border-color: #8ba2c1 #5890bf #4f93ca #768fa5;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
border-radius:20px;
box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
-moz-box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
-webkit-box-shadow: 0 10px 10px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
}

#ex3 li a{
display: block;
text-align:center;
vertical-align: middle;
padding:8px 20px;
color: #060c17;
font-size:13px;
text-decoration:none;
font-weight:bold;
background: -moz-linear-gradient(top,#485f78 0%,#24394f);
background: -webkit-gradient(linear, left top, left bottom, from(#485f78),to(#24394f));
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #122129;
}

.on3{
-moz-box-shadow:0px 1px 1px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 1px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.5);
text-shadow:0px 1px 0px rgba(255,255,255,0.2);
}

.off3{
-moz-box-shadow:0px 0px 1px rgba(000,000,000,1),inset 0px 0px 9px rgba(20,19,20,1);
-webkit-box-shadow:0px 0px 1px rgba(000,000,000,1),inset 0px 0px 9px rgba(20,19,20,1);
text-shadow:0px 1px 0px rgba(255,255,255,0.2);	
}

.hover3{
-moz-box-shadow:0px 1px 5px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 5px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.5);
text-shadow:0px 1px 0px rgba(255,255,255,0.2);
}

#ex4 li a{
color:#e4eef8;
background:#337fcc;
font-size:12px;
font-weight:bold;
text-align:center;
display:block;
text-decoration:none;
padding:10px 15px 8px 15px;
border:1px solid #225588;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
}

.on4{
text-shadow:0 -1px 0px #333;
background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
box-shadow:0px 1px 0px #1b446d,0px 2px 0px #225566,0px 3px 0px #225566,0px 4px 0px #225566,0px 5px 0px #225566,0px 6px 0px #225566,0px 7px 0px #225566,2px 7px 3px rgba(0,0,0,0.3),0px 1px 0px rgba(255,255,255,0.5) inset,0px -1px 0px rgba(255,255,255,0.2) inset;
}

.off4{
opacity: 0.9;
-moz-opacity: 0.9;
filter:alpha(opacity=90);
text-shadow:0 -1px 0px #333;
background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
box-shadow:0px 1px 0px #1b446d,0px 2px 0px #225566,0px 3px 0px #225566,0px 4px 0px #225566,0px 5px 0px #225566,0px 6px 0px #225566,0px 7px 0px #225566,2px 7px 3px rgba(0,0,0,0.3),0px 1px 0px rgba(255,255,255,0.5) inset,0px -1px 0px rgba(255,255,255,0.2) inset;
}

.hover4{
text-shadow:0 -2px 1px #333;
background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
box-shadow:0px 1px 0px #1b446d,0px 2px 0px #225566,0px 3px 0px #225566,0px 4px 0px #225566,0px 5px 0px #225566,0px 6px 0px #225566,0px 7px 0px #225566,2px 7px 3px rgba(0,0,0,0.3),0px 1px 0px rgba(255,255,255,0.5) inset,0px -1px 0px rgba(255,255,255,0.2) inset;
}

#ex5 li a {
border-radius: 60px 60px 60px 60px;
display: block;
font-size: 20px;
font-weight: bold;
padding: 32px;
text-align: center;
text-decoration: none;
font-family: Impact;
}
.on5 {
color: #5B992B;
background-color: #7FBF4D;
background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
border-color: #63A62F #63A62F #5B992B;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 0 #96CA6D inset;
box-shadow: 0 2px 8px 0 #888;
}
.off5 {
box-shadow:inset 0 2px 8px 0 #888;
color: #CCC;
}
#ex6 li a{
font-family: Arial, Helvetica, sans-serif;text-decoration:none;font-size: 14px;color: #ffffff;padding: 10px 26px;
background: -moz-linear-gradient(top,#ff4040 0%,#f04d4d 50%,#f02d2d);
background: -webkit-gradient(linear, left top, left bottom, from(#ff4040),color-stop(0.50, #f04d4d),to(#f02d2d));
border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;
border: 0px solid #ffffff;text-shadow:0px -1px 0px rgba(042,012,097,0.4),0px 1px 0px rgba(255,255,255,0);display:block;margin:10px 0;
}
.on6{
-moz-box-shadow:0px 5px 1px rgba(199,050,057,1);-webkit-box-shadow:0px 5px 1px rgba(199,050,057,1);
}
.off6{
-moz-box-shadow:0px 2px 0px rgba(199,050,057,1),;-webkit-box-shadow:0px 2px 0px rgba(199,050,057,1);
}
.hover6{
-moz-box-shadow:0px 4px 2px rgba(199,050,057,1);-webkit-box-shadow:0px 4px 2px rgba(199,050,057,1);
}