/*#############################################################################
#                                                                             #
#                  CSS-Definitionen zum Spiel BILDERPUZZLE                    #
#                -------------------------------------------                  #
#                      (C)opyright bei Michael Gasbers                        #
#                                                                             #
#                     MIGANO Professional Web Solutions                       #
#                                                                             #
#                            All rights reserved.                             #
#                                                                             #
#   Jegliche Form der Kopie, Veränderung und kommerziellen Verbreitung ohne   #
#   die schriftliche Zustimmung des Autors ist strengstens verboten!          #
#  *************************************************************************  #
#   Any form of copy, change and commercial distribution without the prior    #
#   written consent of the author is strictly prohibited!                     #
#                                                                             #
#   Für Anregungen und Fragen nehmen Sie bitte Kontakt mit uns auf über       #
#   http://migano.de oder per E-Mail an >> kontakt@migano.de <<. Danke.       #
#                                                                             #
#############################################################################*/

#puzzle_box {
visibility:hidden;
display:inline-block;
width:100%;
margin:0px;
margin-top:10px;
margin-left:0px;
padding:0px;
/* font-size:1.1em; */
text-align:center;
clear:both;
}

#puzzle_spielfeld {
position:relative;
display:inline-block;
margin:10px;
padding:0px;
border:3px solid;
border-top-color:#20BEF6;
border-left-color:#10AEE6;
border-right-color:#007EB6;
border-bottom-color:#005E96;
border-radius:10px;
/* box-shadow:6px 6px 6px rgba(0,0,0,0.4), -6px 6px 6px rgba(0,0,0,0.4); */
}

#puzzle_dialog {
position:absolute;
top:0px;
left:0px;
display:none;
width:100%;
height:100%;
margin:0px;
padding:0px;
text-align:center;
background-image:url("../../../../puzzle/grafik/bg_dialog.png");
border-radius:8px;
z-index:20;
}

#puzzle_dialog_inhalt {
display:inline-block;
margin:0px;
padding:20px;
background-color:#eee;
/*
background:-o-radial-gradient(#fff,#fff,#bbb);
background:-webkit-radial-gradient(#fff,#fff,#bbb);
background:-moz-radial-gradient(#fff,#fff,#bbb);
background:radial-gradient(#fff,#fff,#bbb);
*/
border:2px solid #888;
border-radius:10px;
box-shadow:4px 4px 4px rgba(0,0,0,0.5),-4px 4px 4px rgba(0,0,0,0.5);
}

