@import url(http://fonts.googleapis.com/css?family=Open+Sans:800,400);

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
	background:#759ADF;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
button,input[type=submit] {
	min-width:45px;
	min-height:35px;
	max-width:125px;
	max-height:45px;
}
select{
	font-size:12pt;
	font-weight:bold;
}

h1,h2,h3 {
    padding: 0;
    margin: 0;
}

.time textarea {
    width: 100%;
    min-height: 200px;
    margin-top: 15px;
}

img {
    width: 100%;
}
.time img {
    box-shadow: 3px 3px 5px 3px #ccc;
    width: 100%;
}
.container {
    width: 960px;
    margin: 0 auto;
    margin-bottom: 8px;
    padding: 20px;
    background-color: white;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #ADACAC;
}

.companyInfo {
    float: left;
    padding: 50px;
    padding-right: 75px;
    width: 50%;
    text-align: center;
}
.bigbox{
	transform:scale(2, 2);
}
.login {
    margin: 0 auto;
    width: 50%;
    border-left: 1px solid gainsboro;
    padding: 20px;
    float: left;
}

.login input[type="text"], .login input[type="password"] {
    margin: 0 auto;
    display: inline-block;
    width: 100%;
    height: 30px;
    text-indent: 5px;
}

.login h3 {
    text-align: left;
}

.center {
    text-align: center;
}

::-webkit-input-placeholder {
   text-align: center;
}

a.register {
    color: #0095E0;
}

a.register:visited {
    color: #0095E0;
}

.clear {
    clear: both;
}
.txtChk {
	min-width:45px;
	min-height:35px;
	max-width:125px;
	max-height:45px;
}
.message {
    color:#555;
    border-radius:10px;
    font-size:13px;
    max-width: 100%;
    margin: 20px 0;
}

.message span {
    font-weight:bold;
    text-transform:uppercase;
    margin-left: 20px;
}

.error {
    background:#ffecec url('images/error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
    padding: 15px;
}
.success {
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
    padding: 15px;
}
.warning {
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
    padding: 15px;
}
.notice {
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
    padding: 15px;
}

.login button {
    background-color: black;
    border: none;
    color: white;
    width: 60px;
    border-radius: 3px;
    padding: 7px 10px;
    float: left;
    margin-top: 10px;
}
.red {
	color: crimson;
}
.green {
		color:green;
}
.fa-pencil-square-o {
    color: #369;
}

.fa-times-circle {
    color: crimson;
}

.fa-thumbs-o-up {
    color: green;
}

.fa-thumbs-o-down {
    color: crimson;
}

.rejected {
    background-color: crimson;
    color: white;
}

.approved {
    background-color: green;
    color: white;
}

.time table {
    font-size:12px;
}

.time form {
    display: inline;
}

table form {
    display: inline;
}

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
    font-size: 12px;
    margin-bottom: 15px;
}


.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;         
}

.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    
    
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}

.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
#timeEntries td:nth-of-type(1){}
#timeEntries td:nth-of-type(2){}
#timeEntries td:nth-of-type(3){width:10px;}
#timeEntries td:nth-of-type(4){}
#timeEntries td:nth-of-type(5){}
#timeEntries td:nth-of-type(6){}
.hoursWorked {
    margin-right: 35px;
}

#searchf {
    width: 100%;
}

.time {
    float: left;
    width: 70%;
    padding: 20px;
    border-right: 1px solid gainsboro;
}

.notification {
    float: left;
    width: 30%;
    padding: 20px;
    text-align: center;
}

.notification p {
    font-size: 13px;
}

.notification #detail p {
    text-align: left;
}

.supervisorList {
    max-height: 550px;
    overflow-y: scroll;
    border: 1px dashed gainsboro;
}

