html{

    height:100%;
}
body{
    margin-top:0%;
    height:100%;
    background:#82858e;
    margin-left:auto;
    margin-right:auto;
}
p{
    color:white;
        vertical-align:middle;
    line-height:200%;
    font-size:10;
}
h1{
    text-align:center;
}
li {
    display:inline;
    color:white;
}
ul {
    word-spacing:100px;
    text-align:center;
}
div.topbar {
    top:0;
    width:100%;
    height:6%;
    background:#303030;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
}
div.mainbar {
    float:middle;
    width:15%;
    height:30%;
    border-style:solid;
    border-color:#4099ff;
    border-width:5px;
    margin-left:40%;
    margin-top:14%;
    margin-bottom:auto;
    background:white;
}
div.sidebar {
    float:left;
    width:10%;
    height:89%;
    margin-left:0px;
    margin-right:auto;
    background:white;
}
div.sidebarbreak {
    position:absolute;
    width:.3%;
    background:#4099ff;
    margin-left:10%;
    margin-right:0%;
    height:89%;
}
div.footer {
    bottom:0;
    width:100%;
    height:5%;   /* Height of the footer */
    position:absolute;
    background:#303030;
    margin-left:0px;
    margin-right:0px;
}

div.avertise {
    height:65%;
    width:10%;
    background:black;
    margin-top:0%;
    margin-left:90%;
    margin-right:0px;
}

div.add {
    height:30%;
    width:75%;
    position:absolute;
    background:white;
    margin-left:12.5%;
    margin-top:2%;
}

div.add2 {
    height:30%;
    width:75%;
    position:absolute;
    background:white;
    margin-top:35%;
    margin-left:12.5%;
}

div.add3 {
    height:30%;
    width:75%;
    position:absolute;
    background:white;
    margin-top:68%;
    margin-left:12.5%;
}
div .arrow-left {
    width: 0;
    height: 0;
    float:left;
    border-color:white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid white;
    margin-top:170%;
}