span.puzzle_dialog_button {
display:inline-block;
margin:10px;
padding:5px;
padding-left:8px;
padding-right:8px;
color:#fff;
background-color:#555;
background:-o-radial-gradient(#666,#555,#333);
background:-webkit-radial-gradient(#666,#555,#333);
background:-moz-radial-gradient(#666,#555,#333);
background:radial-gradient(#666,#555,#333);
font-weight:bold;
font-size:1.0em;
border:2px solid;
border-color:#ccc;
border-radius:10px;
text-shadow:1px 1px 0px #000;
box-shadow:2px 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.3);
cursor:pointer;
}
span.puzzle_dialog_button:hover {
background-color:#888;
background:-o-radial-gradient(#999,#888,#666);
background:-webkit-radial-gradient(#999,#888,#666);
background:-moz-radial-gradient(#999,#888,#666);
background:radial-gradient(#999,#888,#666);
border:2px solid;
border-color:#fff;
}

p.puzzle_message, p.puzzle_message_button_box {
margin:0px;
margin-top:10px;
padding:0px;
text-align:center;
}
p.puzzle_message {
text-shadow:1px 1px 0px #fff;
}

#puzzle_panel_top {
position:relative;
display:inline-block;
margin:0px;
padding:10px;
text-align:center;
border-top-left-radius:8px;
border-top-right-radius:8px;
}

#puzzle_logo {
position:absolute;
top:10px;
left:10px;
margin:0px;
padding:0px;
}
div.puzzle_logo {
display:inline-block;
margin:0px;
padding:0px;
background-repeat:no-repeat;
}

#puzzle_button_box {
display:inline-block;
margin:0px;
padding:0px;
}

#puzzle_button_tipp, #puzzle_button_solve, #puzzle_button_shuffle, #puzzle_button_size, #puzzle_button_modus, #puzzle_button_animate, #puzzle_button_time {
display:inline-block;
float:left;
width:32px;
height:32px;
margin:0px;
margin-left:10px;
margin-right:10px;
padding:0px;
cursor:pointer;
}
#puzzle_button_tipp {
display:none;
background-image:url("../../../../puzzle/grafik/tipp_bw.png");
}
#puzzle_button_tipp:hover {
background-image:url("../../../../puzzle/grafik/tipp.png");
}
#puzzle_button_solve {
display:none;
background-image:url("../../../../puzzle/grafik/solve_bw.png");
}
#puzzle_button_solve:hover {
background-image:url("../../../../puzzle/grafik/solve.png");
}
#puzzle_button_shuffle {
background-image:url("../../../../puzzle/grafik/shuffle_bw.png");
}
#puzzle_button_shuffle:hover {
background-image:url("../../../../puzzle/grafik/shuffle.png");
}
#puzzle_button_size {
position:relative;
background-image:url("../../../../puzzle/grafik/level_bw.png");
}
#puzzle_button_size:hover {
background-image:url("../../../../puzzle/grafik/level.png");
}
#puzzle_button_modus {
display:none;
}
div.puzzle_button_modus_0 {
background-image:url("../../../../puzzle/grafik/modus_0_bw.png");
}
div.puzzle_button_modus_0:hover {
background-image:url("../../../../puzzle/grafik/modus_0.png");
}
div.puzzle_button_modus_1 {
background-image:url("../../../../puzzle/grafik/modus_1_bw.png");
}
div.puzzle_button_modus_1:hover {
background-image:url("../../../../puzzle/grafik/modus_1.png");
}
#puzzle_button_animate {
display:none;
}
div.puzzle_button_animate_0 {
background-image:url("../../../../puzzle/grafik/animate_0_bw.png");
}
div.puzzle_button_animate_0:hover {
background-image:url("../../../../puzzle/grafik/animate_0.png");
}
div.puzzle_button_animate_1 {
background-image:url("../../../../puzzle/grafik/animate_1_bw.png");
}
div.puzzle_button_animate_1:hover {
background-image:url("../../../../puzzle/grafik/animate_1.png");
}
#puzzle_button_time {
display:none;
}
div.puzzle_button_time_0 {
margin:0px;
padding:0px;
background-image:url("../../../../puzzle/grafik/time_0_bw.png");
}
div.puzzle_button_time_0:hover {
background-image:url("../../../../puzzle/grafik/time_0.png");
}
div.puzzle_button_time_1 {
margin:0px;
padding:0px;
background-image:url("../../../../puzzle/grafik/time_1_bw.png");
}
div.puzzle_button_time_1:hover {
background-image:url("../../../../puzzle/grafik/time_1.png");
}

#puzzle_schritt_left, #puzzle_schritt_right {
height:28px;
line-height:28px;
color:#111;
background-color:#aaa;
}
#puzzle_schritt_left {
display:inline-block;
margin:0px;
margin-left:10px;
padding:0px;
padding-left:8px;
border-top:2px solid;
border-left:2px solid;
border-bottom:2px solid;
border-color:#888;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
#puzzle_schritt_right {
display:inline-block;
width:24px;
margin:0px;
padding:0px;
padding-left:5px;
padding-right:8px;
font-weight:bold;
text-align:center;
text-shadow:1px 1px 0px #ccc;
border-top:2px solid;
border-right:2px solid;
border-bottom:2px solid;
border-color:#888;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}

#puzzle_size_selector {
position:absolute;
top:-6px;
left:-6px;
display:none;
margin:0px;
padding:5px;
background-color:#ddd;
border:1px solid #888;
border-radius:8px;
box-shadow:2px 2px 2px rgba(0,0,0,0.4), -2px 2px 2px rgba(0,0,0,0.4);
z-index:5;
}
#puzzle_button_size:hover #puzzle_size_selector {
display:inline-block;
}

div.puzzle_size_select_button, div.puzzle_size_active {
display:block;
width:30px;
height:24px;
line-height:24px;
margin:0px;
padding:0px;
text-align:center;
font-weight:bold;
font-size:0.9em;
border:1px solid;
border-radius:5px;
}
div.puzzle_size_select_button {
border-color:#ddd;
}
div.puzzle_size_select_button:hover, div.puzzle_size_active {
background-color:#fff;
border-color:#888;
}

