body {
	font-family: 'Open Sans',Arial,sans-serif;
	background: #fff;
}
h4 {
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 8px;
    color: #245269;
    margin-top: 30px;
}

/* Bar */
.top-bar {
	width: 100%;
    height: 100px;
    float: left;
    background-color: #262626;
    border-bottom: solid 1px #383838;
}
.top-bar .logo {
	float: left;
	color: #fff;
	font-size: 24px;
	line-height: 100px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 2px;
}
.top-bar .menu {
	float: right;
}
.top-bar .menu ul {
    height: 100px;
}
.top-bar .menu ul li {
    display: inline;
    margin-right: 30px;
    line-height: 100px;
    text-transform: uppercase;
    color: #717171;
    font-size: 14px;
}
.top-bar .menu ul li:last-child {
	margin-right: 0;
}
.top-bar .menu ul li a {
    color: #fff;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    text-decoration: none;
}
.top-bar .menu ul li a i {
    margin-right: 2px;
}
.bottom-bar {
	width: 100%;
    height: 60px;
    float: left;
	background-color: #f5f5f5;
    border-bottom: 1px solid #e1e8ed;
}
.bottom-bar .intro {
	line-height: 60px;
	color: #666;	
	font-size: 15px;
}
.bottom-bar .page-title {
	float: left;
	line-height: 60px;
	color: #666;
	font-size: 18px;
	text-transform: uppercase;
}
.bottom-bar .page-title i {
	margin-right: 5px;	
}
.bottom-bar .back-button {
	float: right;
	margin-top: 15px;
}

/* Content */
.content {
	width: 100%;
    float: left;
	padding: 40px 0;
}
.content .intro {
	margin-top:-10px; 
	margin-bottom:10px;
	line-height: 25px;
}
.content .block-title {
	font-size: 20px;
	border-bottom: 1px solid #e2e2e2;
	padding-bottom: 15px;
	color: #666666;
	margin-bottom: 20px;
	margin-top: 20px;
}
.content .element-list {
	display: inline-block;
	margin-top: 10px;
}
.content .element-item {
	padding: 10px 15px;
    border: 1px solid #08c;
	margin-bottom: 20px;
}
.content .element-item a {
	color: #08c;
	text-decoration: none;
}
.content .element-item a:hover {
	opacity: 0.8;	
}
.content .element-item i {
	margin-right: 5px;	
}

/* Footer */
.footer {
	width: 100%;
    height: 90px;
    float: left;
    background-color: #262626;
    border-bottom: solid 1px #383838;
}
.footer .copyright {
	float: left;
	color: #fff;
	font-size: 14px;
	line-height: 90px;
	text-transform: uppercase;
}
.footer .follow-us {
	float: right;
}
.footer .follow-us ul {
    height: 90px;
}
.footer .follow-us ul li {
    display: inline;
    margin-right: 10px;
    line-height: 90px;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
}
.footer .follow-us ul li:last-child {
	margin-right: 0;
}
.footer .follow-us ul li a {
    color: #fff;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    text-decoration: none;
}

/* Guide */
.code {
	background-color: #f5f5f5;
    border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 15px;
	color: #5AA4A3;
}
.code-comment {
	color: #13baff;
}
.code-title {
	color: #f0c674;
}
.code-attribute {
	color: #567BD2;
}
.code-value {
	color: #de935f;
}
.margin30 {
	margin-left: 30px;	
}
.margin60 {
	margin-left: 60px;	
}