/* base */

* {
outline: 0;
}
html, body, div, h1, h2, h3, h4, p, ul, li, img, table, tr, th, td form, label, nav, section, audio {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
nav, section, audio {
display: block;
}
html {
min-height: 100%;
}
body {
font-family: arial, verdana, sans-serif;
font-size: medium;
min-height: 100%;
}

/* main layout */

#wrapper {
height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
}
#container {
position: fixed;
top: 0;
left: 0;
bottom: 60px;
right: 0;
overflow: auto;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
overflow: auto;
background-color: #e5e5e5;
border-top: 1px solid #222;
}
section {
width: 750px;
height: 100%;
margin: 0 auto;
padding: 0;
overflow: auto;
background-color: #e5e5e5;
border-left: 1px solid #222;
border-right: 1px solid #222;
}

/* main background images */

div.bghome {
background: url('/images/white-bird.jpg') no-repeat center center;
background-size: cover;
}
div.bggeneral {
background: url('/images/boots.jpg') no-repeat center center;
background-size: cover;
}

/* homepage title */

div.bghome h1 {
width: 650px;
margin: 20px auto 0 auto;
padding: 0;
font-size: 7em;
color: #000;
text-shadow: 1px 1px #666;
text-align: center;
}

/* main navigation */

nav ul {
float: left;
margin: 17px 0 0 16px;
}
nav ul li {
display: inline-block;
margin: 0;
padding: 0;
font-size: 1.4em;
}
nav ul li a {
display: inline-block;
width: 150px;
margin: 0;
padding: 0;
color: #222;
text-align: center;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
nav .current {
font-weight: bold;	
}
nav p {
float: right;
margin: 23px 16px 0 0;
font-size: 1em;
}
nav p a {
color: #222;
text-decoration: none;
}
nav p a:hover {
text-decoration: underline;
}
nav div.facebook {
float: left;
margin: 22px 0 0 16px;
padding: 0;
}

/* main content */

section h1 {
margin: 0 16px 8px 16px;
padding: 8px 0;
font-size: 2em;
color: #222;
border-bottom: 1px solid #222;
}
section h2 {
margin: 0 16px;
padding: 6px 0;
font-size: 1.2em;
color: #222;
}
section h2 {
margin: 10px 16px;
padding: 6px 0;
font-size: 1em;
color: #222;
}
section p {
margin: 0 16px;
padding: 8px 0;
font-size: 0.8em;
line-height: 1.4em;
color: #222;
text-align: justify;
text-justify: inter-word;
}
section p a {
color: #222;
text-decoration: none;
}
section p a:hover {
text-decoration: underline;
}
section ul {
margin: 10px 16px;
padding: 0;
}
section ul li {
margin: 0;
padding: 6px 0;
list-style-type: none;
}
section ul li a {
color: #222;
text-decoration: none;
}
section ul li a:hover {
text-decoration: underline;
}
section hr {
height: 1px;
margin: 8px 16px;
padding: 0;
clear: both;
border: none;
background-color: #222;
}

/* forms */

form.forms {
margin: 12px 0 0 0;
padding: 0;
}
form.forms table {
margin: 0;
padding: 0;
}
form.forms th {
margin: 0;
padding: 12px;
font-size: 0.9em;
vertical-align: top;
text-align: right;
}
form.forms td {
margin: 0;
padding: 12px;
}
form.forms td a {
color: #222;
font-weight: bold;
text-decoration: none;
}
form.forms td a:hover {
text-decoration: underline;
}
form.forms input[type=text] {
margin: 0;
padding: 4px 6px;
color: #222;
border: 1px solid #222;
}
form.forms input[type=email] {
margin: 0;
padding: 4px 6px;
color: #222;
border: 1px solid #222;
}
form.forms input[type=password] {
margin: 0;
padding: 4px 6px;
color: #222;
border: 1px solid #222;
}
form.forms textarea {
font-family: arial, verdana, sans-serif;
margin: 0;
padding: 4px 6px;
color: #222;
font-size: 0.8em;
border: 1px solid #222;
}
form.forms select {
margin: 0;
padding: 4px 6px;
color: #222;
border: 1px solid #222;
}
form.forms input[type=submit] {
display: inline-block;
margin: 0;
padding: 6px 14px;
color: #222;
background-color: #fff;
border: 1px solid #222;
}
form.forms input[type=submit]:hover {
box-shadow: 2px 2px 5px #888888;
cursor: pointer;
}
form.forms p {
font-size: 0.9em;
font-weight: bold;
color: #222;
}

/* music */

#albumlist {
float: left;
width: 350px;
min-height: 420px;
margin: 10px 0 0 16px;
padding: 0 0 10px 0;
background-color: #231f21;
}
#albumlist h2 {
margin: 8px;
padding: 0;
font-size: 1em;
color: #c8c7c8;
}
#albumlist ul {
margin: 0;
padding: 0;
}
#albumlist ul li {
margin: 0 0 4px 16px;
padding: 0;
font-size: 0.9em;
list-style-type: none;
}
#albumlist ul li a {
margin: 0;
padding: 0;
color: #c8c7c8;
font-size: inherit;
text-decoration: none;
}
#albumlist ul li a:hover {
text-decoration: underline;
}
#albumlist ul li.current a {
color: #f2f2f2;
font-weight: bold;
}
#player {
float: right;
width: 350px;
margin: 10px 16px 0 0;
padding: 0 0 10px 0;
background-color: #231f21;
}
#player h3 {
margin: 8px 8px 0 8px;
padding: 0;
color: #c8c7c8;
font-size: 1em;
word-wrap: break-word;
}
#player h4 {
margin: 0 8px 14px 8px;
padding: 0;
color: #c8c7c8;
font-size: 0.8em;
font-weight: normal;
}
#player audio {
width: 324px;
margin: 25px 0 4px 12px;
padding: 0;
background-color: #231f21;
}
#player p {
margin: 8px 8px 8px 18px;
padding: 0;
color: #c8c7c8;
}
#player p a {
color: #c8c7c8;
font-weight: bold;
}
#player ul {
margin: 16px 18px 16px 18px;
padding: 0;
}
#player ul li {
margin: 0;
padding: 0 0 4px 0;
font-size: 0.9em;
color: #c8c7c8;
list-style-type: none;
}
#player ul li a {
margin: 0;
padding: 0;
color: #c8c7c8;
text-decoration: none;
}
#player ul li a:hover {
text-decoration: underline;
}
#player ul li.current a {
color: #f2f2f2;
font-weight: bold;
}
#player ul li.current2 {
color: #f2f2f2;
font-weight: bold;
}
#player ul#playlist li:hover {
cursor: pointer;
text-decoration: underline;
}

