/*  First, definitions that either:
     - apply to screens of all sizes (and should not be overridden below)
     - apply to smallest screens (may be overridden by size-specific defns)
*/

/* Start with very general stuff, that won't be overridden. */

*{margin:0px;padding:0px}    /* General lack of surrounding space */

body{font-family:Arial, Helvetica, sans-serif;
     width:100%;
     background-color:#eeeeff;
    }

.h4 { color: #000055;
      padding-top:5px; 
      padding-bottom:8px;
      font-size:normal;
      font-weight:bold;
      text-align:left;
      clear:both;          /* no floats alongside */
  }

h3{  font-size:normal;color: #000055;padding-top:10px; padding-bottom:5px;}  /* Subheadings within page */


h2{ font-size:large; color: #000055;padding-top:10px; padding-bottom:5px;}  /* Subheadings within page */

h1{ color:#000055;}

li{margin-top:2px;margin-left: 20px} /* Restores normal indenting, after the "margin:0px" above */

p{padding-top: 10px;}  /* Restores spacing suppressed by general "padding:0" above */

ul{
   float:left;
   list-style-type:none;
}

.hdr1{ 
 font-size:large; color: #000055;padding-top:10px; padding-bottom:5px;
 }

.hdr2{ 
 font-size:normal; color: #000055;padding-top:10px; padding-bottom:5px;
 }

.midbar{ 
 padding-left:20%;
 padding-right:20%;
 padding-bottom:15px;
 padding-top:15px;
 width:50%;
 }

a:link {
	font-size: normal;
	font-weight: bold;
	color: #336699;
	text-decoration: none;
	border: none;


}
a:visited {
	font-size: 14px;
	font-weight: bold;
	color: #9999CC;
	text-decoration: none;

}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FF6600;
	background-color: #FFFFFF;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;


}
a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: 336699;
	font-weight: bold;

}

/* To stop IE putting border round images used as links: */
a img {
   border:none; 
}

.nofloats
{
	clear:both      /* specifies which sides of an element floating 
                           elements are NOT allowed to float.*/ 
}
/* *** End of very general, all-size settings. *** */


/* Start of settings for WIDEST screen, to allow IE 8, etc. to work */


.leftfloatcolumn{ 
 float:left;
 padding-right:15px;
 padding-bottom: 10px;
 }

.smallitem {
  float:left;
  padding-right:20px;
  padding-bottom:20px;
}

#appformhdr{ 

 }

#issshlhdr{ 

 }

#placehdr{ 

 }

#dateshdr{ 

 }

#intropara{ 
    font-size:normal;
    padding:20px;
 }

#theform{ 
    padding:20px;
 }

.labelabovebox{ 
  float:left;
  padding-right:20px;
  padding-bottom: 6px;

 }

.textbox{ 
    margin-bottom: 6px;
 }

.textpara{  padding-bottom:20px;
}

#captchaintro{ 
 width:60%;
 }

.basebutton{ 
   border-radius:5px;
   padding:2px;
   text-align: center;
   width: 100px;
   height: 29px;
 }

.basebutton:hover{
  height:30px;
}

.navigbutton{
   font-size:small;
   background-color:#aaaadd;
   border-width:3px; 
   border-color:#000088;
   color: #000088;
   margin-bottom:5px;
 }

.navigbutton:hover{ 
   background-color:#333366;
   color: #eeeeff;
   text-decoration: none;
   border-color:#000088;
}


.navigbutton a:hover{ 
   background-color:#333366;
   color: #eeeeff;
   text-decoration: none;
   font-size: normal;
}

#logoonform{ 
	margin-top: 1%;
	text-decoration: none;
        position: absolute; 
        top: 5px; 
        left: 5%;
        width:60px;
}

.content{
    background-color:#eeeeff; 
    padding:20px;
        }



/* START OF SIZE-SPECIFIC DEFNS */



/* For next to largest screens, up to 995 px */

@media only screen and (max-width: 995px){



}  /* End of second-largest (up to 990) stuff */

/*  For medium-width screens  */
@media only screen and (max-width: 880px)
{
#logoonform{ 
        top: 10px; 
        left: 3%;
        width:50px;
}

 h2{ font-size:130%; }
 h3{ font-size:130%; }


#appformhdr{ 
     font-size:80%;
 }

#issshlhdr{ 
     font-size:70%;
 }

#placehdr{ 
     font-size:60%;
 }

#dateshdr{ 
     font-size:60%;
 }

} /* End of up-to-880px width stuff */


/*  For small-to-medium-width screens  */
@media only screen and (max-width: 780px)
{
#logoonform{ 
        top: 8px; 
        left: 3%;
        width:45px;
}

}
/* End of up-to-780px width stuff */


/* Start of settings for SMALL screen (phones, etc.) */

@media only screen and (max-width: 650px)
{

#logoonform{ 
        top: 6px; 
        left: 2%;
        width:35px;
}

 h2{ font-size:105%; }
 h3{ font-size:102%; }


#intropara{ 
    font-size:small;
   
 }

#theform{ 
    font-size:small;
 }

}/* End of settings for SMALL screen (phones, etc.) */


/* Start of settings for very small screen (phones, etc.) */

@media only screen and (max-width: 480px)
{
#logoonform{ 
        top: 4px; 
        left: 2%;
        width:30px;
}

 li{ padding-bottom:15px; } /* Space out buttons for large fingers */

 h2{ font-size:100%; }
 h3{ font-size:85%; }

}/* End of settings for very SMALLEST screen (phones, etc.) */