/*
 * jqPuzzle - Sliding Puzzles with jQuery
 * Default CSS theme
 * 
 * Copyright (c) 2008 Ralf Stoltze, http://www.2meter3.de/jqPuzzle/
 * Dual-licensed under the MIT and GPL licenses.
 *
 * Note that some CSS properties are set by the jqPuzzle script itself to make 
 * sure that the puzzle works properly. These properties will overwrite 
 * user-defined properties.
 * 
 * The class 'jqp-solved' is added to the outermost element when a puzzle is 
 * solved by the user. Use '.jqPuzzle.jqp-solved' to define different styles
 * for solved puzzles.
 */

/* outermost element which holds the full puzzle interface */
.jqPuzzle {
    background: url('/typo3conf/ext/jquery_puzzle/images/hintergrund.jpg') no-repeat bottom right;
    width: 100%;

}


.jqPuzzle .infopuzzle{
    position: absolute;
	left: 455px;
	top: 100px; 
    font-weight: bold;   
}



/* only needed if external css rules set defaults for divs,
   this rule only resets the most common properties */
.jqPuzzle div {
	background-color: transparent;
	margin: 0px;
	padding: 0px;
	border-style: none;
}

/* div wrapper which holds the puzzle pieces and the solution image */
.jqPuzzle .jqp-wrapper {
	padding: 2px;
	border: 1px solid #FFFFFF;
	background-color: #ECAB27;
}

/* a single puzzle piece */
.jqPuzzle .jqp-piece {
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	font-size: 36px;
}

.jqPuzzle .jqp-piece:hover {
	border-style: dashed;
}

.jqPuzzle.jqp-solved .jqp-piece:hover {
	border-style: solid;
}

/* the controls area which holds the buttons and the display */
.jqPuzzle .jqp-controls {
	float: left;
}

/* a button */
.jqPuzzle .jqp-controls a {
	margin-top: 10px;
	margin-right: 8px;
	color: #EEB33C;
	font-size: 18px;
	line-height: normal;
	display: block;
	position: absolute;
	left: 485px;
	top: -285px;
	text-decoration: none;
	font-weight: bold;
}

.jqPuzzle .jqp-controls a:hover {
	text-decoration: underline;    
}

/* toggle/down state for buttons */
.jqPuzzle .jqp-controls a.jqp-toggle, 
.jqPuzzle .jqp-controls a.jqp-down {

}

/* disabled state for buttons */
.jqPuzzle .jqp-controls a.jqp-disabled {
	background-color: #DDDDEE;
	color: #FFFFFF;
}

/* the area which holds the moves/seconds display */
.jqPuzzle .jqp-controls span {
	margin-top: 5px;
	padding: 2px 4px;
	padding-left: 0px;
	border: none;
	background-color: transparent;
	color: #666666;
	font-size: 14px;
	position: absolute;
	left: 485px;
	top: -365px;
	width: 115px;
}

/* disabled state for the display (non-shuffled puzzle) */
.jqPuzzle .jqp-controls span.jqp-disabled {
	color: #AAAAAA;
}

/* solved state for the display (non-shuffled puzzle) */
.jqPuzzle.jqp-solved .jqp-controls span {
	padding: 1px 3px;
	border: 1px dotted #0F8F08;
	background-color: #9FEF86;
	color: #0F8F08;
}

/* a text field for the moves/seconds display */
.jqPuzzle .jqp-controls span input {
	margin: 3px 3px;
	padding: 3px;
	padding-bottom: 2px;
	border-style: none;
	background-color: #FFFFFF;
	color: #666666;
	font-weight: bold;
	text-align: right;
}

/* disabled state for the text fields */
.jqPuzzle .jqp-controls span.jqp-disabled input {
	background-color: #EEEEFF;
	color: #AAAAAA;
}

/* solved state for the text fields */
.jqPuzzle.jqp-solved .jqp-controls span input {
	background-color: #C2FFAF;
	color: #444444;
}


 .jqPuzzle .startbutton {
    
    display: block;
    width: 200px;
    height: 100px;
} 




/* ++++++++++++++++++++++++++++++++++++++++++++ REGISTERFORM ++++++++++++++++++++++++++++ */

.tx-jquerypuzzle-pi1 * {
    margin: 0px;
    padding: 0px;    
}


.tx-jquerypuzzle-pi1 h2 {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0px 10px 0px;    
}


.tx-jquerypuzzle-pi1 h3 {
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0px 5px 0px;
}


.tx-jquerypuzzle-pi1 .formcontent{
    width: 595px;
    float: left;
    overflow: hidden;
}


.tx-jquerypuzzle-pi1 .formrow {
    width: 100%;
    overflow: hidden;
    margin: 5px 0px 5px 0px;
    position: relative;
}

.tx-jquerypuzzle-pi1 .formrow .formrow{
    width: 100%;
    clear: both;
    float: left;
    margin: 5px 0px 5px 30px;
    display: block;
}


.tx-jquerypuzzle-pi1 .formfield {margin-bottom: 5px;}


.tx-jquerypuzzle-pi1 .formrow label {
    width: 230px;
    float: left;
    display: block;
}

.tx-jquerypuzzle-pi1 .formrow label.short {
    width: 150px;
    float: left;
    display: block;
}


.tx-jquerypuzzle-pi1 .formrow label.middle {
    width: 180px;
    float: left;
    display: block;
}

.tx-jquerypuzzle-pi1 .w300 {width: 300px !important;}

.tx-jquerypuzzle-pi1 .text_long {
    width: 200px;
    height: 16px;
    border: 1px solid #999;
    padding: 3px;
    float: left;
    margin-right: 3px;    
}