/* thoughts */

.post {
margin: 0;
padding: 0;
}
.post h2 {
margin: 8px 16px 0 16px;
padding: 8px 0 4px 0;
font-size: 1.4em;
color: #222;
}
.post h3 {
margin: 0 16px 16px 16px;
padding: 0;
font-size: 0.8em;
}
.post p {
margin: 0 16px 14px 16px;
padding: 0;
}
.post p.toggleme {
margin: 0 16px 14px 16px;
padding: 0;
font-weight: bold;
cursor: pointer;
}
.post p.toggleme:hover {
text-decoration: underline;
}
.post div.add_comment {
margin: 0 30px 20px 30px;
padding: 0;
}
.post div.add_comment textarea {
margin: 0;
padding: 4px 6px;
font-size: 0.8em;
font-family: arial, verdana, sans-serif;
border: 1px solid #222;
}
.post div.add_comment input[type=submit] {
display: block;
margin: 8px 0;
padding: 6px 14px;
color: #222;
background-color: #fff;
border: 1px solid #222;
cursor: pointer;
}
.post div.add_comment input[type=submit]:hover {
box-shadow: 2px 2px 5px #888888;
}
.post div.view_comments {
margin: 0 30px 14px 30px;
padding: 0;
}
.post div.view_comments h4 {
margin: 0 0 6px 0;
padding: 0;
font-size: 0.8em;
}
.post div.view_comments p {
margin: 0 0 14px 0;
padding: 0;
}
.post hr {
height: 1px;
margin: 0 16px;
padding: 0;
clear: both;
border: none;
background-color: #bbb;
}

