@media screen and (min-width: 801px) and (max-width: 1025px) {
.flood-wrap .pipe-top {
left: 128px!important;
}
}
@media screen and (min-width: 479px) and (max-width: 801px) {
.flood-wrap .pipe-top {
left: 143px!important;
}
}
@media screen and (min-width: 0px) and (max-width: 479px) {
.flood-wrap .squares {
width: 14px!important;
height: 14px!important;
}
.flood-wrap .pipe-top {
left: 110px!important;
}
.flood-wrap .pipe {
width: 234px!important;
height: 15px!important;
}
.flood-wrap .tubes {
width: 30px!important;
height: 50px!important;
}
}
@media screen and (min-width: 0px) and (max-width: 320px) {
.flood-wrap .pipe {
left: 8px!important;
}
.flood-wrap .pipefillers {
left: 8px!important;
}
}
body {
background-image: url("../../back/misc/13.jpg");
background-attachment: fixed;
}
.flood-wrap {
margin: 20px 20px 0 20px;
}
.flood-wrap .flood {
display: table;
margin: 20px auto 0 auto;
}
.flood-wrap,
.flood,
.pipe,
.pipefillers,
.pipe-top {
position: relative;
}
.flood-wrap  .instruct .text {
max-width: 600px;
}
.flood-wrap .square-wrap {
margin-bottom: -6px;
filter: contrast(150%);
}
.flood-wrap .squares {
width: 18px;
height: 18px;
}
.flood-wrap .pipe-top {
left: 146px;
width: 17px;
height: 10px;
background-color: #929292;
border-left: 4px solid #000;
border-right: 4px solid #000;
bottom: -6px;
z-index: 1;
}
.flood-wrap .pipe {
left: 25px;
width: 279px;
height: 17px;
background-color: #929292;
border-radius: 10px;
border: 5px solid #000;
filter: contrast(150%);
}
.flood-wrap .pipefillers {
left: 21px;
}
.flood-wrap .tubes {
width: 40px;
height: 70px;
margin: 0 2px;
}
.flood-wrap .buttons {
margin: 20px 0 40px 0;
text-align: center;
}
.flood-wrap .show {
display: block!important;
}
.flood-wrap .blue {
background-color: #44b7d3;
}
.flood-wrap .orange {
background-color: orange;
}
.flood-wrap .red {
background-color: red;
}
.flood-wrap .purple {
background-color: #b707b7;
}
.flood-wrap .green {
background-color: #00ff00;
}
.flood-wrap .yellow {
background-color: yellow;
}
.postscore-wrap {
margin: 0 20px;
}
.postscore {
display: table;
margin: 100px auto;
font-size: 20px;
}
.postscore .text {
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
margin: 0px 0px 10px 0px;
background-color: #fff;
padding: 15px;
border-radius: 5px;
opacity: 0.8;
}
.game-btn {
background-color: #b60000;
color: #fff;
margin: 0 0 5px 2px;
border-radius: 4px;
}
.game-btn:hover {
background-color: #d60808;
}
.post-buttons input[type="text"] {
height: 26px;
font-size: 19px;
vertical-align: middle;
border: 1px solid #b8b3b3;
margin-right: 4px;
}
.post-buttons input[type="text"]:focus {
box-shadow: 0px 0px 6px 0px #31ef22;
}
.flood-wrap .score-board {
max-width: 500px;
border: 5px solid #73b3e3;
}
.flood-wrap .score-board h4 {
color: #fff;
font-weight: 400;
}
.flood-wrap .score-board tr:nth-child(even) {
background-color: #457ba7;
color: #fff;
}
.flood-wrap .score-board tr:nth-child(odd) {
background-color: #538bb8;
color: #fff;
}