M U S L I M G U I D E . S E
Du'aa
#heli {
    padding: 5px;
    border: 1px dotted #FFFFFF;
    background-color: #333333;
}

#heli.jqp-solved {
    background-color: #6FBF46;
}

#heli .jqp-wrapper {
    border-color: #000000;
    background-color: #D5EFF2;
}

#heli .jqp-piece {
    border-color: #444444;
    color: #FFFFFF;
    font-size: 10px;
}

#heli .jqp-piece:hover {
    border-style: solid;
    border-color: #000000;
}

#heli .jqp-piece span {
    padding: 1px;
    background-color: #444444;
}

#heli .jqp-piece:hover span {
    background-color: #000000;
}

#heli .jqp-controls a {
    font-size: 10px;
    margin-right: 3px;
    padding: 2px;
    border-style: none;
    background-color: #3499D6;
    color: #FFFFFF;
}

#heli .jqp-controls a:hover {
    background-color: #74C9F6;
}

#heli .jqp-controls a.jqp-toggle, 
#heli .jqp-controls a.jqp-down {
    padding: 1px;
    border: 1px solid #BBBBDD;
    background-color: #0057BF;
}

#heli .jqp-controls a.jqp-disabled {
    background-color: #195D8C;
    color: #397DAC;
    border-style: none;
    padding: 2px;
}

#heli.jqp-solved .jqp-controls a.jqp-disabled {
    background-color: #49AF15;
    color: #69CF35;
    border-style: none;
    padding: 2px;
}

#heli .jqp-controls span {
    font-size: 10px;
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
}

#heli .jqp-controls span.jqp-disabled {
    color: #AAAAAA;
}

#heli.jqp-solved .jqp-controls span {
    background-color: transparent;
    border-style: none;
}

#heli .jqp-controls span input {
    background-color: #777777;
    color: #FFFFFF;
    font-size: 10px;
    padding: 0px;
    padding-right: 1px;
    margin-left: 0px;
    font-weight: normal;
}

#heli .jqp-controls span.jqp-disabled input {
    background-color: #555555;
    color: #888888;
}

#heli.jqp-solved .jqp-controls span input {
    background-color: #8FDF56;
} 
Ramadhan
#sheep {
    padding: 10px;
    padding-bottom: 12px;
    border: 3px dotted #FFFFFF;
    background-color: #7B8B29;
}

#sheep .jqp-wrapper {
    padding: 2px;
    border: 1px dotted #FFFFFF;
    background-color: #454509;
}

#sheep .jqp-piece {
    border: 1px dotted #FFFFFF;
    font-size: 45px;
}

#sheep .jqp-piece:hover {
    border-style: solid;
    opacity: 0.8;
}

#sheep.jqp-solved .jqp-piece:hover {
    border-style: dotted;
    opacity: 1.0;
}

#sheep .jqp-controls a {
    margin-top: 10px;
    margin-right: 8px;
    padding: 3px 30px;
    border: 1px dotted #FFFFFF;
    background-color: #454509;
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    float: left;
}

#sheep .jqp-controls a:hover {
    background-color: #5B8F08;
}

#sheep .jqp-controls a.jqp-toggle, 
#sheep .jqp-controls a.jqp-down {
    margin-top: 6px;
    padding: 7px 30px;
    background-color: #1A1408;
}

#sheep .jqp-controls a.jqp-disabled {
    border-color: #555519;
    background-color: #6B7B19;
    color: #555519;
} 
Sheep
{ padding: 10px; border: 4px double #333333; background-color: #A9A17A; } .jqp-fr-r4-c4-h4-s1-BC .jqp-wrapper { border-color: #333333; background-color: #6F6A53; } .jqp-fr-r4-c4-h4-s1-BC .jqp-piece { border-color: #333333; } .jqp-fr-r4-c4-h4-s1-BC .jqp-piece:hover { border-color: #EEEEEE; border-style: solid; } .jqp-fr-r4-c4-h4-s1-BC .jqp-controls a { border-color: #555555; background-color: #6F6A53; } .jqp-fr-r4-c4-h4-s1-BC .jqp-controls a:hover { background-color: #4F411D; } .jqp-fr-r4-c4-h4-s1-BC .jqp-controls span, .jqp-fr-r4-c4-h4-s1-BC .jqp-controls span.jqp-disabled { padding: 1px 10px; border: 1px dotted #555555; color: #333333; } .jqp-fr-r4-c4-h4-s1-BC .jqp-controls span:hover { background-color: #C9C19A; } .jqp-fr-r4-c4-h4-s1-BC.jqp-solved .jqp-controls span { padding: 1px 10px; border: 1px dotted #555555; border-color: #0F8F08; background-color: #C9C19A; color: #0F8F08; } .jqp-fr-r4-c4-h4-s1-BC .jqp-controls span input, .jqp-fr-r4-c4-h4-s1-BC .jqp-controls span.jqp-disabled input { background-color: #A9A17A; color: #444444; } .jqp-fr-r4-c4-h4-s1-BC.jqp-solved .jqp-controls span input { background-color: #C9C19A; color: #0F8F08; } .jqp-fr-r4-c4-h4-s1-BC .jqp-controls span:hover input { background-color: #C9C19A; }
Horses
 
id="portrait" .

<script type="text/javascript">
    $(document).ready(function() {
        $('#portrait').jqPuzzle({
            shuffle: true,
            control: {
                shufflePieces: false,
                toggleNumbers: false,
                toggleOriginal: false,
                counter: false,
                timer: false
            },
            style: {
                gridSize: 0,
                overlap: false,
                backgroundOpacity: 0
            }
        });
    });
</script> 
(jQuery.jqPuzzle.css) attached.

#portrait {
    background-color: #221111;
    border: 5px outset #FF0000;
    padding: 20px;
    padding-bottom: 0px;
}

