#header {
    width: 900px;
    text-align: center;
    margin: auto;
}

#otel {
    width: 900px;
    margin: auto;
    border: 1px solid #1a2e36;
    background-color: #78d8ff;
    padding: 10px;
}

#otel .kat {
    
    margin: 10px 0;
}

#otel .kat span {
    font-size: 18px;
    width: 100px;
    display: inline-block;
}

#otel .kat .odalar{
    display: inline-block;
}

#otel .kat .odalar .oda{
    display: inline-block;
    width: 100px;
    height: 100px;    
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    background-color: white;
}

#otel .kat .odalar .oda span {
    display: block;
    padding: 10px 0 0 0;
}

#otel .kat .odalar .oda i {
    border: 1px solid #b38c0d;
    background-color:  #e4c86c;
    padding: 5px;
    border-radius: 50%
}


#otel .kat .odalar .oda.durum1{
    background-color: maroon;
}
#otel .kat .odalar .oda.durum2{
    background-color: orange;
}
#otel .kat .odalar .oda.durum3{
    background-color: gray;
}


#otelodasi {
    width: 320px;
    margin: auto;
    border: 1px solid #1a2e36;
    background-color: #78d8ff;
    padding: 10px;
}

#otelodasi h2 {
    text-align: center;
    border: 1px dashed #4a4a4a;
    margin: -10px;
    padding: 10px;
}

#otelodasi .talep {
    margin: 10px 0;
}

#otelodasi a {
    background-color: #3f9fc5;
    padding: 10px;
    margin: 5px;
    border-radius: 10px;
    color: #000000;
    text-decoration: none;
    box-shadow: 1px 1px #4a4a4a;
    font-size: 14px;
    font-weight: bold;
}

#otelodasi a:hover{
    background-color: #6eb6d3;
}

#otelodasi a[nohref] {
    background-color: #999999;
    color: #4a4a4a;
}

#misafir {
    width: 900px;
    margin: 10px auto;
    border: 1px solid #1a2e36;
    background-color: #78d8ff;
    padding: 10px;
}

#misafir label {
    width: 100px;
    display: inline-block;
}