/* General */

body {
color: #046;
background-color: #7AD2F6;
}
a {
color: #3D1700;
text-decoration: none;
font-style: italic;
font-weight: bold;
}
a:hover {
color: #046;
background-color: #FFF;
}
#header, .title, #footer, #navi div {
text-align: center;
}
hr {
overflow: visible;
padding: 1px;
border: none;
border-top: medium double #046;
color: #046;
text-align: center;
clear: both;
height: 0px;
}

/* Compatibility */

@media only screen and (min-width: 601px) { body {
font: 12pt georgia;
}}
@media only screen and (max-width: 600px) { body {
font: 9pt georgia;
}}

/* Frame */

#navi {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 1;
background-color: #004663;
}
#navi a {
color: #3D1700;
font-style: normal;
}
#navi div {
float: left;
width: 120px;
height: 30px;
margin: 0px 5px;
padding: 15px 0px 10px 0px;
font-weight: bold;
border-top: 10px #FFF solid;
background-color: #7AD2F6;
}
#navi a:hover div {
color: #FFF;
border-top: 10px #7AD2F6 solid;
}
#footer {
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
padding: 15px 0px;
background-color: #004663;
color: #FFF;
}

/* Content */

#page {
position: relative;
top: 73px;
max-width: 800px;
margin: auto;
}
#header, .section {
padding: 8px 20px;
margin-bottom: 20px;
border-radius: 16px;
}
#main {
margin-bottom: 162px;
}
#header {
background-color: #7AD2F6;
font: 32pt georgia;
color: #FFF;
}
.section {
background-color: rgb(240, 256, 256, 0.8);
}
.title {
font: 14pt georgia;
font-weight: bold;
color: #3D1700;
}
.icon {
width: 150px;
height: 150px;
border-radius: 100%;
border: #FFF 2px solid;
}
.left {
float: left;
margin: 0px 15px 5px 0px;
}
.right {
float: right;
margin: 0px 0px 5px 15px;
}
.button {
color: #3D1700;
font-style: normal;
background-color: #FFF;
border: #7AD2F6 2px solid;
border-radius: 10%;
padding: 10px;
margin: 5px;
clear: both;
}
.button:hover {
color: #FFF;
background-color: #7AD2F6;
border: #FFF 2px solid;
}
#grid {
max-width: 720px;
min-width: 540px;
height: auto;
margin: 15px auto;
}
.profile div{
float: left;
width: 160px;
margin: 5px auto;
padding: 10px;
text-align: center;
font-weight: bold;
border-radius: 20%;
}
#grid a{
font-style: normal;
}
#grid a div:hover{
background-color: #FFF;
}
a:hover .icon{
border-color: #185D7A;
}