*{
margin:0;
padding:0;
}
a img{
border: none;
}
body{
font-family:"Open Sans";
font-weight:300;
color:#404040;
background: #F6F6E8;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
box-sizing:border-box;
}
.block{
width: 808px;
margin: 30px auto;
padding-bottom: 20px;
overflow: hidden;
clear: both;
}
#who{
display: block;
overflow: hidden;
padding: 20px;
background: #006899;
color: #ffffff;
}
#forwho{
display: block;
overflow: hidden;
padding: 20px;
background: #008F68;
color: #ffffff;
}
#result{
display: none;
width: 808px;
clear: both;
}
#result img{
margin: 20px 0 0 0;
}
.namefor{
font-size: 1.2em;
}
.dontforget{
font-size: 2em;
padding-top: 20px;
color: #D43F3F;
}
.item{
width: 190px;
float: left;
border: 1px solid #cacaca;
margin: 5px;
overflow: hidden;
padding: 10px 0;
background: #F6F6E8;
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-khtml-border-radius:5px;
}
.item img{
display: block;
margin-left: 20px;
width: 150px;
height: 150px;
clear: both;
}
.infop{
display: block;
padding: 0 0 10px 20px;
overflow: hidden;
}
#popupwrapper{
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 2;
background: #F6F6E8;
display: none;
opacity: 0;
}
#whait{
font-size: 2em;
display: block;
width: 100%;
text-align: center;
padding: 20px 0;
}
.yesbutton{
display: block;
cursor: pointer;
margin: 20px 0 0 20px;
padding: 10px 0;
text-align: center;
width: 150px;
font-size: 0.9em;
color: #ffffff;
background: #006899;
border: 0;
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-khtml-border-radius:5px;
clear: both;
outline: none !important;
}
.yesbutton:hover{
background: #00ACE9;
}
#face01,#face02,#face03,#face04,#face05,#face06,#face07,#face08,#face09,#face10,#face11,#face12,#face13,#face14,#face15,#face16,#face17,#face18,#face19{
display: none;
}
@media screen and (max-width: 810px) {
.block{
width: 606px;
}
}
@media screen and (max-width: 610px) {
.block{
width: 404px;
}
}
@media screen and (max-width: 410px) {
.block{
width: 210px;
}
}
@media screen and (max-width: 320px) {
body{
width: 320px;
}
}