.tx-jquerypuzzle-pi1 .text_middle {
    width: 150px;
    height: 16px;
    border: 1px solid #999;
    padding: 3px;
}


.tx-jquerypuzzle-pi1 .text_short {
    width: 100px;
    height: 16px;
    border: 1px solid #999;
    padding: 3px;
}

.tx-jquerypuzzle-pi1 .select_long {
    width: 208px;
    border: 1px solid #999;
    padding: 3px;    
    float: left;
    margin-right: 3px;    
}

.tx-jquerypuzzle-pi1 .radiowrapper {
    width: 100%;
    margin: 5px 0px 5px 0px;         
    float: left;
}

#sozialrabatt .radiowrapper {
  margin-left: 15px;
}

.tx-jquerypuzzle-pi1 .formfield .formfield .radiowrapper {
    margin-left: 30px;
}

* html .tx-jquerypuzzle-pi1 .formfield .formfield .radiowrapper {
    margin-left: 10px;
}

* html #gebundene_gts {
  margin-left: 27px;
}


.tx-jquerypuzzle-pi1 .radiowrapper input{
    margin-right: 10px;
}


.tx-felogin-pi1 {margin-bottom: 30px; width: 300px; float: right;}

.tx-felogin-pi1 label {
	display:block;
	float:left;
	margin-right:5px;
	text-align:right;
	width:110px;
}

.tx-felogin-pi1 div {
	float:right;
	margin-bottom:5px;
	margin-right:20px;
	text-align:right;
	width:269px;
	position: relative;
}

.tx-felogin-pi1 .sendbutton,
.tx-jquerypuzzle-pi1 .sendbutton {
    padding: 3px;
    border: 1px solid #174B89;
    background: #F8921F;
    color: #fff;
    font-weight: bold; 
}

.tx-jquerypuzzle-pi1 .clear_left {clear: left;}
.tx-jquerypuzzle-pi1 .float_left {float: left !important;}

.tx-jquerypuzzle-pi1 .bgcolor1 {
    background-color: #D1D7DF;
    padding: 5px;
    margin-bottom: 10px;
    width: 550px;
    clear: both;
}


.tx-jquerypuzzle-pi1 .error,
.tx-jquerypuzzle-pi1 .error_1,
.tx-jquerypuzzle-pi1 .error_2 {
    position: absolute;
    top: 0px; 
    right: -80px;
    width: 180px;
    padding: 3px;
    color: red;
    background: #fff;
    font-size: 11px;
    font-style: italic;
    z-index: 999;
}


.tx-jquerypuzzle-pi1 .formrow .question .error {
    right: -160px;    
}

.tx-jquerypuzzle-pi1 .error_1 {
    width: auto;
    left: 450px;    
}

.tx-jquerypuzzle-pi1 .error_2 {
    left: 450px;
    width: 130px;    
}


.tx-jquerypuzzle-pi1 .errormessage {
    color: red;
    margin-bottom: 20px;
}

.tx-jquerypuzzle-pi1 .successmessage {
    color: green;
    margin-bottom: 20px;
}


.tx-jquerypuzzle-pi1 img {cursor: pointer;}

/* tooltip styling */ 
.tx-jquerypuzzle-pi1 .tooltip { 
    display: none;
    min-height: 60px;
    height: auto !important;  
    height: 60px;
    border: 1px solid #555;
    padding: 10px 15px 10px 30px; 
    width: 270px; 
    font-size: 11px; 
    color: #000; 
    background: #fff url('../images/i_gross.gif') 5px 10px no-repeat;
    line-height: 15px;    
} 
 
/* a .label element inside tooltip */ 
.tx-jquerypuzzle-pi1 .tooltip .label { 
    color:yellow; 
    width:35px; 
} 
 
.tx-jquerypuzzle-pi1 .tooltip a { 
    color:#ad4; 
    font-size:11px; 
    font-weight:bold; 
}


.tx-jquerypuzzle-pi1 .userlogininfo {
    border: 2px solid #000; 
    padding: 5px; 
    background: #EC8711;
    font-size: 14px;
}

.tx-jquerypuzzle-pi1 p {margin-bottom: 20px;}


.tx-jquerypuzzle-pi1 span.red_star {color: red;}

.tx-jquerypuzzle-pi1 .highscore tr {padding: 0px; margin: 0px;}

.tx-jquerypuzzle-pi1 .highscore th {font-size: 14px;}

.tx-jquerypuzzle-pi1 .highscore td, 
.tx-jquerypuzzle-pi1 .highscore th {padding: 3px;}

.tx-jquerypuzzle-pi1 .highscore .odd {background: #E6E6E6;}

.tx-jquerypuzzle-pi1 tr#current_user {background: #EFAA59; font-weight: bold;}

.tx-jquerypuzzle-pi1 .pagination,
.tx-jquerypuzzle-pi1 .playtime {margin-top: 20px;}

.tx-jquerypuzzle-pi1 .register {margin-top: 20px;}      



span.username {font-weight: bold;}

.tx-felogin-pi1 div input {
	padding: 2px; 
    border: 1px solid #000; 
    background: #EFAA59; 
    color: #666; 
    font-weight: bold;
}

.tx-felogin-pi1 div input#user, .tx-felogin-pi1 div input#pass {
	background-color: #fff;
	padding: 1px;
	font-weight: normal;
	width: 150px;
	float: left;
}

div#puzzle {
	clear: both;
}

.tx-jquerypuzzle-pi1  {
	padding-top: 40px;
}

body#page_66 div.tx-felogin-pi1, body#page_64 div.tx-felogin-pi1 {
	text-align: right;
}