/*
   Copyright 2015 CityGrid Media, LLC

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
*/
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 75%;
    font-weight: 300;
    color: #000000;
    background: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}

h1 {
    border-bottom:1px solid #777;
}

p {
    font-weight: 300;
}

/* Default link settings */
a {
    color: #6A6AFF;
}
a:link {
    text-decoration: none;
}
a:visited {
    color: #9669FE;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.right {
    float: right;
}

/* Default table settings */
table {
    border-collapse: collapse;
}
table, tr, th, td {
    font-size: 1em;
    padding: 5px;
    border-collapse: collapse;
    white-space: nowrap;
}
th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #FF0099;
    color: #ffffff;
}

tr.app:hover td {
    background-color: #CEFFFD;
}

tr.group:hover td {
    background-color: #CEFFFD;
}

tr,
tr td:first-child,
tr th:first-child {
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

tr,
tr td:last-child,
tr th:last-child {
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
}

/* Shell container */
.shell {
    border:none;
    margin:10px 50px;
    clear:both;
}

/* Top navigation */
.nav_shell {
    border: none;
    margin: 10px 50px;
    height:90px;
    position:relative;
}

.nav_logo {
    width: 110px;
    position:absolute;
    bottom:0px;
    left:0px;
    float:left;
}

.nav_bar {
    background-color: #2FAACE;
    border-radius:3px;
    padding:4px;
    position:absolute;
    bottom:0px;
    left:110px;
    width:92%;
}

.nav {
    border: none;
    background-color: #2FAACE;
    color: #FFFFFF;
    margin: 1px;
}

a.nav {
    color: #FFFFFF;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0px 4px;
}
a.nav:link, a.nav:visited {
    text-decoration: none;
}
a.nav:hover {
    color: #2FAACE;
    text-decoration: none;
    background-color: #FFF;
    border-radius:2px;
}
a.nav:active {
    color: #CEFFFD;
}
a.nav_logout {
    font-size: 0.7em;
}

/* Row colors */
td.subh {
    font-size: 1.2em;
    background-color: #2FAACE;
    color: #FFFFFF;
}

td.subh_app {
    color: #000;
    background: #CEFFFD;
}

td.prd, ul.prd, li.prd, td.prd_prom {
    color: #000000;
    background-color: #CAFEB8;
    width: 100%;
}

tr.prd:hover td,
tr.prd_hover:hover td {
    background-color: #CAFEB8;
}

td.qat, ul.qat, li.qat, td.qat_prom {
    color: #000000;
    background-color: #FFF284;
    width: 100%;
}

tr.qat:hover td,
tr.qat_hover:hover td {
    background-color: #FFF284;
}

td.dev, ul.dev, li.dev, td.dev_prom {
    color: #000000;
    background-color: #FFC8f2;
    width: 100%;
}

tr.dev:hover td,
tr.dev_hover:hover td {
    background-color: #FFC8f2;
}

/* login/logout */

#login, #logout, #error {
    width: 392px ;
    margin-left: auto ;
    margin-right: auto ;
}

.logout, .error {
    text-align: center;
    color: #F70000;
}

.login {
    text-align: left;
    color: #2FAACE;
    font-size: 1.1em;
    font-weight: 600;
}

/* promote */
#promote {
    width: 75% ;
    margin-left: auto ;
    margin-right: auto ;
}

form {
    width: 250px ;
}

form.login {
    margin-left: auto ;
    margin-right: auto ;
}

input {
    width: 250px;
    display: block;
    border: 1px solid #999;
    height: 25px;
}

input[type=checkbox] {
    height:20px;
    width:20px;
    padding:2px;
    display:inline-block;
    text-align: center; /* center checkbox horizontally */
    vertical-align: middle; /* center checkbox vertically */
}

