/* 2014-05-26a_jtrpro_test.css */
/* Notes */




#header {
  margin: 0 auto;
  width: 720px;
}

#header_wrapper { position: fixed; 
//border-style: solid;
//border-top: 1px solid #ff0000;
 
 padding-top: 2px;
 
//width: 100%;
height:6em;
top: 0px ;
right: 0px;
//bottom: 10px;
left: 0px;
 background: #0FF0F0;
 z-index: 9999;
text-align: center;
// background-attachment: scroll;
 
}

#logo-text { position: relative; 
//border:1px solid red;
width: auto;
//height:3em;
//height:auto;
top: 0px;
right: 0px auto;
//bottom: 10px;
left: 0px auto; 
//margin-left:auto;
//margin-right:auto;
background-color:##0FF0F0;
font-size: 3em;
font-family: "Arial Black", Gadget, sans-serif;
font-weight:bold;
//font-weight:900;
// font-size: 25px;
  margin-left: 5px;
  padding-top: 0px;
// line-height: 25px;
color: black;
//align: center;
//text-align: center;
 }


.header_button { position: relative;
display:inline;
//border-style: solid;
//border-color: #FFFFFF;
background-color: #FFFFFF;
padding: 2px 8px;
//width: 100%;
width: 300px;
height: 1em;
top: 1em;
//right: 10px auto;
//bottom: 0px;
//left: 10px auto;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 1em;
//text-align: center; }



.header_button:hover {
  
border: 2px solid #0000FF;
  
padding: 2px 8px;
 
color: #0000FF; 
font-weight: bold;
background-color : #33FF33;
//none repeat scroll 0% 50%;

}






#box_1 {
background: #FF3333 none repeat scroll 0% 50%;
position: absolute ;
top: 200px;
// right: 10px;
//bottom: 10px;
left: 25px;
width: 50px;
height: 50px;
border-style: solid;
font-weight: bold;
font-size: 1em;
color: black;
}

#box_2 {
background: yellow none repeat scroll 0% 50%;
width: 50px;
height: 50px;
border-style: solid;
position: absolute ;
top: 225px;
// right: 10px;
//bottom: 10px;
left: 50px;
font-weight: bold;
font-size: 1em;
color: black;
}

#box_3 {
border-style: solid;
width: 50px;
height: 50px;
position: absolute ;
top: 250px;
// right: 10px;
//bottom: 10px;
left: 75px;
background-color: #3333ff;
}

#box_4 {
border-style: solid;
width: 50px;
height: 50px;
position: absolute ;
top: 275px;
// right: 10px;
//bottom: 10px;
left: 100px;
background-color: #33FF33;
}


#box_5 {
border-style: solid;
width: 50px;
height: 50px;
position: absolute ;
top: 300px;
// right: 10px;
//bottom: 10px;
left: 125px;
background-color: #FFFFFF;
}
#box_6 {
//border-style: solid;
width: 50px;
height: 50px;
position: absolute ;
top: 325px;
// right: 10px;
//bottom: 10px;
left: 150px;
background-color: #FFFFFF;
visibility:hidden;

}



#box_b { position: fixed; 
//border-style: solid;
width: 100%;
height: 2em;
//top: 40px;
right: 0px auto; 
bottom: 0px;
left:0px auto; 
background: #FFFFFF;
}

#footer_text {
 position: relative
width: 100%;
height: 1em;
text-align: center;
bottom: 10px;
}

 ///////////////////////////////////////////////

@media only screen and (max-width: 640px),
 only screen and (max-device-width: 640px) {
   /* CSS overrides for mobile here */




#header {
  margin: 0 auto;
  width: 720px;
}

#header_wrapper { position: fixed; 
//border-style: solid;
//border-top: 1px solid #ff0000;
 
 padding-top: 2px;
 
//width: 100%;
height:8em;
top: 0px;
right: 0px;
//bottom: 10px;
left: 0px;
 background: #0FF0F0;
 z-index: 9999;
text-align: center;
// background-attachment: scroll;
 
}

#logo-text { position: relative; 
//border:1px solid red;
width: auto;
//height:3em;
//height:auto;
top: 0px;
right: 0px auto;
//bottom: 10px;
left: 0px auto; 
//margin-left:auto;
//margin-right:auto;
background-color:##0FF0F0;
font-size: 6em;

font-family: "Arial Black", Gadget, sans-serif;
 
font-weight:bold;
//font-weight:900;

// font-size: 25px;
  margin-left: 5px;
  padding-top: 0px;
 
// line-height: 25px;
color: black;
//align: center;
//text-align: center;
 }


.header_button { position: relative;
display:inline;
//border-style: solid;
//border-color: #FFFFFF;
background-color: #FFFFFF;
padding: 2px 8px;
//width: 100%;
width: 300px;
height: 1em;
top: 1em;
//right: 10px auto;
//bottom: 0px;
//left: 10px auto;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 3em;
//text-align: center; }






.header_button:hover {
  
border: 2px solid #0000FF;
  
padding: 2px 8px;
 
color: #0000FF; 
font-weight: bold;
background-color : #33FF33;
//none repeat scroll 0% 50%;

}



#box_1 {
background: #FF3333 none repeat scroll 0% 50%;
position: absolute ;
top: 200px;
// right: 10px;
//bottom: 10px;
left: 25px;
width: 50px;
height: 50px;
border-style: solid;
font-weight: bold;
font-size: 1em;
color: black;
}

#box_2 {
background: yellow none repeat scroll 0% 50%;
width: 50px;
height: 50px;
border-style: solid;
position: absolute ;
top: 225px;
// right: 10px;
//bottom: 10px;
left: 50px;
font-weight: bold;
font-size: 1em;
color: black;
}

#box_3 {
border-style: solid;
width: 50px;
height: 50px;
position: absolute ;
top: 250px;
// right: 10px;
//bottom: 10px;
left: 75px;
background-color: #3333ff;
}

#box_4 {
border-style: solid;
width: 50px;
height: 50px;
position: absolute ;
top: 275px;
// right: 10px;
//bottom: 10px;
left: 100px;
background-color: #33FF33;
}


#box_5 {
border-style: solid;
width: 50px;
height: 50px;
position: absolute ;
top: 300px;
// right: 10px;
//bottom: 10px;
left: 125px;
background-color: #FFFFFF;
}
#box_6 {
//border-style: solid;
width: 50px;
height: 50px;
position: absolute ;
top: 325px;
// right: 10px;
//bottom: 10px;
left: 150px;
background-color: #FFFFFF;
visibility:hidden;
}



#box_b { position: fixed; 
//border-style: solid;
width: 100%;
height: 2em;
//top: 40px;
right: 0px auto; 
bottom: 0px;
left:0px auto; 
background: #FFFFFF;
}

#footer_text {
 position: relative
width: 100%;
height: 1em;
text-align: center;
bottom: 10px;
}
}