body {
background-color:#FFD;
width:99%;
}

#logo {
float:left;
padding-top:8px;
margin-left:36px;
}

.header {
width:100%;
height:100px;
}

.headerLogo {
float:left;
width:95%;
height:60px;
margin-left:2.5%;
background-color:#000;
}

#MainTitle {
float:left;
width:95%;
}

ruby {
float:left;
width:90%;
margin-left:5%;
border-bottom:solid 3px #cce4ff;
}

h1 {
font-size:26px;
position:relative;
color:#55A;
}

h1:after {
position:absolute;
content:" ";
display:block;
border-bottom:solid 3px #5472cd;
bottom:-19px;
width:30%;
}

h2 {
border-left:5px solid #AAF;
background-color:#FFF;
font-size:23px;
padding:3px 15px;
}

.center {
height:auto;
width:90%;
margin-left:5%;
}

.c_left {
float:left;
width:23%;
margin-right:4%;
}

.c_center {
float:left;
width:26%;
margin-right:4%;
}

.c_right {
float:left;
width:37%;
}

ul {
list-style:none;
position:relative;
padding:0;
}

.tail {
background-color:#444;
width:95%;
margin-left:2.5%;
position:fixed;
bottom:0;
height:60px;
}

small {
float:right;
color:#fff;
margin-right:8px;
font-size:18px;
}

.c_left > ul li {
color:#2d8fdd;
border-left:solid 6px #2d8fdd;
background:#f1f8ff;
margin-bottom:3px;
line-height:1.5;
list-style-type:none !important;
padding:0.5em;
}

.c_right > ul li {
line-height:1.5;
list-style-type:none !important;
padding:0.5em;
}

ol {
counter-reset:number;
list-style-type:none !important;
padding:0;
}

ol li {
position:relative;
line-height:1.5em;
background:#f1f8ff;
border-left:solid 35px #5c9ee7;
margin-bottom:5px;
padding:0.5em;
}

ol li:before {
position:absolute;
counter-increment:number;
content:counter(number);
display:inline-block;
color:#FFF;
font-family:'Avenir','Arial Black','Arial',sans-serif;
font-weight:700;
font-size:15px;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
left:-35px;
width:35px;
height:1em;
line-height:1;
text-align:center;
}

.image {
float:center;
margin-left:30%;
width:45%;
}

#map {
height:auto;
width:46.75%;
margin:1% 1% 1% 1.25%;
}

.text {
margin:0 20px;
}

h4 {
font-size:18px;
margin:8% 10% 0;
}

li {
font-size:18px;
}

.menu {
list-style:none;
width:200px;
height:45px;
display:block;
color:#03F;
font-size:18px;
text-align:center;
border:5px #03F;
background-color:#CCC;
float:left;
margin:7px;
padding:2px;
}

.link {
font-weight:700;
display:block;
text-decoration:none;
}

#current {
background-color:#CCC;
height:50px;
position: absolute;
top: 35%;
left:0%;
margin-left:2.5%;
transform: translate(0%, 0%);

}

#wordlink {
color:#000;
margin-left:7%;
}

#buttonField{
	position: relative;
}

.center-top,.center-bottom {
float:left;
width:90%;
height:auto;
margin:2% 5% 5%;
}

#current:hover,.menu:hover {
background-color:#DDD;
}


.listText{
	margin-left:20px;
}

#buttonField {
position: relative;
height:200px;
}



@media screen and (max-width:920px) {
.c_center > ul {
margin-left:20px;
}

#MainTitle {
height:auto;
float:left;
width:90%;
margin:0;
}

rt {
font-size:18px;
}

h1 {
font-size:37px;
}

.menu {
list-style:none;
width:300px;
height:45px;
display:block;
color:#03F;
font-size:32px;
text-align:center;
border:5px #03F;
background-color:#CCC;
float:left;
margin:7px;
padding:2px;
}

.link {
display:block;
text-decoration:none;
}

#current {
font-weight:700;
background-color:#CCC;
position: absolute;
top: 55%;
left:0%;
margin-left:2.5%;
transform: translate(0%, 0%);
}


#wordlink {
color:#000;
margin-left:7%;
}

#buttonField {
position: relative;
height:200px;
}

.text {
font-size:18px;
}

.tail > p {
margin-right:18px;
}

h2 {
font-size:32px;
}

.headerLogo {
float:left;
width:95%;
height:100px;
margin-left:2.5%;
background-color:#000;
}

#logo {
width:300px;
height:75px;
}

.image {
float:center;
margin-left:5%;
width:90%;
}

.c_left,.c_center,.c_right {
float:left;
width:100%;
}

#current:hover,.menu:hover {
background-color:#DDD;
}

h4,small {
font-size:22px;
}

li,ol > li::before {
font-size:25px;
}
}