@font-face {
         font-family:RobotoSlab;
         src: url("RobotoSlab-Regular-webfont.woff");
         font-weight:normal;
         font-style:normal;
}

@font-face {
         font-family:Roboto;
         src: url("Roboto-Regular-webfont.woff");
         font-weight:normal;
         font-style:normal;
}

@font-face {
         font-family:Roboto;
         src: url("Roboto-Medium-webfont.woff");
         font-weight:bold;
         font-style:normal;
}

@font-face {
         font-family:Roboto;
         src: url("Roboto-Light-webfont.woff");
         font-weight:lighter;
         font-style:normal;
}

P {
         font-family:Roboto,sans-serif;
         font-style:normal;
         font-size:16px;
         font-weight:lighter;
         text-decoration:none;
         text-align:left;
         color:#777777;
}

.text {
         margin-left:320px;
}

.menu {
         font-family:Roboto,sans-serif;
         font-style:normal;
         font-size:20px;
         font-weight:lighter;
         text-decoration:none;
         text-align:left;
         color:#ffaa00;
         margin-left:40px;
         margin-top:40px;
}

LI {
         font-family:Roboto,sans-serif;
         font-style:normal;
         font-size:16px;
         font-weight:lighter;
         text-decoration:none;
         text-align:left;
         color:#777777;
         list-style-type: square;
}

H1 {
         font-family:RobotoSlab,serif;
         font-style:normal;
         font-size:20px;
         font-weight:normal;
         text-decoration:none;
         text-align:left;
         margin-top:20px;
         margin-bottom:10px;
         color:#ff0000;
}

A:link {
         font-family:Roboto,sans-serif;
         text-decoration:none;
         font-weight:normal;
         color:#ffaa00;
}

A:visited {
         font-family:Roboto,sans-serif;
         text-decoration:none;
         font-weight:normal;
         color:#ffaa00;
}

A:active {
         font-family:Roboto,sans-serif;
         text-decoration:none;
         font-weight:normal;
         color:#ffaa00;
}

A:hover {
         font-family:Roboto,sans-serif;
         text-decoration:none;
         font-weight:normal;
         color:#ff0000;
}

body {
         margin:0px;
         height:100%;
         background-color:#F9F5EE;
}

html {
         margin:0px;
         height:100%;
}

#container {
         width:1000px;
         margin:0px auto;
         background-color:#ffffff;
}

#logo {
         width:350px;
         height:110px;
         background-color:#ffffff;
         float:left;
}

#menu {
         width:650px;
         height:110px;
         background-color:#fff18a;
         float:left;
}

#banner {
         width:1000px;
         height:5px;
         background-color:#ffaa00;
         float:left;
}

#animation {
         width:1000px;
         height:auto;
         background-color:#ffffff;
         float:left;
}

#pictures {
         width:1000px;
         height:auto;
         background-color:#ffffff;
         float:left;
}

#content_a {
         width:940px;
         height:auto;
         padding:30px;
         background-color:#ffffff;
         float:left;
}

#content_b {
         width:940px;
         height:auto;
         padding:30px;
         background-color:#ffffcc;
         float:left;
}

#product {
         width:300px;
         border-top: 2px solid red;
         height:auto;
         padding-right:5px;
         float:left;
}

#product_top {
         width:307px;
         height:auto;
         padding:no;
}

#map_large {
         visibility:visible;
         height:620px;
         width:620px;
}

#map_small {
         visibility:hidden;
         height:0px;
         width:0px;
}

#footer {
         width:940px;
         height:auto;
         padding:10px 30px 10px 30px;
         background-color:#fff18a;
         float:left;
}

@media only screen and (max-width: 980px) {

.text {
         margin-left:0px;
}

.menu {
         font-size:14px;
         margin-left:0px;
         margin-top:15px;
}

#container {
         width:100%;
}

#logo {
         width:100%;
}

#menu {
         width:90%;
         height:auto;
         padding:0% 5%;
}

#banner {
         width:100%;
         height:5px;
}

#animation {
         visibility:hidden;
         width:0px;
         height:0px;
         float:left;
}

#pictures {
         width:100%;
}

#content_a {
         width:90%;
         height:auto;
         padding:5%;
}

#content_b {
         width:90%;
         height:auto;
         padding:5%;
}

#product {
         width:300px;
         height:auto;
         padding:0%;
}

#footer {
         width:90%;
         height:auto;
         padding:5%;
}

#map_large {
         visibility:hidden;
         height:0px;
         width:0px;
}

#map_small {
         visibility:visible;
         height:300px;
         width:300px;
}

}