@import url(https://fonts.bunny.net/css?family=assistant:400|balsamiq-sans:700);

body {
    background-color:#FFFFD2;
    font-size:13px;
    height:100%;
}

#headerarea {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    max-height:200px;
    width:1800px;
    margin:auto;
}

.header {
    min-width:1000px;
    position:relative;
    border-style:solid;
    border-color:#1899a1;
    border-width:3px 4px 0px 4px;
    border-top-left-radius: 5em 5em;
    border-top-right-radius:3px;
    background-color:#B8F164;
    background-image:url("/img/cloudy.gif");
    margin-bottom:-11px;
}

.header > img {
    max-width:100%;
    max-height:100%;
}

.rinchan {
    display:inline-block;
    margin-top:-11px;
    float:right;
    z-index:5;
    height:202px;
}

.logo {
    display:inline-block;
    position:relative;
    margin-left:40px;
    margin-top:30px;
    width:400px;
}

.ojisan {
    display:inline-block;
    position:relative;
    margin-left:15px;
    margin-bottom:35px;
    width:100px;
    transform: rotate(15deg);
}

#headerarearight {
    position:relative;
    display:grid;
    grid-template-rows:.1fr 1.1fr;
    margin-top:97px;
}


miki {
    z-index:5;
}

.menubar {
    width:85%;
    min-width:680px;
    height:54px;
    background-color:#ddff77;
    border-top:solid 3px #1899a1;
    margin-left:-4px;
}

.mainbuttons {
    z-index:0;
    padding: 5px;
    margin-left:10px;
}

.maineach {
    display:inline-block;
    z-index:0;
    width:100px;
    padding-left:8px;
    padding-top:4px;
    padding-bottom:4px;
    height:33px;
    background-color:#EE4E7F;
    margin-right:5px;
    transition: all 0.05s ease-out;
    border:1px solid #B8499D;
    border-radius:3px;
    box-shadow: inset 0 0 2px #a6355e;
}

.maineach:hover {
    background-color:#ff9fc4;
    box-shadow: inset 0 0 3px #EE4E7F;
}

.buttontext {
    display:block;
    position:relative;
    color:white;
    font-size:15px;
    font-weight:bold;
    transition: all 0.5s ease-out;
    letter-spacing:0.5px;
    font-family: 'Balsamiq Sans';
    text-shadow: -1px 0 #a6355e, 0 1px #a6355e, 1px 0 #a6355e, 0 -1px #a6355e, 0 0;
}

.buttonsubtext {
    display:block;
    color:white;
    font-size:11px;
    text-decoration:overline;
    transition: all 0.5s ease-out;
    letter-spacing:1px;
    margin-top:-2px;
    font-family: 'Assistant', sans-serif;
}

.marqueebar {
    background: linear-gradient(90deg,rgba(208, 245, 63, 1) 40%, rgba(135, 228, 164, 1) 100%);
    height:40px;
    width:85%;
}

.marqueetext {
    padding-top:10px;
    padding-bottom:10px;
    margin-bottom:5px;
    position:relative;
    margin-left:55px;
    height:50%;
}

#mainframe {
    position:relative;
    background-color:#FFD34A;
    width:1792px;
    margin:auto;
    height:auto;
    border-style:solid;
    border-color:#1899a1;
    border-width:0px 4px 3px 4px;
    border-top-right-radius: 2em 5em;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:3px;
}

.maincontent {
    display:grid;
    grid-template-columns: 3fr 1fr;
    padding-left:20px;
    padding-right:20px;
    background-color:#FAFBD5;
    height:auto;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:20px;
    border:1px solid #AFA279;
    border-radius:2px;
    padding-bottom:30px;
    padding-top:10px;
}

.innerleft {
    border-right:1px dotted #AFA279;
    padding-left:5px;
    padding-right:10px;
    margin-top:-5px;
}

.innerright {
    margin-left:15px;
    margin-right:15px;
}

