/*------------------------------------*\
  RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE:WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
  display:block;
}
body{
  line-height:1;
}
ol,ul{
  list-style:none;
}
blockquote,q{
  quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
  content:'';
  content:none;
}
/* remember to define visible focus styles!
:focus{
  outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
  text-decoration:none;
}
del{
  text-decoration:line-through;
}

table{
  border-collapse:collapse;
  border-spacing:0;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/*------------------------------------*\
  MAIN
\*------------------------------------*/
/* GO! */
body {background:#181818; font: 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;}

#container{max-width:98%; margin:0 auto; background:#fff; min-width:400px}

header{text-align:left; position:relative; background:#f06 url('../images/header.png') no-repeat center 9px;}
header .logo{margin-top:10px; margin-left:10px}
header .join{float:right; margin:10px 0px 0 0;}
header .mob_join{display:none}
header .members{position: absolute;
right: 5px;
top: 0;
background: #fff;
padding: 0 5px;
color: #f06;
text-decoration: none;}
header ul { background: #1b1b1b; margin: 1px 14px 0 14px; letter-spacing:-4px; text-align:left }
header ul li { display: inline-block; zoom: 1; *display: inline; }
header ul li a { background: #222; text-transform: uppercase; font-size: 110%; color: #fff; display: inline-block; zoom: 1; *display: inline; padding: 10px 25px; text-decoration: none; letter-spacing: normal; margin: 0 1px 0 0; font-family: "Arial Black", Gadget, sans-serif; }
header ul li.join { display:inline; float:right; position: relative; }
header ul li.join a { background: #000; margin:0; border-left: 1px solid #1b1b1b; }
header ul li a:hover,#head ul li.active a { background: #fff; color: #f06; }
header ul li.join a:hover { background: #fff; color:#f06 }

.bigmainpoint {font: bold 40px/60px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; margin:10px 0}
.mainpoint {font: bold 24px/36px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; margin:10px 0; padding:5px}
.joinmainpoint {font: bold 24px/36px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; margin:0; padding:5px}
footer a, .bigmainpoint a, .mainpoint a {color:#f06; padding:0 10px; text-decoration:none}
.joinmainpoint, .bigmainpoint a:hover, .mainpoint a:hover {background:#f06; color:#fff}

.smallpoint {font: bold 16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; margin: 10px auto;
max-width: 50%;}
ul.nav li{display: inline}
ul.thumbs { text-align: center; }
ul.thumbs li { display: inline-block; zoom: 1; *display: inline; background-position: 1px 1px; background-repeat: no-repeat; margin: 5px; position: relative; }
ul.thumbs li a.thumb { display: inline-block; zoom: 1; *display: inline; border: 1px solid #fff; width: 378px; height: 305px; background-repeat: no-repeat; background-position: 0px 300px;  -moz-transition: background-position 0.1s ease-out;-webkit-transition: background-position 0.1s ease-out; position: relative; behavior: url(iepngfix.htc);  }
ul.thumbs li a.thumb:hover { background-position: 0px 0px; cursor: pointer; border-color: #000; }
ul.thumbs li a .small_logo { position: absolute; bottom:-14px; left:-5px; behavior: url(iepngfix.htc); z-index:5 }
ul.thumbs li a.thumb span {position: absolute;width: 273px;left: 0;bottom: 0;background-color: rgba(0, 0, 0, .75);color: #fff;padding-left: 100px;padding-right: 5px;}


.joinpage {margin: 0 auto; max-width: 1280px;}
.joinflash{width: 520px; margin-top: 20px; margin-right:10px;text-align: left; position: relative; float:left}
.joinflash .spinner{background: url('../images/loading.gif') no-repeat scroll center center transparent; height: 400px; left: 0px; position: absolute; text-indent: -9999px; top: 0px; width: 520px;}
.joinflash .player {border: 1px solid #181818; border-bottom: 0;width:520px; height:400px}
.joinflash .player_control {border: 1px solid #181818; border-top: 0; margin:-5px 0 0 0; width:520px; height:33px}

#form { width: 354px; margin: 20px 10px; float: left; background: #fff; border: 1px #181818 solid; padding: 10px 2px; }
#form #formstuff { width: 360px; text-align: center; }
#form #formstuff h5 { margin: 0 auto 10px auto;display: block;font-size: 18px;font-weight: bold; }
#form #formstuff span.errormessage { font-size: 12px; color: red; font-weight: bold; width: 270px; margin: 0 auto 10px auto; display: block;  }
#form #formstuff p { margin-bottom: 6px; }
#form #formstuff span { font-size: 10px; color: #858585; margin-left: 70px; }
#form #formstuff fieldset { width: 315px; border: 0; line-height: 29px; margin: 0 auto; }
#form #formstuff label.name { width: 92px; font-size: 16px; font-weight: bold; float: left; text-align: left; }
#form #formstuff label.joinopts { background: #ff0066; width: 315px; height: 30px; font-size: 18px; font-weight: bold; display: block; text-align: left; padding-top: 8px; margin: 0 auto 9px auto; }
#form #formstuff input.formfield { width: 218px; height: 23px; border: 1px #30417e solid; *width: 200px; }
#form #formstuff input.radio { margin-left: 25px; }
#form #formstuff input.submit {cursor: pointer; background: #ff0066; width: 300px; height: 41px; border: 1px #181818 solid; margin: 10px auto; font-size: 24px; text-align: center; font-weight: bold; color: #fff; letter-spacing: -1px;} 
#form #formstuff input.submit:hover {background: #181818; border: 1px #f06 solid} 
#form #formstuff span.type { display: block; margin: 10px auto; font-size: 11px; color: #858585; font-weight: bold; }
#form #formstuff h3 {text-align: center;font-size: 34px;line-height: 36px;width: 280px;text-transform: uppercase;margin: 5px auto 15px auto;}
#form #formstuff h3 strong{color:#f06}
#popup{background: url('../images/player-popup.jpg') no-repeat scroll center center transparent; height: 300px; left: 60px; position: absolute; top: 50px; width: 400px; display: none;
border-radius: 5px;
-webkit-box-shadow: 0 1px 5px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 5px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 5px 3px rgba(0,0,0,0.5);}
.thumbblock{float:left; width:360px; margin:20px 5px}
ul.joinpage_thumbs li { display: inline-block; zoom: 1; *display: inline; margin: 0 5px 5px 5px;}
ul.joinpage_thumbs li img{border: 1px #181818 solid; width:100px}


footer {margin:40px auto 0; max-width:1000px; text-align:center}
footer p {margin:5px; color: #333}
footer a{color:#f06}

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1366px) {
.thumbblock{display:none}
#form { display:inline-block; float: none; vertical-align: top; }
.joinpage{text-align:center}
.joinflash{ float:none; display:inline-block}}
/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {
.joinmainpoint {font: bold 20px/30px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; margin:0; padding:5px}
}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {
.joinpage{text-align:center}
.joinflash{width: 390px; margin-top: 20px; margin-right:10px;text-align: left; position: relative; float:none; display:inline-block}
.joinflash .spinner{background: url('../images/loading.gif') no-repeat scroll center center transparent; height: 300px; left: 0px; position: absolute; text-indent: -9999px; top: 0px; width: 390px;}
.joinflash .player {border: 1px solid #181818; border-bottom: 0; width:390px; height:300px}
.joinflash .player_control {border: 1px solid #181818; border-top: 0; margin:-5px 0 0 0; width:390px; height:25px}
#popup{background: url('../images/player-popup-sm.jpg') no-repeat scroll center center transparent; height: 263px; left: 20px; position: absolute; top:17px; width: 350px; display: none;
border-radius: 5px;
-webkit-box-shadow: 0 1px 5px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 5px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 5px 3px rgba(0,0,0,0.5);}
#form { display:inline-block; float: none }
header{background:#f06 url('../images/header_ipad.png') no-repeat center 9px;}
.smallpoint {max-width: 90%;}
#form #formstuff h3 {font-size: 16px;line-height: 20px;margin: 5px auto 5px auto;}
}

@media only screen and (max-width : 960px) {
.joinflash{display:none}
.thumbblock{display:block; float: none; display: inline-block}
}



/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {
header{background:#f06}
header{text-align:center}
header .logo{margin-left:0px; max-width: 50%;
    height: auto;
    width: auto\9;}
header .join{display:none}
header .mob_join{ display:block; background: #181818;padding: 5px 0px; width:100%; }
header .mob_join img{ max-width: 100%;
    height: auto;
    width: auto\9;  }
	.bigmainpoint {font: bold 30px/45px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align:center; margin:7px 0}

}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {
#container{max-width:100%;}
}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}