/*************************/
/* Custom styling */

body{
	color: #171717;
	word-spacing: 0.1em;
}
h1, h2, h3, h4 {
  font-family: Gill Sans, Gill Sans MT, "Helvetica Neue", Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	color: white;
	_color: #CCC;
	opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
	letter-spacing: 0.1em;
}
.borderEffect h1, .borderEffect h2, .borderEffect h3, .borderEffect h4, .borderEffect h5, .borderEffect h6, .borderEffect p{
	color: #333;
	opacity: 1;
  -moz-opacity: 1;
  filter:alpha(opacity=100);
}
h1, h2, h3, h4{
  text-shadow: 0px 0px 2px #000;
}
h5, h6{
	font-weight: normal;
}
.container_highlight h1, .container_highlight h2, .container_highlight h3{
	color: #ffb6b6;
	opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
}
.container_highlight h4, .container_highlight h5, .container_highlight h6{
	color: white;
	opacity: 0.4;
  -moz-opacity: 0.4;
  filter:alpha(opacity=40);
}
.container_highlight p{
	color: white;
}
a{
	color:  #ff0000;
	text-decoration: none;
	padding: 0 2px;
}
  a:hover{
  	background: #FF0000;
  	color:  white;
  }
  a.img, a .img, a:hover.img, a:hover .img{
    background:  none;
    padding: 0;
    cursor: pointer;
  }
p{
	color: #FFF;
}
table.nostyling td{
	padding: 0;
	margin: 0;
}
      
      
/*************************/
/* Background images */

body{
	background: #000 url(../images/backgroundBody.jpg) 5px 8px repeat;
}
#background, #menu{
	background: #171717 url(../images/backgroundBody.jpg) 0 0 repeat;
}
#header {
	background: #111 url(../images/backgroundHighlight.jpg) left bottom repeat;
}
#footer, .container_highlight {
	background: #2F0000 url(../images/backgroundHighlight.jpg) 0 0 repeat-x;
}

/*************************/
/* Layout (order and indent is like html layout) */

.container {
  width: 950px;
  margin: 0 auto;
  padding-top:  20px;
}
  .container .connected{ padding-top: 0; }
.container_highlight{
	width: 100%;
}
.container_wide{
	width: 100%;
}
  .dividerTop{
    position: relative;
    top:  -5px;
    height: 5px;
    width: 100%;
  	_background: url(../images/dividerLine.gif) 0 0 repeat-x;
  	_top: 0;
  }
  .dividerBottom{
    position: relative;
    bottom:  -5px;
    height: 5px;
    width: 100%;
  	_background: url(../images/dividerLine.gif) 0 0 repeat-x;
  	_bottom: -15px;
  }
  .dividerLine{
	  width: 100%;
    height: 2px;
  	background: url(../images/dividerLine.gif) 0 0 repeat-x;
  }
  .dividerLine_highlight{
    width: 100%;
    height: 2px;
  	background: url(../images/dividerLine_highlight.png) 0 0 repeat-x;
  	_background-image: url(../images/dividerLine_highlight.gif); 
  }
  .shade{
    width: 100%;
    height: 100%;
  	background: url(../images/shade_top_dark.png) left top repeat-x;
  	_background-position: left -250px;
  }


#logo{
  width: 635px;
	padding-left: 120px;
	margin: 0 auto 15px auto;
}
#tweet{
  position: absolute;
  right:  20px;
  top: 622px;
  _top: 657px;
  display: block;
	background: url(../images/tweet.png) left top no-repeat;
	height: 55px;
	width: 172px;
	z-index: 1000;
}
  #tweet:hover{
  	background-position: left -56px;
  }

#top{
  height: 650px;
}
  #iphone_wrapper{
    position: relative;
    top: -35px;
    _padding-top: 35px;
  	height: 516px;
  	width: 100%;
  	overflow: hidden;
  	z-index: 100;
  }
    #iphone{
      height: 318px;
      width: 517px;
      margin: 35px auto 0 auto;
    	background: url(../images/iPhone.png) no-repeat;
    }
      #iphone img{
    	  margin: 23px 0 0 98px;
      }
    #hand_left, #hand_right{
      position: absolute;
      height: 100%;
      width: 100%;
    	background: url(../images/hand_left.png) left top no-repeat;
    	_background: none;
    }
      #hand_left{
        top: 2px;
        left: -374px;
    	  background-position: 50% top;
      } 
      #hand_right{
        top: 2px;
        right: -374px;
    	  background: url(../images/hand_right.png) 50% top no-repeat;
      	_background: none;
      }
      
      
    #call_to_action{
      position: relative;
      top: -50px;
      width: 450px;
      margin: 0 auto;
      padding-top: 35px;
      background: url(../images/pointer.png) left top no-repeat;
    }
      #subscribe{
      	position: relative;
      	left: 45px;
      	height: 80px;
      }
        #subscribe h4{
        	margin-bottom: 5px;
        }
        #subscribe #input_background{
          width: 310px;
          height: 31px;
        	background: url(../images/input.png) left top no-repeat;
        	overflow: hidden;
        }
        #subscribe #input_background.focus{
        	background-position: left -31px;
        }
          #subscribe input{
          	width: 312px;
            padding: 9px 9px;
          	margin: -2px 0 0 -2px;
          	border: 0;
          	background: none;
          	font-size: 120%;
          	font-weight: normal;
          	color: #666;
          }
            #subscribe input:focus{
            	border: 0;
            	background: none;
            }
        #subscribe button{
          position: absolute;
          top: -2px;
          left:  285px;
          width: 80px;
          height: 80px;
        	background: url(../images/buttonGo.png) left top no-repeat;
        	border: none;
        	cursor: pointer;
        }
        #subscribe button:hover{
        	background: url(../images/buttonGo.png) left -80px no-repeat;
        }
  #tagline{
  	position: relative;
  	top: -45px;
  	width: 800px;
  	margin: 0 auto;
  	margin-bottom: 40px;
  	padding-top: 25px;
  	background: url(../images/pointer_long.png) 50px 0 no-repeat;
  }
    #tagline #logo_xy7{
    	float: left;
    	margin-top: -5px;
    	margin-right: 20px;
    	margin-bottom: 30px;
    	margin-left: 10px;
    }
    #tagline h3{
    	opacity: 0.8;
      -moz-opacity: 0.8;
      filter:alpha(opacity=80);
    }
    #logo_appstore{
    	float: right;
    	margin-top: -20px;
    	margin-left: 20px;
    }
      
  
