/*	---------------------------------------------------------------------------------------
	Rock.cz
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	Description:		Styles for checkboxes and radios
	Media:				screen, projection, handheld
	-------------------------------------------------------------------------------------*/
	
/* Width and height of the _whole_ image that is used for all 3 states */
span.fb_holder { width: 169px; height: 272px; margin-left: -4px; }
span.quiz_holder { width: 24px; height: 48px; }

/* width and height is the widt of your FancyBox. With margin-right you can set the space between the label text and the box
 * with margin-top you can adjust the vertical position of your box */
span.fb_holderWrap { width: 169px; height: 136px; margin: 0; }
span.quiz_holderWrap { width: 24px; height: 24px; cursor: pointer; }

/* specify your background-images */
label.fb_checkbox span.fb_holder { background: url('../img/box-1.png') 0 0 no-repeat; }
label.fb_radio span.fb_holder { background: url('../images/radio-band.gif') 0 0 no-repeat; }
label.user span.fb_holder { background-image: url('../images/radio-user.gif'); }
label.club span.fb_holder { background-image: url('../images/radio-club.gif'); }
label.specialist span.fb_holder { background-image: url('../images/radio-specialist.gif'); }

label.quiz_radio span.quiz_holder { background: url('../images/checkbox.gif') 0 0 no-repeat; }

/* Space between two label-lines */
label.fb_box { overflow: hidden; position: relative; float: left; display: inline; /*width: 169px;*/ width: 160px; text-align: center; text-transform: uppercase; background: url('../images/dotted-v.gif') 159px 0 repeat-y; cursor: pointer; }
label.last { background: none; }

/*.user { margin-left: 68px; }*/
label.specialist { width: 140px; }

.fb_box .headline { position: relative; left: 50%; top: 8px; z-index: 999; float: left; display: block; /*width: 130px;*/ height: 28px; margin-bottom: -30px; line-height: 28px; text-transform: uppercase; font-size: 90%; }
.fb_box .headline strong, .fb_box .headline em { display: block; } 
.fb_box .headline strong { position: relative; left: -50%; padding-bottom: 6px; font-style: normal; background: url('../images/registration.gif') 50% 100% no-repeat; }
label.fb_checked .headline strong { background-image: url('../images/registration-checked.gif'); }
.fb_box .headline em { position: relative; height: 28px; line-height: 28px; overflow: hidden; padding: 0 16px; font-style: normal; color: #fff; background: #00d1cd; }
label.fb_checked .headline em { background: #f00; }

.user .headline { margin-left: -10px; }
.band .headline { margin-left: -3px; }
.club .headline { margin-left: -6px; }

/* checked-state, if you use a bigger or smaller image you need to adjust the background-position accordingly */
label.fb_checked span.fb_holder, label.fb_checked span.fb_holder { top: -136px !important; }
label.quiz_checked span.quiz_holder { top: -24px !important; }

/* hover-state 
label.fb_checkbox.fb_hover span.fb_holder, label.fb_radio.fb_hover span.fb_holder { top: -106px; }*/

/* focus-state */
label.fb_focus { /*background-color: #efefef;*/ }

/* ----- YOU DON'T NEED TO EDIT THE VALUES UNDERNEATH ----- */
label.fb_inline { float: left; margin: 0 10px 0 0; }
input.fb_hidden, input.quiz_hidden { position: absolute; left: -10000px; }
label.fb_box span.fb_holder { position: absolute; }

label.fb_box span.fb_holderWrap, label.quiz_box span.quiz_holderWrap { position: relative; overflow: hidden; display: block; margin: 3px auto 0; }
label.specialist span.fb_holderWrap { margin-left: -15px; }
label.quiz_box span.quiz_holderWrap { float: left; display: inline; margin: -2px 10px 0 0; }
label.fb_box span.fb_holder, label.quiz_box span.quiz_holder { position: absolute; left: 0; top: 0; }