Project: Yeon

body {
margin:0;
}

/* GENERAL FONT SETTINGS */

/* HEADINGS */
h1,h2,h3,h4,h5,h6{
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica;
}
h1{
font-size: 190%;
font-weight: normal;
text-decoration:none;
}
h2{
font-size: 150%;
font-weight: normal;
text-decoration:none;
}
h3{
font-size: 130%;
font-weight: bold;
text-decoration:none;
}
h4{
font-size: 120%;
font-weight: bold;
text-decoration:none;
}
h5 {
font-size: 100%;
font-weight: bold;
text-decoration:none;
}

h6 {
font-size: 90%;
font-weight: bold;
text-decoration:none;
}

#container {
margin:0 auto;
padding:0;
width:80%;
}

/* HEADER */

#header h1 {
color: #e6e6e6;
}

#header h2 {
color: #e6e6e6;
}

#header {
height:170px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:black;
background-image:url(https://i.imgur.com/jrLpcjY.jpg);
background-repeat: no-repeat;
background-position:left;
background-attachment: scroll;
background-repeat:no-repeat;
background-size:cover;
opacity:0.80;
filter:alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
position:relative; /* possibly put an image here */
z-index:30;
margin:0px 10px 0px 10px;
}

/* LAYOUT */

#content-wrap {
min-height:1px;
padding:10px 0 1px;
}

#side-bar {
-moz-border-radius:10px;
-webkit-border-radius: 10px;
background-color:black;
float:left;
margin:0 10px;
opacity:0.80;
filter:alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
padding:10px;
width:200px;
}

#page-title {
border-bottom:1px solid #666666;
font-size:200%;
margin:0 0 0.5em;
padding-top:0;
}

#main-content {
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:0 10px 10px 240px;
opacity:0.80;
filter:alpha(opacity=80) !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
padding:10px;
}

#license-area {
color:#555555;
padding:0.5em 0;
}

#account-options li {
display:block;
margin:0;
padding:0;
width:100%;
}

#account-options li a {
-moz-box-sizing:border-box;
display:block;
padding:2px 5px;
width:100%;
z-index:40;
}

#account-options li a:hover {
color:white;
}

#account-topbutton {
font-size:80%;
font-weight:bold;
padding:0 5px;
}

#top-bar {
background:transparent none repeat scroll 0 0;
bottom:0;
left:40px;
opacity:0.80;
filter:alpha(opacity=80);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
position:absolute;
width:98%;
z-index:90;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
}

#top-bar li ul {
display:block;
margin:0;
text-align:center;
text-decoration:none;
border:none;
background:#222;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
}

body {
background-color:black;
background-image:url(https://images3.alphacoders.com/716/716437.jpg);
background-position:center top;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
color:#e6e6e6;
}

#content-wrap {
background-position:center top;
background-repeat:repeat-x;
border:0 solid black;
}

#main-content {
background-color:black;
color:#e6e6e6;
margin-top:0;
}

#header h1 {
left:20px;
position:absolute;
top:53px;
}

#header h1 a {
color:#ffffff;
font-size:40px;
font-stretch:expanded;
font-weight:bold;
text-decoration:none;
}

#header h1 a:hover {
background-color:transparent;
color:#E38800;
text-decoration:none;
}

#top-bar li {
-moz-border-radius:10px;
-webkit-border-radius: 10px
background-color:black;
}

#top-bar li a {
color:#e6e6e6;
text-decoration:none;
}

#top-bar a:hover {
-moz-border-radius:5px;
-webkit-border-radius: 5px;
background-color:black;
}

#top-bar li a:hover {
text-decoration:none;
}

#top-bar a:hover{
background-color: black;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
opacity:1;
filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
}