/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-radiobox.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.radioBoxImages {padding-left:2px; padding-top:4px;}
.rBox img {border:1px solid #fff; border-radius:6px; margin: 0 1px 0 0;} /*small pictures on resltage.asp do not touch*/
input.pop {position:absolute; left:-9999px;}

.radioBox {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500; background:rgba(0,0,0,0.5);} /*whole background shaded area*/
.radioBox .holder {position:absolute; width:100%; height:100%; left:0; top:-10px; z-index:50; text-align:center; display:table-cell;} /*whole background shaded area*/

.radioBox .frame {display:inline-block; margin:30px; padding:15px; background:#fff; position:relative; text-align:left; border-radius:5px; opacity:0; -webkit-transition: 0.75s;-moz-transition: 0.75s; -o-transition: 0.75s; transition: 0.75s;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {position:absolute; left:15px; top:155px; right:50%; bottom:15px; background:url(trans.gif); z-index:110;}
.radioBox .frame .clickLeft .previous {opacity:0; position:absolute; width:100px; height:40px; top:120px; left:0; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;}
.radioBox .frame .clickLeft:hover .previous {opacity:1;}

.radioBox .frame .clickRight {position:absolute; right:5px; top:155px; left:50%; bottom:15px; background:url(trans.gif); z-index:110;}
.radioBox .frame .clickRight .next {opacity:0; position:absolute; width:100px; height:40px; top:120px; right:10px; /*right:0;*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.radioBox .frame .clickRight:hover .next {opacity:1;}

.radioBox .frame .caption {position:absolute; margin-top:10px; left:0; right:0; padding:5px 15px; background:#fff; box-shadow:0 15px 10px -15px rgba(0,0,0,0.8); border-radius: 0 0 5px 5px;}
.radioBox .frame .caption h4 {font-size:18px; margin:0; padding:3px 0; color:#333;}
.radioBox .frame .caption p {font-size:12px; color:#444; margin:0; padding:3px 0; text-align:center;}
.radioBox .frame .caption h4 span {float:right; font-size:9px;}
.radioBox .large {display:inline-block; position:relative; z-index:100; border:1px solid #888; margin-right:20px;}

.radioBox .frame .close {display:block; width:48px; height:48px; position:absolute; top:-24px; right:-24px; z-index:200;}

#pop1:checked ~ .radioBox,
#pop2:checked ~ .radioBox,
#pop3:checked ~ .radioBox,
#pop4:checked ~ .radioBox,
#pop5:checked ~ .radioBox,
#pop6:checked ~ .radioBox,
#pop7:checked ~ .radioBox,
/*#pop8:checked ~ .radioBox {left:0;}*/
#pop8:checked ~ .radioBox,
#pop9:checked ~ .radioBox,
#pop10:checked ~ .radioBox,
#pop11:checked ~ .radioBox,
#pop12:checked ~ .radioBox {left:0;}

#pop1:checked ~ .radioBox .h1, 
#pop2:checked ~ .radioBox .h2, 
#pop3:checked ~ .radioBox .h3, 
#pop4:checked ~ .radioBox .h4, 
#pop5:checked ~ .radioBox .h5, 
#pop6:checked ~ .radioBox .h6, 
#pop7:checked ~ .radioBox .h7, 
/*#pop8:checked ~ .radioBox .h8 {z-index:100;}*/
#pop8:checked ~ .radioBox .h8, 
#pop9:checked ~ .radioBox .h9, 
#pop10:checked ~ .radioBox .h10, 
#pop11:checked ~ .radioBox .h11, 
#pop12:checked ~ .radioBox .h12 {z-index:100;} 

#pop1:checked ~ .radioBox .h1 .frame, 
#pop2:checked ~ .radioBox .h2 .frame, 
#pop3:checked ~ .radioBox .h3 .frame, 
#pop4:checked ~ .radioBox .h4 .frame, 
#pop5:checked ~ .radioBox .h5 .frame, 
#pop6:checked ~ .radioBox .h6 .frame, 
#pop7:checked ~ .radioBox .h7 .frame, 
/*#pop8:checked ~ .radioBox .h8 .frame {opacity:1; z-index:100;}*/
#pop8:checked ~ .radioBox .h8 .frame, 
#pop9:checked ~ .radioBox .h9 .frame, 
#pop10:checked ~ .radioBox .h10 .frame, 
#pop11:checked ~ .radioBox .h11 .frame, 
#pop12:checked ~ .radioBox .h12 .frame {opacity:1; z-index:100;}


@media only screen and (min-width:280px) and (max-width:320px) { 

.radioBox .frame {max-width:93%; width:310px; margin:60px 5px 5px 0px; padding:0; } /*defined area to hold picture and frame*/
.radioBox .frame .img_r{max-width:97%; width:310px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:60px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:60px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}

}

@media only screen and (min-width:320px) and (max-width:360px) { 

.radioBox .frame {max-width:93%; width:360px; margin:60px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:360px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/


.radioBox .frame .clickLeft {left:-10px; top:60px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:60px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}

}

@media only screen and (min-width:361px) and (max-width:420px) { 

.radioBox .frame {max-width:93%; width:400px; margin:50px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:400px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:80px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:80px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}
}

@media only screen and (min-width:420px) and (max-width:446px) { 

.radioBox .frame {max-width:93%; width:430px; margin:40px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:430px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:110px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:110px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}
}

@media only screen and (min-width:446px) and (max-width:480px) { 

.radioBox .frame {max-width:93%; width:460px; margin:50px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:460px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:110px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:110px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}
}

@media only screen and (min-width:480px) and (max-width:560px) { 

.radioBox .frame {max-width:93%; width:540px; margin:20px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:540px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:140px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:140px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}
}

@media only screen and (min-width:560px) and (max-width:640px) { 

.radioBox .frame {max-width:93%; width:620px; margin:20px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:620px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:140px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:140px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}

}

@media only screen and (min-width:640px) and (max-width:700px) { 

.radioBox .frame {max-width:93%; width:680px; margin:20px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:680px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:180px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:180px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}

}

@media only screen and (min-width:700px) and (max-width:740px) { 

.radioBox .frame {max-width:93%; width:720px; margin:20px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:720px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:220px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:220px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}

}

@media only screen and (min-width:740px) and (max-width:780px) { 

.radioBox .frame {max-width:93%; width:760px; margin:20px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:760px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:220px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:220px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}

}

@media only screen and (min-width:780px) and (max-width:900px) { 

.radioBox .frame {max-width:93%; width:760px; margin:20px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:760px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:220px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:220px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}

}

@media only screen and (min-width:900px) and (max-width:1020px) { 

.radioBox .frame {max-width:93%; width:760px; margin:20px 5px 5px 0px; padding:0; } /*defined area to hold picur and frame*/
.radioBox .frame .img_r{max-width:97%; width:760px; padding:0; margin:5px 7px 5px 5px; border-radius:6px;} /*defined area to hold picture and frame*/

.radioBox .frame .clickLeft {left:-10px; top:220px; right:50%; bottom:15px;}
.radioBox .frame .clickLeft .previous {width:100px; height:40px; top:10px; left:10px;}

.radioBox .frame .clickRight {right:-10px; top:220px; left:50%; bottom:15px;}
.radioBox .frame .clickRight .next {width:100px; height:40px; top:10px; right:10px; /*right:0;*/}


}