File: picdoku.css

/*
  Picdoku - Sudoku puzzles using pictures

  picdoku.css
    Style sheets for picdoku interface

  Author: Randal Allen Anderson III
          rational_ape@hotmail.com
  Web: http://raa3enterprises.com/picdoku
  Copyright (c) 2013 RAA3 Enterprises, Inc.
  GNU General Public License - http://www.gnu.org/licenses/gpl.html
*/

#meat {
 float: left;
 margin-top: 10px;
}
#potatoes {
 float : left;
}
#puzzle {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 600px;
 height: 600px;
}
#instructions {
 margin: 0px 5px;
 font-family:DejaVu Sans, arial, helvetica, sans-serif;
}
#scriptsuccessindicator {
 position : absolute;
 top : 0px;
 left : 700px;
}
#finalmessagediv {
 position : absolute;
 top : 200px;
 left : 100px;
 background-color: yellow;
 z-index: 250;
}
#loadiconbuttons {
 position : absolute;
 top : 50px;
 left : 10px;
 background-color: lightgray;
 z-index: 230;
 padding: 10px;
}
#smileys_div {
 position: absolute;
 top : 800px;
 left : 600px;
 z-index: 220;
}
.largehint {
 width: 56px;
 height: 56px;
}
.mediumhint {
 width: 42px;
 height: 42px;
}
.smallhint {
 width: 28px;
 height: 28px;
}
.smallxhint {
 width: 20px;
 height: 20px;
}
.largefonts {
 font-size: large;
}
.mediumfonts {
 font-size: medium;
}
.smallfonts {
 font-size: small;
}
.smallxfonts {
 font-size: x-small;
}
.sudokuicon {
 width: 51px;
 height: 51px;
}
.sudokuiconorig {
 width: 47px;
 height: 47px;
 border: 2px dotted green;
}
.sudokuiconplaced {
 width: 51px;
 height: 51px;
}
.sudokuiconconflict {
 width: 47px;
 height: 47px;
 border: 2px dashed red;
}
.countplaced{
 color: green;
 font-size: x-large;
 margin-left: 5px;
}
.countdone{
 color: black;
 font-size: large;
 margin-left: 5px;
}
.congrats{
 color: blue;
 font-size: xx-large;
 margin: 20px;
}
.loadimage{
 position: absolute;
 display: block;
 top: 5px;
 left: 5px;
 z-index: 200;
 border:1px solid #25729a; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;font-family:DejaVu Sans, arial, helvetica, sans-serif; padding: 2px 5px 2px 5px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3093c7;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));
 background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
 background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
.selector{
 border:1px solid #25729a; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;font-family:DejaVu Sans, arial, helvetica, sans-serif; padding: 2px 5px 2px 5px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3093c7;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));
 background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
 background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
.pbutton{
 border:1px solid #25729a; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;font-family:DejaVu Sans, arial, helvetica, sans-serif; padding: 2px 5px 2px 5px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3093c7;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));
 background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
 background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
.pbutton:hover{
 border:1px solid #1c5675; background-color: #26759e;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));
 background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
 background-image: -moz-linear-gradient(top, #26759e, #133d5b);
 background-image: -ms-linear-gradient(top, #26759e, #133d5b);
 background-image: -o-linear-gradient(top, #26759e, #133d5b);
 background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}