/* WebDev Assignment - Martyn Poole */
/* MAIN TAGS */
body, html {
	font-family: arial, helvetica, sans-serif;
	margin: 0px;
    padding: 0px;
    line-height: 1.5em;
    height: 100%;
    width: 100%;
}

a {
	text-decoration: none;
    color: #60AFFE;
}

p a:hover { text-decoration: underline; }
a:visited { color: #60AFFE; }
a.cit:visited { color: #C330FE; }

h2 { margin: 4px 8px; }
p {	padding: 0px 16px; }
code { white-space: pre; }

q { 
    background-color: rgba(128, 204, 245, .15);
    padding: 2px;
    font-style: italic;
}

p code {
    font-size: 12pt;
    background-color: rgba(0, 0, 0, .1);
    padding: 0px 2px;
}

footer {
    width: 100%;
    min-width: 1200px;
    height: 31px;
    background-color: rgba(0, 0, 0, .2);
    color: rgba(0, 0, 0, .3);
    margin-top: 5px;
    font-size: 10pt;
    padding: 8px 0px;
    text-align: center;
    box-shadow: 0px 0px 10px #000000;
}

footer a {
    float: right;
    margin-right: 8px;
    vertical-align: middle;
}

header {
	width: 100%;
	min-width: 1200px;
	background-color: rgba(0, 0, 0, .2);
	margin: 0px auto 16px auto;
	padding: 8px 0px;
	text-align: center;
    box-shadow: 0px 0px 10px #000000;
}

header li, h1 {
	display: inline;
	padding: 16px 0px;
	margin: 0px;
	border-radius: 8px;
	transition: .2s ease-in-out;
	font-size: 20pt;
    font-weight: normal;
}

header a {
    text-shadow: 1px 1px 0px #E8E8E8;
    padding: 16px;
}

header li:hover:not(.logo) { /*Select all list items except for any with a class of "logo"*/
    background-color: rgba(0, 0, 0, .05);
    cursor: pointer;
}

header li.logo { margin-right: 16px; }
header ul { padding: 0px; }
header li.current { background-color: rgba(0, 0, 0, 0.1); }
header li.current a { text-shadow: 1px 1px 0px #383838; }

sup {
    line-height: 0em;
    font-size: 9pt;
    padding: 2px;
}

abbr { 
    border-bottom: 1px dotted black;
    cursor: help;
}

ol.code {
    white-space: nowrap;
    font-family: monospace;
    line-height: 1.2em;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-top: 2px solid #FF6600;
    overflow-x: auto;
    overflow-y: hidden;
    list-style-type: decimal-leading-zero;
    width: 778px;
}

ol.code li {
    border-left: 1px solid #FF6600;
    padding-left: 8px;
    padding-bottom: 2px;
}

ol.code li, code {
	font-size: 10pt;
}

ol.code li:hover { background-color: rgba(255, 255, 255, 0.1); }

hr {
	width: 100%;
	height: 1px;
	background-color: #60AFFE;
	box-shadow: 1px 1px 1px #000000;
	margin: 8px 0px 16px 0px;
    border-style: none;
}

aside {
	width: 25%;
	display: table-cell;
	height: 100%;
    border-right: 8px solid white;
}

aside .sub {
    border-radius: 0px 14px;
    border-right: 1px solid #60AFFE;
    border-bottom: 1px solid #60AFFE;
    padding: 1px 16px;
}

main {
	width: 75%;
	display: table-cell;
	height: 100%;
}

main .sub {
    border-left: 1px solid #60AFFE;
    border-bottom: 1px solid #60AFFE;
    border-radius: 14px 0px 14px 0px;
    margin-bottom: 36px;
    padding: 16px;
}

/* ID's */
#wrapper {
	margin: auto;
	width: 75em;
    display: table;
}

#categories.fixed {
    position: fixed;
    top: 15px;
    width: 16.2em;
}

#categories h2 {
    margin: 1.33em 8px 0px 8px;
    font-size: 12pt;
}

#categories li.border {
    margin-left: -3px;
    border-left: 3px solid #60AFFE;
}

/* CLASSES */
.categories { 
    list-style: none;
    width: 100%;
    padding-left: 8px;
}
.categories li { padding-left: 4px; }
.categories li:hover { padding-left: 8px; }

.codeblock {
    border-left: 1px solid #FF6600;
    border-bottom: 1px solid #FF6600;
    border-radius: 7px 0px 7px 0px;
    padding: 8px;
    margin: 8px 16px;
}
.codeblock ol, span { margin: 0px; }
.codeblock span { 
    font-size: 10pt;
    font-weight: bold;
}

.logo img {
	height: 62px;
    width: 62px;
	vertical-align: middle;
}

/* Colours for code blocks */
.h_tag { color: #FF5722; }
.h_attr { color: #8BC34A; }
.h_str { color: #FFEB3B; }
.h_comment { color: #4CAF50; }

.c_tag { color: #FF5722; }
.c_id { color: #00BCD4; }
.c_class { color: #8BC34A; }
.c_attr { color: #B3E6E6; }
.c_pseudo { color: #FF9800; }
.c_prop { color: #CDDC39; }
.c_comment { color: #4CAF50; }

/* PSEUDO */
/*:target { background-color: rgba(128, 204, 245, .1); }*/
a:target {
    background-color: rgba(128, 204, 245, .5);
    color: #307CCB;
}