input.button {
    width: 100px;
    position :center;
    background: #CCCCCC;
    height: 20px;
    border-radius: 15px;
    border: 1p solid #999;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

input.button:hover {
    background: #FF0099;
}

input.button_submit {
    width: 100px;
    background: #CCCCCC;
    color: #000000;
    height: 20px;
    border-radius: 15px;
    border: 1p solid #999;
    cursor: pointer;
}

input.button_submit:hover {
    background: #FF0099;
}

.nb {
    font-family: arial;
    color: #FFFFFF !important;
    font-size: 1em;
    padding: 0px 5px;
    background: #2FAACE;
}
.nb:hover {
    color: #FFFFFF !important;
    background: #FF0099;
}

.nb_disable {
    font-family: arial;
    color: #FFFFFF !important;
    font-size: 1em;
    padding: 0px 5px;
    background: #CCCCCC;
}
.nb_disable:hover {
    color: #FFFFFF !important;
    background: #CCCCCC;
    text-decoration: none;
}

#app_main {
    width: 100%;
}

#history_main, #promote_main {
    width: 100%;
}

#app_results, #promote_results, #history_results {
    position: relative;
    top: 5px;
}

#app_results tbody:nth-child(odd) tr td {
    background-color: #f6f6f6;
}
#app_results tbody:nth-child(odd) tr:hover td {
    background-color: #CEFFFD;
}

#results_nav {
    float: right;    
}

