* {
	padding: 0;
	border: 0;
	margin: 0;
	box-sizing: border-box;
}

html, body {
	font-size: 13px;
	font-family: Arial, Tahoma, sans-serif;
	color: #eee;
	background-color: #111;
}

body, a, input, select {
    cursor: url(../images/mu2.gif), url(../images/mu2.cur),auto;
}

a:link, a:visited, a:hover, a:active {
	color: #eee;
	text-decoration: none;
}

::-webkit-scrollbar{
	width:16px
}
::-webkit-scrollbar-track{
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)
}
::-webkit-scrollbar-thumb{
	background:rgba(0, 90, 156,.8);
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)
}
::-webkit-scrollbar-thumb:window-inactive{
	background:rgba(0, 90, 156,.4)
}


/* Main content
---------------------------------------------*/
main {
	
}

main:after {
	content: "";
    display: table;
    clear: both;	
}


/* Content wrapper 
---------------------------------------------*/
.wrapper {
	max-width: 1200px;
	margin: 20px auto;
}

#content {
	border: 1px solid #333;
}

#content:after {
	content: "";
    display: table;
    clear: both;	
}

/* Header
---------------------------------------------*/
header {
	width: 100%;
	height: 175px;
	padding: 10px;
	font-family: tahoma;
	text-shadow: 1px 1px 1px black;
	border-bottom: 1px solid #0F151E;
	float: left;
	background-image: url('../images/v3-guide.png');
}

.logo {
	width: 25%;
	height: 155px;
	float: left;
}

.name {
	width: 75%;
	height: 155px;
	line-height: 155px;
	font-size: 18px;
	text-shadow: 1px 1px 1px black;
	float: left;
	padding-left: 20px;
}

.char-help {
    width: 300px;
    height: 220px;
    margin-left: -20px;
    margin-top: -20px;
}

header .wrapper:after {
	/* Clear floats after the columns/boxes	*/
    content: "";
    display: table;
    clear: both;	
}

/* Section style
---------------------------------------------*/
section {	
	width: 25%;
	float: left;
	background-color: #090909;
	padding-bottom: 40px;
	font-size: 12px;
}

.cat {
	line-height: 30px;
	background-color: #000;
	padding: 5px 15px;
	font-weight: bold;
	cursor: url(../images/mu.gif), url(../images/mu.cur),auto;
}

.topic {
	line-height: 16px;
	padding: 4px 25px;
	cursor: url(../images/mu.gif), url(../images/mu.cur),auto;
}

.cat:hover, 
.topic:hover {
	background-color: dodgerblue;
}

/* Article style
---------------------------------------------*/
article {
	width: 75%;
	float: left;
	padding: 20px;
	color: #ddd;
	font-size: 12px;
	line-height: 1.5;
}

article a:hover {
	text-decoration: underline;
	cursor: url(../images/mu.gif), url(../images/mu.cur),auto;

}

.topics {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: rgba(255,255,255,0.1);
}

.topics th {
	background-color: rgba(0,0,0,0.5);
	border-right: 1px rgba(0,0,0,0.5) solid;
	border-bottom: 1px rgba(0,0,0,0.5) solid;
	color: #ffffff;
	padding: 6px;
	padding-top: 6px;
	font-weight: normal;
	text-align: initial;
}

.topics td {
	border-right: 1px rgba(0,0,0,0.5) solid;
	padding: 6px;
}

.tr2 {
	background-color: rgba(0,0,0,0.2);
}

/* Footer
---------------------------------------------*/
footer {
	text-align: center;
	padding: 15px;
}

/* Media queries for different browser sizes
---------------------------------------------*/
@media screen and (max-width: 940px){
	section, article {
		width: 35%;	/* The width is 50%, when the viewport is 900px or smaller */
	}

	article {
		width: 65%;	/* The width is 50%, when the viewport is 900px or smaller */
	}
}

@media screen and (max-width: 680px){
	section {
		width: 45%; /* The width is 100%, when the viewport is 600px or smaller */
	}

	article {
		width: 55%; /* The width is 100%, when the viewport is 600px or smaller */
	}
}

@media screen and (max-width: 600px){
	section, article {
		width: 100%; /* The width is 100%, when the viewport is 600px or smaller */
	}
}