body { font-size:10pt; font-family:verdana,tahoma; }
.display {
    text-align: center;
    width: 100px;
    height: 100px;
}
.depth {
    text-align: center;
    width: 100px;
    height: 20px;
}
.preview {
    text-align: center;
    width: 100px;
    height: 20px;
    border: 1px solid #d9d9d9;
}
.legend { height: 10px; font-size:8pt; }
.operation { margin-left: 5px; }
.off {
    background-image: url(../img/default.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 30px;
}
.on {
    background-image: url(../img/Saved.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 30px;
}
.saved {
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}
.saveDiv:last-child {
    animation: pulse 0.8s;
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1.0;
  }
}
.subject {
    line-height: 35px;
    padding-top: 10px;
    font-size: 9pt;
    font-weight: bold;
}
.color {
    height: 20px;
}
input[type=number]{
    width: 40px;
}

#media-320, #media-768, #media-1024, #media-1025 {
    display: none;
    height: 0px;
    overflow: hidden;
}
  
@media all and (max-width: 320px) {
    #media-320 { display: block; }
}
@media all and (min-width: 321px) and (max-width: 768px) {
    #media-768 { display: block; }
}
@media all and (min-width: 769px) and (max-width: 1024px) {
    #media-1024 { display: block; }
}
@media all and (min-width: 1025px) {
    #media-1025 { display: block; }
}

/* iPads (portrait and landscape)  */
/*
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
  body { background-color: greenyellow; }
    .operation { width:100%; }
    .mobile { text-align:center; width:50px; }
    .saved {
    width: 50px;
    height: 25px;
    }
}*/

/* iPads (landscape)  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  body { background-color: black; }
	h1 { color: yellow; }
}

/* iPads (portrait)  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
   	body { background-color: yellow; }
	h1 { color: black; }  
}


/* Desktops and laptops */
@media only screen
and (min-width : 1025px) {
   	body { background-color: white; }
	h1 { color: yellow; }  
}