/*************************************
* AAVirtual Stylesheet
* Copyright American Airlines Virtual, 2008
* Revision History
* 02/16/2008 - Initial release
* 05/30/2017 - Responsive UI re-design
*************************************/

/*************************************
* Header content
*************************************/

* {
  margin: 0;
  padding: 0;
  font-family: helvetica, arial, serif;
}

#header_bar{
    position: relative;
    height: 90px;
    margin: 5px;
    }

#header_logo_login_block {
    position: absolute;
    left: 0;
    bottom: 0;
}

.MenuIcon {
    display: none;
}

#header_logo_login_block img {
    vertical-align: bottom;
}

#header_login_block {
    display: block;
    vertical-align: bottom;
    padding-left: 10px;
    font-size: 13px;
    color: black;
}

#header_login_block a {
    font-size: 13px;
    color: black;
    text-decoration: none;
}

#header_login_block a:hover {
  text-decoration: underline;
}

#drop_down_menu {
    display: block;
    position: absolute;
    float: left;
    left: 220px;
    bottom: 0;
	list-style: none;
    font-family: sans-serif; 
    font-size: 20px;
    z-index: 10;
}

#drop_down_menu ul{
	margin: 0px;
	list-style: none;
}

#drop_down_content a {
    font-family: sans-serif; 
}

.MenuContent li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: rgb(54, 73, 90);
    white-space: nowrap;
    bottom: 0;
}

.MenuContent li {
    position: relative;
    float: left;
    width: 200px;
}


.MenuContent li ul{
	position: absolute;
	left: -999em;
}

.MenuContent li ul li {
    width: 100%;
}

.MenuContent li ul li a {
    padding: 5px 15px 5px 15px;
    color: Black;
    font-weight: normal;
    background: White; 

}

#admin_menu_header{
    padding: 5px 15px 5px 15px;
    color: Red;
    font-weight: normal;
    background: LightGray; 

}

.MenuContent li:hover ul{
    left: auto;
}

.MenuContent li ul li a:hover{
    background: LightGray;
}

/*Header responsive UI elements*/

@media screen and (max-width: 1250px) {
    .MenuContent li {
        position: relative;
        float: left;
        width: 140px;
    }
}    
    
@media screen and (max-width: 1000px) {
    #drop_down_menu {
        display: block;
        position: absolute;
        left: 0px;
        bottom: 0;
    }
        
    /* Dropdown Menu Button */
    .MenuIcon {
        display: block;
        position: absolute;
        bottom: 0;
        font-family: sans-serif; 
        font-size: 32px;
        cursor: pointer;
        text-decoration: none;
        font-weight: bold;
        color: rgb(54, 73, 90);
    }

    /* Dropdown Menu Button on hover & focus */
    .MenuIcon:hover, .MenuIcon:focus {
        color: white;
        background-color: rgb(54, 73, 90);
    }

    /* Dropdown Menu Content (Hidden by Default) */
    .MenuContent {
        position: absolute;
        display: none;
        margin: 0px;
        font-family: sans-serif; 
        font-size: 20px;
        text-decoration: none;
        font-weight: bold;
        color: rgb(54, 73, 90);
        background-color: white;
        white-space: nowrap;
    }

    .MenuContent li {
        position: static;
        float: none;
        width: auto;
        padding: 5px 0px 5px 0px;
        list-style: none;
        margin: 0px;
    }
    .MenuContent li ul{
        position: static;
        left: auto;
        padding: 5px 0px 5px 0px;
        list-style: none;
        margin: 0px;
    }

    .MenuContent li ul li {
        width: auto;
        padding: 5px 15px 5px 15px;
        font-weight: normal;
        font-family: sans-serif; 
        background-color: white;
    }

    .MenuContent li ul li:hover{
        background: LightGray;
    }


    /* Links inside the dropdown menu content */
    .MenuContent li a {
        display: inline;
        padding: 5px 0px 5px 0px;
        color: Black;
        font-weight: bold;
        font-family: sans-serif; 
        font-size: 20px;
        text-decoration: none;
        color: rgb(54, 73, 90);
        background-color: white;
        white-space: nowrap;
    }

    .MenuContent li ul li a {
        width: 100%;
        padding: 5px 0px 5px 0px;
        font-weight: normal;
        font-family: sans-serif; 
        font-size: 20px;
        text-decoration: none;
        color: Black;
        white-space: nowrap;
        background-color: inherit;
    }

    /* Show the dropdown menu (use JS to add this class to the .MenuContent container when the user clicks on the dropdown button) */
    .showMenuContent {
        display:block;
    }

    #header_logo_login_block {
            position: absolute;
            left: 40px;
            bottom: 0;
    }
}

#homepage_splash_image {
        width:100%;
}

#screenshot_contest_image {
        width:100%;
        padding: 10px 0px 10px 0px;
}

/*************************************
* Page content area
*************************************/

/*Responsive home page*/

.responsive-main-content {
  box-sizing: border-box;
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
}

.grid-item {
  width: calc((100% - 50px * 12) / 12);
  margin-right: 25px;
  margin-left: 25px;
  float: left;
  background: rgba(0, 0, 255, 0.25);
}

