/* CSS for authPopup.php */

/* Default Style for all Devices both Landscape and Portrait */
body{
margin: 0;
padding: 0;
font-family: Arial;
}
table{
margin-right:auto;
margin-left: auto;
border-spacing: 0px;
border-collapse: collapse;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}
td{
margin: 0;
}
div#envelope{
margin: 0;
}
/*
#AuthForm{
width: 280px;
margin-left: auto; 
margin-right: auto; 
margin-top: 0; 
margin-bottom: 0;
border: 1px solid red;
border-radius: 10px;
padding: 6px;
}
*/
form{
width: 100%;
margin-left: auto;
margin-right: auto;
}
.header{
background-color: white;
text-align: center;
padding: 0;
font-size: 14px;
font-weight: bold;
color: #000080;
}
.label{
font-size: 14px;
text-align: center;
font-weight: bold;
color: #000080;
}
.drivel{
font-size: 14px;
font-weight: normal;
color: #000080;
text-align: center;
padding: 0 12px 0 8px;
display: inline;
}
.inputText{
margin-bottom: 5px;
width:70%;
padding: 1px 5px 1px 5px;
border-radius: 4px;
font-size: 1.0rem;
border: 1px solid #000080;
}
.inputSubmit{
border-radius: 4px;
margin-bottom: 5px;
padding: 3px;
font-size: 14px;
cursor: pointer;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px)
{
  .header{
  font-size: 10px;
  }
  .label{
  font-size: 10px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 10px;
  }
  .inputSubmit{
  font-size: 10px;
  }
  .drivel{
  font-size: 10px;
  }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape)
{
  .header{
  font-size: 18px;
  }
  .label{
  font-size: 16px;
  }
  #AuthForm{
  width: 420px;
  }
  .inputText{
  font-size: 16px;
  }
  .inputSubmit{
  font-size: 16px;
  }
  .drivel{
  font-size: 16px;
  }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait)
{
  .header{
  font-size: 18px;
  }
  .label{
  font-size: 16px;
  }
  #AuthForm{
  width: 420px;
  }
  .inputText{
  font-size: 16px;
  }
  .inputSubmit
  {
  font-size: 16px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* Gap Filler (portrait and landscape) ----------- */
@media only screen
and (min-width : 737px)
and (max-width : 767px)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 12px;
  }  
}

/* Gap Filler (portrait and landscape) ----------- */
@media only screen
and (min-width : 1025px)
and (max-width : 1223px)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px)
{
  .header{
  font-size: 16px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 400px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px)
{
  .header{
  font-size: 16px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 400px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* iPhone 5 (portrait and landscape)----------- */
@media only screen
and (min-width : 320px)
and (max-width : 568px)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* iPhone 5 (landscape)----------- */
@media only screen
and (min-width : 320px)
and (max-width : 568px)
and (orientation : landscape)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}	

/* iPhone 5 (portrait)----------- */
@media only screen
and (min-width : 320px)
and (max-width : 568px)
and (orientation : portrait)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* iPhone 6 (portrait and landscape)----------- */
@media only screen
and (min-width : 375px)
and (max-width : 667px)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit{
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* iPhone 6 (landscape)----------- */
@media only screen
and (min-width : 375px)
and (max-width : 667px)
and (orientation : landscape)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }
}

/* iPhone 6 (portrait)----------- */
@media only screen
and (min-width : 375px)
and (max-width : 667px)
and (orientation : portrait)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* iPhone 6 plus (portrait and landscape)----------- */
@media only screen
and (min-width : 414px)
and (max-width : 736px)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* iPhone 6 plus (landscape)----------- */
@media only screen
and (min-width : 414px)
and (max-width : 736px)
and (orientation : landscape)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}

/* iPhone 6 plus (portrait)----------- */
@media only screen
and (min-width : 414px)
and (max-width : 736px)
and (orientation : portrait)
{
  .header{
  font-size: 12px;
  }
  .label{
  font-size: 12px;
  }
  #AuthForm{
  width: 280px;
  }
  .inputText{
  font-size: 12px;
  }
  .inputSubmit
  {
  font-size: 12px;
  }
  .drivel{
  font-size: 16px;
  }  
}