@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "utf-8";
/* CSS Document */
html{
	margin:0;
	padding:0;
}
body{
	background: #e3e6e9;
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	width:100%;
}
* {
	font-family: 'Lato', sans-serif, Helvetica, Arial, Verdana !IMPORTANT;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.shareList * {
	-webkit-box-sizing: initial;
	-moz-box-sizing: initial;
	box-sizing: initial;
}
img{
	border:none;
}
h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
}
h1{
	margin:0.5em 0;
}
h2{
	color:#4d4d4d;
	font-size:14px;
}

a{
	color:#0975a2;
	text-decoration:none;
}
a:hover{
	color:#004c6b;
	text-decoration:none;
}
#header {
	border-bottom: 1px solid #AAA;
    background: #fff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #cccccc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#cccccc 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#cccccc 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#cccccc 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#cccccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 );
}
/* logo */
.logo{
	text-align:center;
	padding:25px;
}
.logo a{
	display:block;
	padding:0px;
}
#page {
	padding-bottom: 1px;
}
.appTitle {
	background: #5e2280; /* Old browsers */
    background: -moz-linear-gradient(top,  #5e2280 0%, rgba(255,255,255,.4) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e2280), color-stop(100%, rgba(255,255,255,0.4))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #5e2280 0%, rgba(255,255,255,0.4) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #5e2280 0%, rgba(255,255,255,0.4) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #5e2280 0%, rgba(255,255,255,0.4) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #5e2280 0%, rgba(255,255,255,0.4) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e2280', endColorstr='#fafafa',GradientType=0 ); /* IE6-8 */
    border-bottom: 2px groove rgba(255, 255, 255, 1);
    box-shadow: 0 1px 32px rgba(50,50,50,.2);
	margin-bottom: 10px;
}
.appTitle .icon {
	display: inline-block;
	vertical-align: middle;
	margin: 10px;
	width:60px;
	height:60px;
	border-radius: 8px;
}
.appTitle .icon .shadow {
	position: absolute;
	width:60px;
	height:60px;
	background-image:url(../images/icon-shadow.png);
	background-repeat: no-repeat;
	background-size: 70px;
	background-position: -5px;
	border-radius: 8px;
	box-shadow: 0 0 16px rgba(255,255,255,.6);
}
.appTitle .icon img {
	width:60px;
	height:60px;
	border-radius: 8px;
}
.appTitle .title {
	display: inline-block;
	vertical-align: middle;
	margin: 10px;
	color: #FFFFFF;
    font-family:'Droid Serif',georgia,serif;
    font-size: large;
    font-style: italic;
    text-shadow: 1px 2px 2px #360F4C;
}
/* menu */
.menu{
	margin:20px 10px;
	padding:0;
}
.menu > a{
	display: block;
	color: white;
    font-family: 'Droid Serif',Georgia,serif;
    font-size: large;
    line-height: 45px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
    font-style: italic;
	cursor: pointer;
	background: url(../images/arrow.png) no-repeat center right, #e80a6f;
    background: url(../images/arrow.png) no-repeat center right, -moz-linear-gradient(top,  #e80a6f 0%, #c90a59 100%);
    background: url(../images/arrow.png) no-repeat center right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e80a6f), color-stop(100%,#c90a59));
    background: url(../images/arrow.png) no-repeat center right, -webkit-linear-gradient(top,  #e80a6f 0%,#c90a59 100%);
    background: url(../images/arrow.png) no-repeat center right, -o-linear-gradient(top,  #e80a6f 0%,#c90a59 100%);
    background: url(../images/arrow.png) no-repeat center right, -ms-linear-gradient(top,  #e80a6f 0%,#c90a59 100%);
    background: url(../images/arrow.png) no-repeat center right, linear-gradient(top,  #e80a6f 0%,#c90a59 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e80a6f', endColorstr='#c90a59',GradientType=0 );
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0px 1px 2px #000;
    -webkit-box-shadow: 0px 1px 2px #000;
    box-shadow: 0px 1px 2px #000;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, .4);
    border-bottom: 3px solid rgba(0, 0, 0, .3);
	margin: 10px 0 0;
	padding: 10px;
}
.menu > a:hover{
	background: url(../images/arrow.png) no-repeat center right, #e80a6f;
    background: url(../images/arrow.png) no-repeat center right, -moz-linear-gradient(top,  #ff3f89 0%, #d60060 100%);
    background: url(../images/arrow.png) no-repeat center right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3f89), color-stop(100%,#d60060));
    background: url(../images/arrow.png) no-repeat center right, -webkit-linear-gradient(top,  #ff3f89 0%,#d60060 100%);
    background: url(../images/arrow.png) no-repeat center right, -o-linear-gradient(top,  #ff3f89 0%,#d60060 100%);
    background: url(../images/arrow.png) no-repeat center right, -ms-linear-gradient(top,  #ff3f89 0%,#d60060 100%);
    background: url(../images/arrow.png) no-repeat center right, linear-gradient(top,  #ff3f89 0%,#d60060 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3f89', endColorstr='#d60060',GradientType=0 );
}
.menu > a.download{
	text-align: center !important;
	background: #e80a6f;
    background: -moz-linear-gradient(top,  #e80a6f 0%, #c90a59 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e80a6f), color-stop(100%,#c90a59)) !important;
    background: -webkit-linear-gradient(top,  #e80a6f 0%,#c90a59 100%) !important;
    background: -o-linear-gradient(top,  #e80a6f 0%,#c90a59 100%) !important;
    background: -ms-linear-gradient(top,  #e80a6f 0%,#c90a59 100%) !important;
    background: linear-gradient(top,  #e80a6f 0%,#c90a59 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e80a6f', endColorstr='#c90a59',GradientType=0 ) !important;
}
.menu > a.download:hover{
	background: #e80a6f !important;
    background: -moz-linear-gradient(top,  #ff3f89 0%, #d60060 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3f89), color-stop(100%,#d60060)) !important;
    background: -webkit-linear-gradient(top,  #ff3f89 0%,#d60060 100%) !important;
    background: -o-linear-gradient(top,  #ff3f89 0%,#d60060 100%) !important;
    background: -ms-linear-gradient(top,  #ff3f89 0%,#d60060 100%) !important;
    background: linear-gradient(top,  #ff3f89 0%,#d60060 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3f89', endColorstr='#d60060',GradientType=0 ) !important;
}

.menu > .downloading{
	display: block !important;
	color: #999 !important;
	text-align: center !important;
    line-height: 45px !important;
    text-shadow: 0 -1px rgba(255, 255, 255, .4) !important;
	cursor: default !important;
	background: #DDD !important;
	border: 1px solid rgba(0,0,0,.1) !important;
	border-top: 2px solid rgba(0, 0, 0, .1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .4) !important;
    -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2) !important;
    -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2) !important;
    box-shadow: inset 0px 1px 4px rgba(0,0,0,.2) !important;
	-webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    border-radius: 8px !important;
	margin: 10px 0 0 !important;
	padding: 10px !important;
}

.menu > a.disabled{
	font-family: Arial;
	color: #999;
    font-size: small;
    line-height: 30px;
    text-shadow: 0 -1px rgba(255, 255, 255, .4);
    font-style: normal;
	cursor: default;
	background: url(../images/warning.png) no-repeat 0px 2px, #DDD;
	border: 1px solid rgba(0,0,0,.1);
	border-top: 2px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    -moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
    box-shadow: inset 0px 1px 4px rgba(0,0,0,.2);
	padding: 15px;
	padding-left: 60px;
}
.menu > a.disabled:hover{

}
.menu > a img {
	display: inline-block;
	vertical-align: middle;
	margin: 0 20px 0 10px;
}
.menu > a span {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}
/* content */
.content{
	font-size:12px;
	color:#4d4d4d;
	line-height:2em;
	margin:0;
	padding:5px;
}
.content h2{
	margin:0 0 0 5px;
	padding:0;
}
.content p{
	text-align:justify;
	margin:0 5px 5px 5px;
	line-height:2em;
	padding:0;
}
/* footer */
#footer{
	border-top:1px solid #999999;
	font-size:12px;
	padding:5px 0;
}
#footer p{
	color:#aaaaaa;
	font-size:12px;
	text-align:right;
	margin:5px;
}
#footer p a{
	color:#aaaaaa;
	padding:5px;
}
#footer p a:hover{
	color:#2d2d2d;
}
/* clear */
.clear{
	clear:both;
}
.code{
	padding:0;
	border:1px dotted #bbbbbb;
}
.numbering{
	background:#f2f2f2;
	color:#bbbbbb;
	padding:2px 5px;
}
.tag{
	color:#0975a2;
}
.program{
	color:#ff003c;
}
.head{
	padding:10px 10px 0px 10px;
	color:#2d2d2d;
}

.demo {
	position: absolute;
	width: 80px;
	height: 80px;
	background: url(../images/demo.png) no-repeat;
	color: #FFF;
}