#puzzle_minibild {
position:absolute;
top:0px;
right:10px;
display:block;
width:64px;
height:48px;
margin:0px;
padding:3px;
background-color:#ccc;
border:2px solid;
border-color:#888;
border-radius:5px;
z-index:5;
}

#puzzle_minibild_image {
width:64px;
height:48px;
margin:0px;
padding:0px;
}

#puzzle_minibild:hover #puzzle_minibild_popup {
display:block;
}

#puzzle_minibild_popup {
position:absolute;
top:-2px;
right:-2px;
display:none;
margin:0px;
padding:3px;
background-color:#ccc;
border:2px solid;
border-color:#888;
border-radius:5px;
box-shadow:4px 4px 4px rgba(0,0,0,0.4), -5px 4px 4px rgba(0,0,0,0.4);
z-index:10;
}

#puzzle_puzzle_area {
position:relative;
margin:10px;
margin-top:0px;
padding:0px;
background-color:#aaa;
background-image:url("../../../../puzzle/grafik/bg_puzzle_area.png");
border:2px solid;
border-top-color:#005E96;
border-left-color:#007EB6;
border-right-color:#10AEE6;
border-bottom-color:#20BEF6;
}

div.puzzle_teil, div.puzzle_teil_solved {
position:relative;
display:inline-block;
float:left;
margin:0px;
padding:0px;
background-repeat:no-repeat;
outline-width:0px;
outline-style:solid;
outline-color:transparent;
}

#puzzle_marker, #puzzle_slider {
position:absolute;
top:0px;
left:0px;
display:none;
margin:0px;
padding:0px;
overflow:hidden;
}
#puzzle_marker {
background-image:url("../../../../puzzle/grafik/bg_marker.png");
z-index:5;
cursor:pointer;
}
#puzzle_slider {
box-shadow:5px 5px 5px rgba(0,0,0,0.5), -5px 5px 5px rgba(0,0,0,0.5);
z-index:10;
}

div.puzzle_teil_nummer {
position:absolute;
top:4px;
left:4px;
display:none;
margin:0px;
padding:2px;
color:#222;
background-color:#eee;
border:1px solid;
border-color:#888;
border-radius:5px;
}