#portrait .jqp-wrapper {
    padding: 0px;
    border: 2px inset #FF0000;
    background-color: #442222;
}

#portrait .jqp-piece {
    border: 2px outset #333333;
    color: #FFFFFF;
    font-size: 30px;
    line-height: 30px;
    text-align: right;
    font-family: Georgia, "Times New Roman", Times, serif;
} 
Muslimsk familj
$(document).ready(function() { $('#gasometer').jqPuzzle({ cols: 5, hole: 16, numbers: false, language: 'de', success: { callback: function(results) { alert('Gelöst in ' + results.moves + ' Zügen und ' + results.seconds + ' Sekunden.'); } }, animation: { shuffleRounds: 1, slidingSpeed: 100, shuffleSpeed: 200 }, style: { gridSize: 0, overlap: false, backgroundOpacity: 0 } }, { secondsLabel: 'Sek.' }); }); </script>

This style sheet also works without the default theme (jQuery.jqPuzzle.css) attached.

#gasometer {
    padding: 15px 110px;
    border-style: none;
    border-top: 6px solid #D19D00;
    border-bottom: 6px solid #D19D00;
    background-color: #000000;
    font-family: Georgia, "Times New Roman", Times, serif;
}
    
#gasometer .jqp-wrapper {
    padding: 1px;
    border: 1px solid #D19D00;
    background-color: transparent;
}

#gasometer .jqp-piece {
    border: 1px solid #000000;
    color: #FFC105;
    font-size: 60px;
    line-height: 68px;
    text-align: center;
}

#gasometer .jqp-piece:hover {
    border-color: #856300;
    opacity: 0.9;
}

#gasometer .jqp-piece:hover span {
    padding: 3px;
    padding-top: 0px;
    background-color: #FFC105;
    color: #FFFFFF;
}		    

#gasometer .jqp-controls a {
    margin-top: 15px;
    margin-right: 5px;
    padding: 3px 16px;
    border: 3px double #000000;
    background-color: #D19D00;
    color: #FFFFFF;
    font-size: 16px;
    float: left;
}

#gasometer .jqp-controls a:hover {
    background-color: #FFC105;
}

#gasometer .jqp-controls a.jqp-toggle, 
#gasometer .jqp-controls a.jqp-down {
    padding: 2px 15px;
    border-width: 4px;
    background-color: #856300;
}

#gasometer .jqp-controls a.jqp-disabled {
    background-color: #333333;
    color: #666666;
}

#gasometer .jqp-controls span {
    margin-top: 0px;
    padding: 2px;
    padding-top: 0px;
	padding-left: 0px;
    background-color: transparent;
    color: #CCCCCC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    float: left;
}

#gasometer .jqp-controls span.jqp-disabled {
    color: #777777;
}

#gasometer.jqp-solved .jqp-controls span {
    padding: 2px;
    padding-top: 0px;
    padding-left: 0px;
    border-style: none;
    background-color: #0E7F07;
    color: #FFFFFF;
}

#gasometer .jqp-controls span input {
    margin: 0px 3px;
    padding: 1px 2px;
    border: 0px none;
    background-color: #222222;
    color: #EEEEEE;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    text-align: right;
}

#gasometer .jqp-controls span.jqp-disabled input {
    color: #777777;
    font-weight: normal;
}

#gasometer.jqp-solved .jqp-controls span input {
    background-color: #59BF53;
    color: #FFFFFF;
} 


Tillbaka till roliga hörnan