/*Not sure guest is used*/
.guest {
  width: calc(25% - 50px);
  margin-right: 25px;
  margin-left: 25px;
  float: left;
  background: rgba(0, 0, 255, 0.25);
}

.content-block {
  width: calc(50% - 50px);
  margin-right: 25px;
  margin-left: 25px;
  float: left;
}

@media screen and (max-width: 1250px) {
  .guest {
    width: calc(50% - 50px);
  }
  .content-block {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 640px) {
  .guest {
    width: 100%;
  }
  .content-block {
    width: 100%;
  }
}

#section_header {
  padding: 10px 0px 10px 0px;
  font-family: sans-serif; 
  font-size: 20px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #dddddd;
}

#section_content {
  padding: 10px 0px 10px 0px;
  font-family: helvetica, arial, serif; 
  font-size: 15px;
  line-height: 125%;
}

#section_content a {
  text-decoration: none;
  color:#000000;
  font-weight:bold;
}

#section_content table a {
  font-weight:normal;
}

#section_content a:hover {
  text-decoration: underline;
}


/*************************************
* Footer
*************************************/

#copyright {
  font-size: 10pt;
  color: #000044;
  text-align: center;
  margin: 20px 0px 0px 0px;
}





/*Not sure any of this is used*/




.tableHeader {
  font-weight: bold;
  font-size: 16px;
}
#content {
  width: 1000px;
  background: #cccccc;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.6);
  box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.6);
}

#content_wide {
  width: auto;
  background: #cccccc;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  font-family: helvetica, arial, serif;
  border-width: 2px;
  border-style: solid;
  border-color: #000044;
}

img#content {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

form#login {
  font: bold 10pt arial;
  color:#000044;
  padding: 2px;
  margin: 0;
}

a#login {
  font: bold 10pt arial;
  color:#000044;
  padding: 2px;
  margin: 0;
  text-decoration: none;
}

div.clearer {
  clear: left;
  line-height: 0;
  height: 0;
}

/*************************************
* Left side navigation menu
*************************************/
#leftbar {
  float: left;
  margin: 0;
  padding: 0;
}

#leftmenu {
  border-width: 1px;
  border-style: solid;
  border-color: #000044;
}

dl#header {
  width: 186px;
  margin: 0px;
  padding: 0px;
  background: #000044;
}
dt#header {
  margin: 0px;
  padding: 5px;
  font: bold 10pt arial;
  text-decoration: none;
  background: #000044;
}
dd#item {
  margin: 0;
  padding: 2px;
  font: bold 10pt arial;
  text-decoration: none;
  background: #ffffff;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #000044;
}
dt#header a {
  color: #ffffff;
  text-decoration: none;
}
dt#header {
  color: #ffffff;
  text-decoration: none;
}

dd#item a {
  display: block;
  color: #000044;
  text-decoration: none;
}
dd#item a:hover {
  color: #ffffff;
  background: #a0a0ff;
}

table#stats {
  width:186px;
  margin: 0px;
  padding: 2px;
  font: bold 10pt arial;
  text-decoration: none;
  color: #000044;
}

tr#stats {
  margin: 0px;
  padding: 0px 2px 0px 2px;
  border: solid 1px blue;
}

/*************************************
* Main content
*************************************/
#main {
    margin: 5px;
  padding: 0px 5px 0px 5px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #dddddd;
  text-decoration: none;
}

#page_header, #main h2 {
  padding: 10px 0px 10px 0px;
  font-family: sans-serif; 
  font-size: 20px;
  text-align: center;
}

#page_header a, #main h2 a {
    font-family: sans-serif; 
}

#main_wide {
  float:left;
  width:auto;
  background: #f0f0f0;
  margin: 0;
  padding: 0px 5px 0px 5px;
  font: 10pt arial;
  color: #000044;
  text-decoration: none;
}

#main_wide_logbook {
  float:left;
  width:auto;
  background: #f0f0f0;
  margin: 0;
  padding: 0px 5px 0px 5px;
  font: 10pt arial;
  color: #000044;
  text-decoration: none;
}

#section {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #000044;
}

#ssc_winner {
  margin-left: auto;
  margin-right: auto;
}

#ssc_winner p {
  margin: 0px;
  text-align: center;
  font-size: 11pt;
}

#main img, #main_wide img, #main_wide_logbook img {
  padding: 10px 0px;
}

#main p, #main_wide p, #main_wide_logbook p {
  margin: 0.5em 0.2em 0.5em 0.5em;
  padding: 0px;
}

#main ul, #main_wide ul, #main_wide_logbook ul {
  margin: 0 0 0 1.5em;
  padding: 0px 0px 0px 20px; 
}

#main ul li, #main_wide ul li, #main_wide_logbook ul li {
  width:700px;
  margin: 0;
  padding: 0px;
}

#main a, #main_wide a {
  text-decoration: none;
  color:#000044;
  font-weight:bold;
}

#main_wide_logbook a {
  text-decoration: none;
  color:#000044;
  
}