.sectionbuttonarea {
    border-width:1px 0px 0px 0px;
    border-color:#AFA279;
    border-style:solid;
    width:97.7%;
    padding-left:20px;
    padding-top:10px;
    padding-bottom:10px;
    margin-top:0;
    margin-left:0;
    overflow:hidden;
    min-width:0;
} 

.sectionbuttons {
    display:inline-block;
    width:100px;
    height:25px;
    margin-right:5px;
    padding-top:10px;
    padding-bottom:-15px;
    border:1px solid #d44c4c;
    background-color:#ff8f33;
    border-radius:3px;
    transition: all 0.05s ease-out;
    box-shadow: inset 0 0 2px #e0662d;
}

.sectionbuttons:hover {
    background-color:#ffb600;
    box-shadow: inset 0 0 3px #d1760f;
}

.sectionbuttontext {
    display:block;
    color:white;
    font-size:14px;
    font-weight:bold;
    letter-spacing:0.5px;
    margin:0px 5px;
    font-family: 'Balsamiq Sans';
    text-shadow: -1px 0 #e0662d, 0 1px #e0662d, 1px 0 #e0662d, 0 -1px #e0662d, 0 0;
}

.musicplayer {
    position:absolute;
    max-width:250px;
    max-height:50px;
    right:130px;
}

h1 {
    border-bottom:2px dashed #1899a1;
    color:#3A4348;
    font-size:22px;
    font-family: 'Balsamiq Sans';
}

h2 {
    color:#3A4348;
    border-bottom:1px dashed #1899a1;
    font-size:18px;
    font-family: 'Balsamiq Sans';
    letter-spacing:0.5px;
    margin-top:30px;
}

p {
    color:#1f2326;
    text-align:justify;
    font-size:14.5px;
    margin-bottom:-3px;
    font-family: 'Assistant', sans-serif;
}

.imgcontainer {
    max-width:700px;
    margin:auto;
    margin-top:20px;
}

.imgcontainer > img {
    border:1px solid gray;
    max-width:700px;
    margin:auto;
}

.imgcaption {
    background-color:#979797;
    color:white;
    max-width:700px;
    min-height:15px;
    height:auto;
    padding:3px 10px;
    margin-top:-4px;
    border:1px dotted #686868;
    font-family: 'Balsamiq Sans';
    font-size:13px;
    text-align:center;
}

ul {
  list-style-image: url('/img/star.gif');
  list-style-type: square;
  font-family: 'Assistant', sans-serif;
  font-size:14px;
}

a {
    color:#EE4E7F;
    font-weight:bold;
    text-decoration:none;
}

a:hover {
    color:#EE4E7F;
    font-weight:bold;
    text-decoration:underline;
}

a:visited {
    color:#EE4E7F;
    font-weight:bold;
    text-decoration:none;
}

b {
    color:#ee4e7f;
    text-shadow: -1px 0 #420f21, 0 1px #420f21, 1px 0 #420f21, 0 -1px #420f21, 0 0;
    letter-spacing:1px;
    font-size:15px;
}

i {
    color:#3A4348;
}

::selection {
    background-color:#EE4E7F;
    color:white;
}

#statuscafe {
    display:inline-block;
    position:relative;
    margin-top:3px;
}
#statuscafe-username {
    font-family: 'Balsamiq Sans', sans-serif;
    color:#3A4348;
    background-color:#edf283;
    padding-left:10px;
    margin-left:-10px;
    border-radius:2px;
    border:1px solid gray;
    font-size:12px;
    width:auto;
    max-width:175px;
    letter-spacing:1px;
}
#statuscafe-content {
    display:inline-block;
    font-family: 'Balsamiq Sans', sans-serif;
    color:white;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    margin-left:-5px;
    font-size:11px;
}

.mood {
    margin-left:10px;
    margin-right:15px;
    padding-bottom:1px;
    background-color:#ee4e7f;
    margin-bottom:5px;
    border:1px solid #a6355e;
    border-radius:2px;
}

.siwebringstuff > b {
	color:hotpink;
}