/********************************************
 * Jobscope WebCap Styles
 * (c) 2010 by Jobscope
 ********************************************/

html { background: #3A4156; }
body {background: #3A4156; }
#webcap-header {padding: 0px 0px 0px 0px !important;}
#webcap-header .logo-normal {margin: 5px;}
#webcap-header .text { height: 50px; line-height: 50px; vertical-align:middle; font-size: 2em; margin: 0px 10px;}
#webcap-header .image { display:inline-block;  vertical-align: middle;}
#webcap-header .image img { height: 40px;}
#webcap-header .image span { font-size: 2.0em;position: relative; top: -12px; left:2px;}

#webcap-messages { margin: 10px 0px 10px 0px; }

/* WebCap Toolbar Styles */
/******************************************/
.webcap-toolbar { padding: 10px 0px 10px 0px; }
.webcap-toolbar .fg-buttonset { margin-right:0em; padding-left: 0px; }
.webcap-toolbar .fg-button { font-size: 0em; padding-right: 10px; padding-left:10px; }


/* WebCap Inner Page Styles */
/******************************************/
#profile { }
#profile h2 { background: url('../images/profile2.png') no-repeat; padding: 0px 0px 0px 70px; height: 60px; line-height: 60px; }
#profile table { font-size: 1.5em; }
#profile table th { background: #3A4156; color: #FFF; text-align: center;}
#profile table th a, #profile table th a:hover, #profile table th a:visited {color: #FFF;}
#profile table .center-cell { text-align: center; }
#profile table .altrow { background: #E4E7E9; }
/*#profile table td { vertical-align: middle; }*/
#profile table tr td .button { margin: 5px 0px; }
#profile table tr td .small-button { font-size: 0.8em; margin: 4px 0px; }


.pager table { width: 10px; }

/* Button Display Styles */
/*******************************************/
.large-button { font-size: 1.5em; margin: 10px 5px;}
.medium { font-size: 1.2em; }
.medium-button { font-size: 1.2em; margin: 10px 5px; }

.ui-datepicker-trigger {  font-size: 1.2em; padding: 3px 5px; }
button, input[type="submit"], input[type="button"] { padding: 0.4em 1em; margin-left:5px; margin-right: 5pxl }


/* Form Styles */
/*********************************************/
div.webcap-form { text-align: left; font-size: 1.2em; position: relative; min-width: 200px; width: 100%; display:inline-block; }
div.webcap-form fieldset { border: none; padding: 0px; }
div.webcap-form fieldset legend { font-size: 1.5em; color: #3A4156; }
div.webcap-form li { padding: 5px; list-style: none; }
div.webcap-form input[type="text"], div.webcap-form input[type="password"] { padding: 5px; min-width: 200px;}
div.webcap-form input[role="textbox"] { padding: 5px; min-width: 200px;}
div.webcap-form select {padding: 5px; min-width: 200px;}
div.webcap-form .webcap-form-label { padding: 5px; font-weight: bold; width: 150px; display: inline-block; }
div.webcap-form .webcap-form-radiobtn {  }
div.webcap-form .webcap-form-radiobtn input[type="radio"] {margin-left: 20px; padding: 0px; width: 15px;}
div.webcap-form .webcap-form-radiobtn label { font-weight: normal; font-size: 0.9em; }
div.webcap-form .webcap-form-checkbx {}
div.webcap-form .webcap-form-checkbx input[type="checkbox"] {}
div.webcap-form .webcap-form-checkbx label { font-weight: bold; font-size: 0.9em; }
div.webcap-form .webcap-form-small-label { padding: 5px; font-weight: bold; width: 70px; display: inline-block; }
div.webcap-form .webcap-form-buttonbar { text-align: center; }
div.webcap-form .webcap-form-buttonbar button span { padding: 0; }
div.webcap-form .webcap-form-buttonbar input[type="text"], div.webcap-form .webcap-form-buttonbar button { height: 30px; margin: 10px; padding: 3px 5px; }


/*******************************
 * Uncatagorized/Under Review
 ******************************/

.webcap-standard 
{
    text-align: left;
}

.input-elements input, label
{
    font-size: 1.2em;
    padding: 5px;
    font-weight: bold;
}

.input-elements span.ui-button-text
{
    margin-left: 0px;
    vertical-align: middle;
}

.input-elements span.label
{
    margin-left: 10px;
    vertical-align: middle;
    height: 16px;
}

.input-elements button
{
    font-size: 1.2em;
    padding: 3px 5px;
}

.bg-dark 
{
    background: #3A4156;
}

.webcap-content
{
    width: 100%;
    text-align: center; 
}

.content-area 
{
    padding: 10px 0px;
}

.footer-label 
{
    font-weight: bold;
    padding: 0px 5px 0px 20px;
}

.footer-text-control 
{
    text-align: right;
    width: 60px;
    border: none;
}

h3 
{
    font-size: 1.4em;
}

.footer 
{
    position: fixed;
    bottom: 0px;
    left: 0px;
    padding: 5px;
    width: 100%;
}


.large-entry h2
{
    margin: 100px 0px 0px 0px;
    color: White;
}

.large-entry input
{
    font-size: 2em;
    padding: 5px 10px;
}

.comment-entry 
{
    height: 60px;
    width: 250px;
}

input[type="radio"] 
{
    margin: 0px;
    padding: 0px;
    width: 0px;
}

/* CheckListBox Table */
table.checkListBox-form { font-size: small; }

/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 2px; }
.ui-timepicker-div dl{ background-color: #C3D9FF; border-style:solid; border-color:#0000ff; text-align: left; }
.ui-timepicker-div dl dt{  height: 15px; }
.ui-timepicker-div dl dd{  margin: -25px 10 10px 45px; width: 190px; }
.ui-timepicker-div td {   font-size: 100%; }

table#timecardEntry  
{
	font-size:small; 
	border-collapse: collapse; 
	text-align: center; 
	width: 100%; 
	border: 2px solid #006699; 
}
table#timecardEntry td  
{
	border: 1px solid #006699; 
	text-align: center; 
	vertical-align: middle;
	
}
table#timecardEntry input[type="checkbox"]
{
    width: 13px; 
    height: 13px; 
    padding: 0; 
    margin:0; 
    vertical-align: bottom; 
    position: relative; 
    top: -1px; 
    *overflow: hidden; 

}

table#timecardEntry th  
{
	border: 1px solid white; 
	background-color: #5E91C9; 
	color: White; 
	font-weight: bold;

}

/*
 * Fixed bottom button bar
*/
.bottombuttonbar 
{
    position: fixed;
    z-index: 100;
    bottom: 0px;
    border-radius: 5px;
}


/*
 *Menu Display Styles
 */
 
.jquerycssmenu{
    font: bold 12px Verdana;
    padding-left: 3px; /*offset of tabs relative to browser left edge*/
     z-index: 99; 
    min-height: 23px;
    
}

.jquerycssmenu ul li a.jquerycssmenuhover, .jquerycssmenu ul li ul li a.jquerycssmenuhover { 
    border: 2px solid #f5a051; color: black;
}

.jquerycssmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
     z-index: 99; 
}

/*Top level list items*/
.jquerycssmenu ul li{
    position: relative;
    display: inline;
    float: left;
     
}

/*Top level menu link items style*/
.jquerycssmenu ul li a
{
    display: block;
    background: none repeat-x scroll 50% 50% #D7EBF9;
    border: 2px solid #AED0EA;
    color: #143448;
    font-weight: bold;
    margin-right: 5px;
    padding: 0.7em;
    cursor: pointer;
    display: inline-block;
    overflow: visible;
    position: relative;
    text-align: center;
    text-decoration: none !important;
    border-radius: 6px 6px 6px 6px;
    z-index: 1;
      font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
    font-size: 1.2em;
}
	
/*1st sub level menu*/
.jquerycssmenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    margin-right: 0px;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li{
    display: list-item;
    float: none;
    position: relative;
   
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul{
    top: 0;
}

/* Sub level menu links style */
.jquerycssmenu ul li ul li a
{
    background: none repeat-x scroll 50% 50% #D7EBF9;
    border: 2px solid #AED0EA;
    width: 160px;
    color: #143448;
    font-weight: bold;
    margin-right: -2px;
    margin-top: 0px;
    padding: 0.4em;
    cursor: pointer;
    display: inline-block;
    overflow: visible;
    position: relative;
    text-align: center;
    text-decoration: none !important;
    border-radius: 2px 2px 2px 2px;
      font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
      font-size: 1.2em;
    
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
    position: absolute;
    top: 12px;
    right: 5px;
}

.rightarrowclass{
    position: absolute;
    top: 5px;
    right: 5px;
}

.brand-color-box-display
{
    width:25px;
    height:25px;
    display: inline-block;
    position: relative;
    top:8px;
}

.brand-canvas-logo
{
    cursor: pointer;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

.brand-canvas-focused-border
{
    border: 3px solid #ff6666 !important;
    border-radius: 5px !important;
    box-shadow: 0px 0px 0px 5px #ffcccc, 0px 0px 5px 5px #ffcccc !important;
    
}

/* Set and crop logo to only 300x100px */
.center-cropped-logo {
  max-width: 300px;
  max-height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.center-cropped-logo img{
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

.center-logo-sm {
  width: 295px;
  text-align: center;
}

.center-logo-sm .image img{
  height:20px !important;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* 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 */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content */
.jobscope-modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

/* The Close Button */
.jobscope-modal-close {
    color: white;
    float: right;
    font-size: 18px;
    font-weight: bold;
}

.jobscope-modal-close:hover,
.jobscope-modal-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.jobscope-modal-header {
    padding: 15px;
    background-color: #5e91c9;
    color: white;
}

.jobscope-modal-body 
{
    padding: 2px 16px;
    height:50%;
    min-height:300px;
    
    }

.jobscope-modal-footer {
    padding: 2px 16px;
    background-color: #5e91c9;
    color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
    }
    
.ui-autocomplete { max-height: 200px; overflow-y: auto;overflow-x: hidden;}	
.ui-autocomplete-loading {
      	background: none;
}

.menu_item {
    z-index: 100;
}