#enemies{
  position: relative;
	height: 400px;
	overflow: hidden;
}
  #enemies_background{
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background: url(../images/Background_info.jpg) 53% top no-repeat;
  }
  #enemies .dividerLine_highlight{
  	position: absolute;
  	top: 203px;
  }
  #thumbnails{
    position: relative;
    left: 37px;
    margin-bottom: -95px;
  }
    #vs{
    	position: relative;
    	top: -200px;
    	padding: 0 7px;
    }
    a.thumbnail{
      position: relative;
    	opacity: 0.8;
      -moz-opacity: 0.8;
      padding: 0;
      margin: 0;
      background: none;
    }
      a.thumbnail:hover{
      	opacity: 1;
        -moz-opacity: 1;
        color: white;
        background: none;
      }
      a.thumbnail:hover img{
        background: none;
      }
      a.thumbnail span{
      	position: absolute;
      	left: 8px;
      	top: -120px;
      }
  #information_bottom{
    position: relative;
    left: 37px;
  }
    #information_bottom a{
    	background: none;
    	color:  #ff6d6d;
    }
      #information_bottom a:hover{
      	background: #000;
      	color: #670000;
      }
    #information_bottom p{
    	color: #ff0000;
    	letter-spacing: 0.1em;
    	margin-top: 0px;
      text-align: center;
      width: 850px;
    }
    #information_bottom p.copyright{
	      margin-top: 5px;
    	  margin-bottom: 5px;
    	font-size: 90%;
    }
    #information_bottom p.heritage{
	      margin-top: 5px;
	      margin-bottom: 5px;
    	font-size: 90%;
    }

/*****************************/
/* miscalleaneous */
.showgrid {
  background:url(../images/grid.png);
}
.justify{
	text-align: justify;
}
.small{
	margin: 0;
	font-size: 80%;
}
.quiet{
	color: #888;
}
.invisible{
	opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);
  display: block;
}
.dimm{
	opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
}
input.extraExtraSmallInput{
	width: 20px;
}
input.extraSmallInput{
	width: 50px;
}
input.smallInput{
	width: 100px;
}
input.mediumInput{
	width: 150px;
}
input.largeInput{
	width: 200px;
}
input.extraLargeInput{
	width: 300px;
}
input.extraExtraLargeInput{
	width: 400px;
}
input.fullWidth{
	width: 100%;
}

.simpleImageBorder{
	position: relative;
	padding: 1px 1px 0 1px;
	border: 1px solid #EFEFEF;
}
  .simpleImageBorder img{
    margin-bottom: -4px;
  }
.top_index{
	z-index: 100000;
}
.hs {
	width: 320px;
	text-align:center;
	font-family: "Gill Sans","Gill Sans MT","Helvetica Neue",Arial,Helvetica,sans-serif;
	font-size: 12px;
	color: #FFF;
}

.hs_pos {
	padding: 0;
	font-size: 14px;
	text-align: center;
	width: 33%;
}

.hs_play {
	padding: 0;
	font-size: 14px;
	text-align: center;
	width: 33%;
}

.hs_score {
	padding: 0;
 	font-size: 14px;
	text-align: center;
	width: 33%;
}

.hs td {
	font-size: 12px;
	width: 33%;
	padding: 0;
}

.hstr1 {
	background-color: none;
}

.hstr2 {
	background-color: #BB0000;
	color: black;
}

.hsleft {
	text-align: center;
}

.hsright {
	text-align: center;
}

.hscenter {
	text-align: center;
}

#highscore{
	position: relative;
	width: 320px;
	margin-left:auto; margin-right:auto;
	padding-bottom: 30px;
	line-height: 135%;
}

.fblike {
	position: absolute;
	top: 2px;
	left: 8px;
}