.supervisorList table {
    margin: 0;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.clockButtons {
    float: left;
    margin-top: 20px;
}

.closeAlert {
    float: right;
    cursor: pointer;
}

.hideAlert {
    display: none;
}

.comments {
    width: 300px;
    height: 100px;
}

.characterCountdown {
    font-size: 12px;
    font-weight: 700;
    color: crimson;
}

/* Tooltip Styles */
a.tooltip {
    outline:none;
}

a.tooltip strong {
    line-height:30px;
}

a.tooltip:hover {
    text-decoration:none;
}

a.tooltip img {
    width: 15px;
    height: 15px;
}

a.tooltip span {
    z-index:10;
    display:none;
    padding:14px 20px;
    margin-top:10px;
    margin-right:10px;
    max-width:600px;
	min-width:300px;
    line-height:14px;
	font-size:9pt;
}

a.tooltip:hover span{
    display:inline;
    position:fixed;
	top:0px;
	right:0px;
    color:#fff;
    background:#097123;
}

.callout {
    z-index:20;
    position:absolute;
    top:30px;
    border:0;
    left:-12px;
}

a.tooltip span {
    border-radius:5px;
    /*box-shadow: 5px 5px #A9C8E7;*/
}

/* End Tooltip Styles */

footer {
    text-align: center;
    font-size: 10px;
    margin-bottom: 20px;
    width: 100%;
    padding: 0 10px;
}
.chkbxSlide {
  width: 20px;
  height: 20px;
  background: #333;
}

@media (max-width: 960px) {
    .container {
        width: 98%;

    }
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    th {
        display: none;
    }
    
    tr { border: 1px solid #ccc; }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
    }
    
    td:before { 
         Now like a table header 
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
    
    td:nth-of-type(1):before { content: "Name: "; font-weight: 800;}
    td:nth-of-type(2):before { content: "Supervisor: ";  font-weight: 800;}
    td:nth-of-type(3):before { content: "Department: ";  font-weight: 800;}
    td:nth-of-type(4):before { content: "Account Activated: ";  font-weight: 800;}
    td:nth-of-type(5):before { content: "Privileges: ";  font-weight: 800;}
    td:nth-of-type(6):before { content: "Actions: ";  font-weight: 800;}

	#timeEntriesMonitor td:nth-of-type(1):before { content: "Name: "; font-weight: 800;}
    #timeEntriesMonitor td:nth-of-type(2):before { content: "In: ";  font-weight: 800;}
    #timeEntriesMonitor td:nth-of-type(3):before { content: "Out: ";  font-weight: 800;}
    #timeEntriesMonitor td:nth-of-type(4):before { content: "Hours: ";  font-weight: 800;}
    #timeEntriesMonitor td:nth-of-type(5):before { content: "Status: ";  font-weight: 800;}

	#reportTimeDefaultEntries td:nth-of-type(1):before { content: "UID: "; font-weight: 800;}
    #reportTimeDefaultEntries td:nth-of-type(2):before { content: "In: ";  font-weight: 800;}
    #reportTimeDefaultEntries td:nth-of-type(3):before { content: "Out: ";  font-weight: 800;}
    #reportTimeDefaultEntries td:nth-of-type(4):before { content: "Hours: ";  font-weight: 800;}
    #reportTimeDefaultEntries td:nth-of-type(5):before { content: "Invoice: ";  font-weight: 800;}
    #reportTimeDefaultEntries td:nth-of-type(6):before { content: "Pay Amt: ";  font-weight: 800;}
		
    #timeEntries td:nth-of-type(1):before { content: "In Time: "; font-weight: 800;}
    #timeEntries td:nth-of-type(2):before { content: "Out Time: ";  font-weight: 800;}
    #timeEntries td:nth-of-type(3):before { content: "Hours: ";  font-weight: 800;}
    #timeEntries td:nth-of-type(4):before { content: "Actions: ";  font-weight: 800;}
    #timeEntries td:nth-of-type(5):before { content: "Status: ";  font-weight: 800;}
	#timeEntries td:nth-of-type(6):before { content: "UID: ";  font-weight: 800;}

    #timeEntriesAdministrator td:nth-of-type(1):before { content: "In Time: "; font-weight: 800;}
    #timeEntriesAdministrator td:nth-of-type(2):before { content: "Out Time: ";  font-weight: 800;}
    #timeEntriesAdministrator td:nth-of-type(3):before { content: "Hours: ";  font-weight: 800;}
    #timeEntriesAdministrator td:nth-of-type(4):before { content: "Actions: ";  font-weight: 800;}
    #timeEntriesAdministrator td:nth-of-type(5):before { content: "Status: ";  font-weight: 800;}
    #timeEntriesAdministrator td:nth-of-type(6):before { content: "Notes: ";  font-weight: 800;}

    #supervisorsTable td:nth-of-type(1):before { content: "Supervisor: "; font-weight: 800;}
    #supervisorsTable td:nth-of-type(2):before { content: "Action: ";  font-weight: 800;}
}

@media (max-width: 650px) {
	.invoiceAssign{
		max-width:45%;
		min-width:50%;
		height:35px;	
	}	
    .time,.notification {
        width: 100%;
        border: none;
    }
    .time {
        border-bottom: 1px solid gainsboro;
    }
    .message {
        margin: 0;
    }
    .container {
        padding: 15px;
    }
    .companyInfo {
        width: 100%;
        padding: 0px;
        border-bottom: 1px solid gainsboro;
    }

    .company h2 {
        font-size: 18px;
    }

    .login {
        width: 100%;
        border: none;
    }

    .clockButtons {
    margin-top: 0px;
    margin-bottom: 15px;
    }

    .message {
        margin: 10px 0;
    }

    .hoursWorked {
        width: 100%;
        margin: 0;
        display: block;
    }

    #comments {
        width: 100%;
    }

    tr {
        margin-bottom: 10px;
    }

    .bordered {
        border: none;
    }

    tbody {
        border: none;
    }
}



/*/* Navbar Styles */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#cssmenu #menu-button {
    display: none;
}
#cssmenu {
    width: auto;
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: #1A528A;
    background: -moz-linear-gradient(top, #569BE0 0%, #1A528A 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #569BE0), color-stop(100%, #1A528A));
    background: -webkit-linear-gradient(top, #569BE0 0%, #1A528A 100%);
    background: -o-linear-gradient(top, #569BE0 0%, #1A528A 100%);
    background: -ms-linear-gradient(top, #569BE0 0%, #1A528A 100%);
    background: linear-gradient(to bottom, #569BE0 0%, #1A528A 100%);
    margin-bottom: 30px;
}
#cssmenu > ul {
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
    float: right;
}
#cssmenu.align-right > ul > li {
    float: right;
}
#cssmenu > ul > li {
    float: left;
    display: inline-block;
}
#cssmenu.align-center > ul {
    float: none;
    text-align: center;
}
#cssmenu.align-center > ul > li {
    float: none;
}
#cssmenu.align-center ul ul {
    text-align: left;
}
#cssmenu > ul > li > a {
    padding: 18px 25px 21px 25px;
    border-right: 1px solid #BEE8BD;
    text-decoration: none;
    font-size: 13px;
    color: #d3eced;
    letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
    color: #ffffff;
    background: #0F2F4F;
}
#cssmenu > ul > li.has-sub > a {
    padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: #d3eced;
    right: 17px;
    top: 22px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
    border-top-color: #ffffff;
}
#cssmenu ul ul {
    position: absolute;
    left: -9999px;
    top: 60px;
    padding-top: 6px;
    font-size: 13px;
    opacity: 0;
    -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
    -moz-transition: top 0.2s ease, opacity 0.2s ease-in;
    -ms-transition: top 0.2s ease, opacity 0.2s ease-in;
    -o-transition: top 0.2s ease, opacity 0.2s ease-in;
    transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
    text-align: right;
}
#cssmenu > ul > li > ul::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: #ffffff;
    top: -4px;
    left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
    left: auto;
    right: 20px;
}
#cssmenu ul ul ul::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: #ffffff;
    top: 11px;
    left: -4px;
}
#cssmenu.align-right ul ul ul::after {
    border-right-color: transparent;
    border-left-color: #ffffff;
    left: auto;
    right: -4px;
}
#cssmenu > ul > li > ul {
    top: 120px;
}
#cssmenu > ul > li:hover > ul {
    top: 52px;
    left: 0;
    opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
    left: auto;
    right: 0;
}
#cssmenu ul ul ul {
    padding-top: 0;
    padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
    padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
    left: 180px;
    top: 0;
    opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
    left: auto;
    right: 100%;
    opacity: 1;
}
#cssmenu ul ul li a {
    text-decoration: none;
    font-weight: 400;
    padding: 11px 25px;
    width: 180px;
    color: #777777;
    background: #ffffff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
    color: #333333;
}
#cssmenu ul ul li:first-child > a {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
    position: absolute;
    display: block;
}
#cssmenu ul ul li.has-sub > a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left-color: #777777;
    right: 17px;
    top: 14px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
    border-left-color: transparent;
    border-right-color: #777777;
    right: auto;
    left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
    border-left-color: #333333;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
    border-right-color: #333333;
    border-left-color: transparent;
}
@media all and (max-width: 800px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #cssmenu {
        background:#1A528A;
        margin-bottom:15px;
    }
    #cssmenu > ul {
        display: none;
        float: none;
    }
    #cssmenu > ul.open {
        display: block;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    #cssmenu.align-right > ul {
        float: none;
    }
    #cssmenu.align-center > ul {
        text-align: left;
    }
    #cssmenu > ul > li,
    #cssmenu.align-right > ul > li {
        float: none;
        display: block;
    }
    #cssmenu > ul > li > a {
        padding: 18px 25px 18px 25px;
        border-right: 0;
    }
    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li.active > a {
        background: rgba(0, 0, 0, 0.1);
    }
    #cssmenu #menu-button {
        display: block;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        color: #d3eced;
        padding: 18px 25px 18px 25px;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: url('images/bg.png');
        cursor: pointer;
    }
    #cssmenu ul ul,
    #cssmenu ul li:hover > ul,
    #cssmenu > ul > li > ul,
    #cssmenu ul ul ul,
    #cssmenu ul ul li:hover > ul,
    #cssmenu.align-right ul ul,
    #cssmenu.align-right ul li:hover > ul,
    #cssmenu.align-right > ul > li > ul,
    #cssmenu.align-right ul ul ul,
    #cssmenu.align-right ul ul li:hover > ul {
        left: 0;
        right: auto;
        top: auto;
        opacity: 1;
        width: 100%;
        padding: 0;
        position: relative;
        text-align: left;
    }
    #cssmenu ul ul li {
        width: 100%;
    }
    #cssmenu ul ul li a {
        width: 100%;
        box-shadow: none;
        padding-left: 35px;
    }
    #cssmenu ul ul ul li a {
        padding-left: 45px;
    }
    #cssmenu ul ul li:first-child > a,
    #cssmenu ul ul li:last-child > a {
        border-radius: 0;
    }
    #cssmenu #menu-button::after {
        display: block;
        content: '';
        position: absolute;
        height: 3px;
        width: 22px;
        border-top: 2px solid #d3eced;
        border-bottom: 2px solid #d3eced;
        right: 25px;
        top: 18px;
    }
    #cssmenu #menu-button::before {
        display: block;
        content: '';
        position: absolute;
        height: 3px;
        width: 22px;
        border-top: 2px solid #d3eced;
        right: 25px;
        top: 28px;
    }
    #cssmenu > ul > li.has-sub > a::after,
    #cssmenu ul ul li.has-sub > a::after {
        display: none;
    }
}