#main a:hover , #main_wide a:hover, #main_wide_loogbook a:hover {
  text-decoration: underline;
}

tr.tableheader td {
	font-size:10pt;
	font-weight:bold;
}

tr.tableheader td{
	background-color: #000044;
	color:#ffffff;
	padding:2px;
}

tr.tablesubheader td {
	font-size:10pt;
	font-weight:bold;
}

tr.tablesubheader td{
	background-color: #ffffff;
	color:#000044;
	padding:2px;
}

tr.tablerow td, tr.tablerow td a{
	font-size:10pt;
	padding:2px;
	color:#000044;
}

tr.tablerowalt td, tr.tablerowalt td a{
	background-color: #c0c0c0;
	font-size:10pt;
	padding:2px;
	color:#000044;
}

tr.tablerow td a:hover{
	font-size:10pt;
	padding:2px;
	color:#8080ff;
}

div#pdata {position: relative; }
div#pdata a {display: block;
    text-decoration: none; 
   }
div#pdata a:hover {
   background-color:#a0a0ff;
   color:#000044;
}

div#pdata a span {display: none;}
div#pdata a:hover span {display: block;
   position: absolute; 
   background-color:#000044;
   color:#ffffff;
   width:200px;
   margin: 0 0 0 2em;
   z-index: 2;
   }

#hubadmin h2 a, #hubadmin p a{
  color:#000044;
	text-align: center;
  text-decoration: none;
}

td#detail_r {
  text-align: right;
  color:#FF8000;
}

td#detail_l{
  text-align: left;
}

div#modulemenu {
	text-align: center;
  text-decoration: none;
}

div#modulemenu a {
	background-color:#000044;
	padding: 5px;
	border: 1px;
        color:#ffffff;
}

div#modulemenu a:hover span {
	background-color:#ffffff;
        color:#000044;
}

td#red {
	color: #FF0000;
}

strong.red {
	color: #FF0000;
}

a.bold_red {
	color: #FF0000;
	font-weight:bold;
}

a#red {
	color: #FF0000;
	font-weight:bold;
}

a#blue {
	color: #3333dd;
	font-weight:bold;
}

a#orange {
	color: #FF8000;
	font-weight:bold;
}

a#yellow {
	color: #FFC619;
	font-weight:bold;
}

a#green {
	color: #00cc33;
	font-weight:bold;
}

p#green_msg {
	color: #00cc33;
	font-weight:bold;
}

.note {
    background-color: #FFCC66;
    border: 1px dashed #CC3300;
    margin: 6px 32px;
    padding: 3px;
    font-size: 11pt;
    text-align: center;
}

#map-canvas { 
	height: 500px; 
	padding: 0;
}

/*************************************
* Pagination
*************************************/
.pagination {
	height: 1%; /* IE tweak (holly hack) */
	width: auto;
	text-align: left;
	margin-top: 5px;
	float: left;
}

.pagination span.page-sep {
	display: none;
}

li.pagination {
	margin-top: 0;
}

.pagination strong, .pagination b {
	font-weight: normal;
}

.pagination span strong {
	padding: 0 2px;
	margin: 0 2px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #bfbfbf;
	border: 1px solid #bfbfbf;
	font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
	font-weight: normal;
	text-decoration: none;
	color: #747474;
	margin: 0 2px;
	padding: 0 2px;
	background-color: #eeeeee;
	border: 1px solid #bababa;
	font-size: 0.9em;
	line-height: 1.5em;
}

.pagination span a:hover {
	border-color: #d2d2d2;
	background-color: #d2d2d2;
	color: #FFF;
	text-decoration: none;
}

.pagination img {
	vertical-align: middle;
}

/*************************************
* Logbook comments
*************************************/
div#ldata {position: relative; }
div#ldata a {display: block;
    text-decoration: none; 
   }
div#ldata a:hover {
   background-color:#a0a0ff;
   color:#000044;
}

div#ldata a span {display: none;}
div#ldata a:hover span {display: block;
   position: absolute; 
   background-color:#000044;
   color:#ffffff;
   width:200px;
   margin: 0 0 0 -12em;
   }



/*************************************
* Modal (popup) login form
*************************************/


   
/* Bordered form */
form {
    border: 3px solid #ffffff;
}

/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 4px 8px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Partial-width inputs */
input#freq[type=text]{
    width: 50%;
    padding: 4px 8px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#input_field {
  padding: 4px 8px;
  margin: 8px 0;
}

/* Set a style for all buttons */
button {
    background-color: #125896;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #bf2025;
}

/* Add padding to containers */
.container {
    padding: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
    }
}   
   
   
 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.ModalContent {
    background-color: #fefefe;
    margin: 5px auto; /* 15% from the top and centered */
    border: 1px solid #888;
    padding: 10px;
    width: 50%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 25px;
    top: 0; 
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/*************************************
* Handbook content
*************************************/

#handbook_table {
    border: 1px solid black;
    }
    
#handbook_table th {
    font: bold;
    border: 1px solid black;
    padding: 10px;
    }
    
#handbook_table td {
    border: 1px solid black;
    padding: 10px;
    }