/* members account */

.navaccount li {
margin: 16px 0;
padding: 0;
}
.navaccount li a {
display: block;
width: 200px;
margin: 0;
padding: 4px 0;
color: #222;
text-align: center;
background-color: #fff;
border: 1px solid #222;
}
.navaccount li a:hover {
box-shadow: 2px 2px 5px #888888;
text-decoration: none;
}

/* message box */

div.message {
position: absolute;
top: 0;
left: 12px;
width: 180px;
margin: 20px 0 20px 0;
padding: 0;
overflow: auto;
background-color: #e5e5e5;
border: 1px solid #222;
}
div.message p {
margin: 0;
padding: 6px;
text-align: center;
font-weight: bold;
}

/* general */

.hideme {
display: none;
}
div.required p {
color: red!important;
}


/*************

ADMIN SECTION

*************/

/* admin homepage navigation */

#navadminhome {
width: 300px;
margin: 30px auto;
padding: 0;
}
#navadminhome li {
margin: 20px 0;
padding: 0;
}
#navadminhome li a {
display: block;
margin: 8px 0;
padding: 10px 14px;
color: #222;
text-align: center;
background-color: #fff;
border: 1px solid #222;
}
#navadminhome li a:hover {
box-shadow: 2px 2px 5px #888888;
text-decoration: none;
}

/* admin top navigation */

#navadmintop {
margin: 0 16px;
padding: 0 0 0 2px;
overflow: auto;
background-color: #e5e5e5;
}
#navadmintop li {
display: inline-block;
margin: 0 5px;
padding: 0;
font-size: 0.8em;
}
#navadmintop li a {
display: block;
width: 75px;
margin: 8px 0;
padding: 10px 14px;
color: #222;
text-align: center;
background-color: #fff;
border: 1px solid #222;
}
#navadmintop li a:hover {
box-shadow: 2px 2px 5px #888888;
text-decoration: none;
}
#navadmintop li a.current {
font-weight: bold;
}

/* Data Table */

.datatable {
width: 720px;
margin: 20px 16px;
padding: 0;
border-collapse: collapse;
}
.datatable th {
margin: 0;
padding: 6px;
font-size: 0.8em;
text-align: left;
border-bottom: 1px solid #222;
}
.datatable td {
margin: 0;
padding: 8px 6px 0 6px;
font-size: 0.8em;
}
.datatable th a {
color: #222;
text-decoration: none;
}
.datatable td a {
color: #222;
text-decoration: none;
}
.datatable th a:hover {
text-decoration: underline;
}
.datatable td a:hover {
text-decoration: underline;
}
.datatable .center {
text-align: center;
}
.datatable .right {
text-align: right;
}
.datatable .pages a {
display: inline-block;
margin: 0 2px;
padding: 2px 6px;
color: #222;
background-color: #fff;
border: 1px solid #222;
}
.datatable .pages a:hover {

}
.datatable .pages span {
display: inline-block;
margin: 0 2px;
padding: 2px 6px;
background-color: #fff;
border: 1px solid #222;
}
.datatable .pages span.current {
font-weight: bold;
border: 2px solid #222;
}

/* links */

p.defaultlink a {
color: #0000ee;
}
p.defaultlink a:visited {
color: #551a8b;
}
p.defaultlink a:visited {
color: #0000ee;
}

/* general admin */

.button a {
display: inline-block;
margin: 14px 0;
padding: 4px 16px;
color: #222;
text-align: center;
background-color: #fff;
border: 1px solid #222;
}
.button a:hover {
box-shadow: 2px 2px 5px #888888;
text-decoration: none!important;
}