/* promote menu */
ul.promote {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 0px 0px 0px 0;
    list-style: none;
    z-index: 50;
}
ul.promote li.promote {
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 5px 10px;
    cursor: default;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
ul.promote li.promote:hover {
    background: #2FAACE;
    color: #fff;
}
/* Sub menu properties */
ul.promote li.promote ul.promote {
    padding: 0px 0px;
    position: absolute;
    top: 25px;
    left: 0;
    width: 80;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
ul.promote li.promote ul.promote li.promote {
    display: block;
}
ul.promote li.promote ul.promote li.promote:hover {
    background: #CEFFFD;
}
ul.promote li.promote:hover ul.promote {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* user menu */
ul.user {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 0px 0px 0px 0;
    list-style: none;
    z-index: 50;
    border-radius:3px;
}
ul.user li.user {
    display: inline-block;
    margin-right: 0px;
    position: relative;
    padding: 0px 4px;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    border-radius:3px;
}
ul.user li.user:hover {
    background: #2FAACE;
    color: #fff;
}
/* Sub menu properties */
ul.user li.user ul.user {
    background: #2FAACE;
    padding: 0px 0px;
    position: absolute;
    top: 17px;
    left: 0;
    width: 100%;
    padding: 4px 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
ul.user li.user ul.user li.user {
    display: block;
}
ul.user li.user ul.user li.user:hover {
    background: #2FAACE;
}
ul.user li.user:hover ul.user {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Glossary */
select.day_select {
  width: 100px !important;
  background: #fff !important;
}

select.time_select {
  width: 75px !important;
  background: #fff !important;
}

td.glossary {
    white-space: normal;
}

/* Control Panel */
::-moz-placeholder {
    color: #8D8D8D;
}
 
::-webkit-input-placeholder {
    color: #8D8D8D;
}

::-webkit-validation-bubble-message {
    padding: 1em;
}

*:focus {
    outline: none;
}

.cp_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}

.cp_form_user ul,
.cp_form_group ul {
    width:1050px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}

.cp_form li,
.cp_form_user li,
.cp_form_group li {
    padding:12px;
    border-bottom:1px solid #eee;
    position:relative;
    list-style-type:none;
}

.cp_form li:first-child,
.cp_form li:last-child, 
.cp_form_user li:first-child,
.cp_form_user li:last-child, 
.cp_form_group li:first-child,
.cp_form_group li:last-child {
    border-bottom:1px solid #777;
}

.form_hint, .required_notification {
    font-size: 11px;
}

.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-top:4px;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}

.form_hint::before {
    content: "\25C0"; /* left point triangle in escaped unicode */
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}

.cp_form input:focus + .form_hint, 
.cp_form_user input:focus + .form_hint, 
.cp_form_group input:focus + .form_hint {
    display: inline;
}

.cp_form input:required:valid + .form_hint, 
.cp_form_user input:required:valid + .form_hint, 
.cp_form_group input:required:valid + .form_hint {
    background: #28921f;
}

.cp_form input:required:valid + .form_hint::before, 
.cp_form_user input:required:valid + .form_hint::before, 
.cp_form_group input:required:valid + .form_hint::before {
    color:#28921f;
}

.cp_form h2,
.cp_form h3, 
.cp_form_user h2,
.cp_form_user h3, 
.cp_form_group h2,
.cp_form_group h3 {
    margin:0;
    display: inline;
}

.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
}

.cp_form label, 
.cp_form_user label, 
.cp_form_group label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}

.cp_form input,
.cp_form select {
    height:25px;
    width:220px;
    padding:2px;
    display:inline-block;
}

.cp_form_group input[type=text] {
    height:25px;
    width:800px;
    padding:2px;
    display:inline-block;
}

.cp_form input.button,
.cp_form_user input.button,
.cp_form_group input.button {
    width: 100px;
    position :center;
    background: #CCCCCC;
    height: 20px;
    border-radius: 15px;
    border: 1p solid #999;
    margin-left: 0 ;
    margin-right: 0 ;
    box-shadow: none;
    cursor: pointer;
}

.cp_form input.button:hover,
.cp_form_user input.button:hover,
.cp_form_group input.button:hover {
    background: #FF0099;
}

.cp_form input.button_submit,
.cp_form_user input.button_submit,
.cp_form_group input.button_submit {
    width: 100px;
    background: #CCCCCC;
    height: 20px;
    border-radius: 15px;
    border: 1p solid #999;
    cursor: pointer;
}

.cp_form input.button_submit:hover, 
.cp_form_user input.button_submit:hover, 
.cp_form_group input.button_submit:hover {
    background: #FF0099;
}

.cp_form input,
.cp_form select,
.cp_form_user input,
.cp_form_user select,
.cp_form_group input,
.cp_form_group select {
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

.cp_form input:focus,
.cp_form textarea:focus,
.cp_form select:focus, 
.cp_form_user input:focus,
.cp_form_user textarea:focus,
.cp_form_user select:focus, 
.cp_form_group input:focus,
.cp_form_group textarea:focus,
.cp_form_group select:focus {
    background: #fff;
    border:1px solid #555;
    box-shadow: 0 0 3px #aaa;
}

input:required {
    background: #fff url(/static/red_asterisk.png) no-repeat 98% center;
}

select:required {
    background: #fff url(/static/red_asterisk.png) no-repeat 92% center;
}

.cp_form input:focus:invalid, 
.cp_form_user input:focus:invalid, 
.cp_form_group input:focus:invalid {
    background: #fff url(/static/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

.cp_form input:required:valid, 
.cp_form_user input:required:valid, 
.cp_form_group input:required:valid {
    background: #fff url(/static/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

.cp_form select:required:valid, 
.cp_form_user select:required:valid, 
.cp_form_group select:required:valid {
    background: #fff url(/static/valid.png) no-repeat 90% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

input.button.exp {
    width: 100px;
    padding: 0px;
    position: right;
    display:inline-block;
    cursor: pointer;
}

li.exp {
    float:right;
    z-index: 50;
}

/* Pagination navigation */
#pag_container {
    text-align:right;
}

.pag_content {
    display:inline-block;
}

.pag_buttons {
    display:inline-block;
    padding: 3px 5px;
    border-radius: 3px;
    background: #2FAACE;
}

.pag_buttons:hover,
.pag_buttons:hover a {
    color: #2FAACE;
    text-decoration: none;
    background: #FF0099;

}

.pag_buttons a {
    color: #000000;
    background: #2FAACE;
    height: 15px;
    width: 20px;       
    text-decoration: none;       
    font-size: 0.9em;
    border-radius:3px;
}

.pag_buttons a:link, a:visited {
    text-decoration: none;
}

.pag_buttons a:hover {
    color: #2FAACE;
    text-decoration: none;
    background: #FF0099;

}
.pag_buttons a:active {
    color: #CEFFFD;
}

.disable {
    background: #CCCCCC;
    color: #F0F0F0;
    pointer-events: none;
    cursor: default;
}

.disable a {
    background: #CCCCCC;
}