#puzzle_time_display {
position:relative;
display:inline-block;
height:18px;
margin:0px;
padding:0px;
background-color:#666;
background:-o-linear-gradient(#444,#666,#444);
background:-webkit-linear-gradient(#444,#666,#444);
background:-moz-linear-gradient(#444,#666,#444);
background:linear-gradient(#444,#666,#444);
border-radius:4px;
overflow:hidden;
}
#puzzle_time_bar {
position:absolute;
top:0px;
left:0px;
display:inline-block;
height:18px;
margin:0px;
padding:0px;
}
div.puzzle_time_bar_green, div.puzzle_time_bar_yellow, div.puzzle_time_bar_red {
margin:0px;
padding:0px;
}
div.puzzle_time_bar_green {
background-color:#0a0;
background:-o-linear-gradient(#060,#6c6,#060);
background:-webkit-linear-gradient(#060,#6c6,#060);
background:-moz-linear-gradient(#060,#6c6,#060);
background:linear-gradient(#060,#6c6,#060);
}
div.puzzle_time_bar_yellow {
background-color:#aa0;
background:-o-linear-gradient(#660,#cc6,#660);
background:-webkit-linear-gradient(#660,#cc6,#660);
background:-moz-linear-gradient(#660,#cc6,#660);
background:linear-gradient(#660,#cc6,#660);
}
div.puzzle_time_bar_red {
background-color:#a00;
background:-o-linear-gradient(#600,#c66,#600);
background:-webkit-linear-gradient(#600,#c66,#600);
background:-moz-linear-gradient(#600,#c66,#600);
background:linear-gradient(#600,#c66,#600);
}

#puzzle_crt_spacer {
display:none; /* Individuell */
height:1px;
background-color:#888;
margin:0px;
margin-top:20px;
margin-bottom:10px;
padding:0px;
border-bottom:1px solid;
border-color:#fff;
}
#puzzle_crt_button {
display:none; /* Individuell */
margin:10px;
margin-bottom:0px;
padding:10px;
padding-left:20px;
padding-right:20px;
background-color:#ddd;
background:-o-linear-gradient(#bbb,#eee,#bbb);
background:-webkit-linear-gradient(#bbb,#eee,#bbb);
background:-moz-linear-gradient(#bbb,#eee,#bbb);
background:linear-gradient(#bbb,#eee,#bbb);
border:1px solid #888;
border-radius:10px;
box-shadow:2px 2px 2px rgba(0,0,0,0.4), -2px 2px 2px rgba(0,0,0,0.4);
cursor:pointer;
}

#puzzle_pow_hinweis {
float:right;
margin:0px;
margin-top:10px;
margin-right:10px;
margin-bottom:20px;
padding:4px;
padding-left:8px;
font-size:10px;
color:#444;
background-color:#bbb;
-o-transition:background-color linear 500ms;
-webkit-transition:background-color linear 500ms;
-moz-transition:background-color linear 500ms;
transition:background-color linear 500ms;
text-shadow:1px 1px 0px #ddd;
border:1px solid #aaa;
border-radius:5px;
cursor:pointer;
}
#puzzle_pow_hinweis:hover {
background-color:#cde;
}
div.puzzle_pow_image {
display:inline-block;
float:right;
width:28px;
height:28px;
margin:0px;
margin-left:5px;
padding:0px;
background-image:url("../../../../puzzle/grafik/migano_balls_28_bw.png");
}

#puzzle_thumbnail_box {
display:inline-block;
margin:0px;
margin-top:5px;
padding:0px;
}
div.puzzle_thumbnail {
display:inline-block;
float:left;
margin:8px;
margin-top:8px;
margin-bottom:8px;
padding:0px;
border:2px solid;
border-color:#009ED6;
border-radius:10px;
overflow:hidden;
cursor:pointer;
}
div.puzzle_thumbnail:hover {
margin:8px;
margin-top:6px;
margin-bottom:10px;
border-color:#20BEF6;
box-shadow:4px 4px 4px rgba(0,0,0,0.4), -4px 4px 4px rgba(0,0,0,0.4);
}

.puzzle_wrapper {
width:100%;
height:0px;
margin:0px;
padding:0px;
clear:both;
}

#puzzle_solved_form {
margin:0px;
padding:0px;
text-align:left;
}
span.puzzle_form_feldname {
display:inline-block;
margin:0px;
margin-right:8px;
padding:0px;
width:150px;
min-width:150px;
max-width:150px;
text-align:right;
}
span.puzzle_form_wrapper {
display:block;
margin:0px;
margin-bottom:5px;
padding:0px;
clear:both;
}

input.puzzle_form_eingabe {
width:250px;
min-width:250px;
max-width:250px;
margin:0px;
padding:4px;
color:#222;
/* font-size:1.1em; */
background:transparent;
background-color:#eee;
border:2px inset;
border-color:#ccc;
border-radius:8px;
}
input.puzzle_form_eingabe:focus {
color:#222;
background:transparent;
background-color:#fff;
}

textarea.puzzle_form_textarea {
width:250px;
height:100px;
margin:0px;
padding:4px;
/* font-size:1.5em; */
color:#222;
background:transparent;
background-color:#eee;
border:2px inset;
border-color:#ccc;
border-radius:8px;
resize:none;
}
textarea.puzzle_form_textarea:focus {
color:#222;
background:transparent;
background-color:#fff;
}

fieldset.puzzle_form_fieldset {
margin:0px;
margin-top:10px;
padding:10px;
padding-top:5px;
border:2px solid;
border-color:#888;
border-radius:8px;
}
legend.puzzle_form_legend {
margin:0px;
margin-left:5px;
padding:0px;
padding-left:5px;
padding-right:5px;
color:#888;
}

div.sign_hinweis_left, div.sign_hinweis_right {
display:inline-block;
width:40px;
height:40px;
margin:0px;
margin-top:10px;
padding:0px;
}
div.sign_hinweis_left {
float:left;
margin-right:20px;
background-image:url("../../grafik/sign_left.png");
}
div.sign_hinweis_right {
float:right;
margin-left:20px;
background-image:url("../../grafik/sign_right.png");
}

span.puzzle_anleitung_text {
display:inline-block;
float:left;
height:32px;
line-height:32px;
margin-left:5px;
text-align:left;
}

div.buddy_ok {
display:inline-block;
vertical-align:top;
float:right;
width:60px;
height:90px;
margin:0px;
padding:0px;
background-image:url("../../../../puzzle/grafik/buddy_ok.png");
}