body {
	font-size:12.5px;
}

.navbar-fixed-top {
    clear:both;
}

/*width of date picker*/
.ui-datepicker {
    width: 21em;
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
  color: #eaeaea;
  font-weight:bold;
}

.navbar-inverse .navbar-inner {
	background-image:url("../images/patterns/congruent_outline.png");
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
	color: #b0cfff;
	background-color: #111111;
}

.navbar .nav > li > a {
	padding: 10px 15px 12px;
}

.dropdown-menu {
	padding: 5px 0;
}

.dropdown-menu > li > a {
	padding: 10px 28px 8px;
	font-weight: bold;
}

.dropdown-menu li > a i {
	position: absolute;
	left: 6px;
	top: 12px;
}

.table th {
	background-color:#004C66;
	color:#fff;
}

.breadcrumb {
	padding: 8px 15px;
	/* margin: 10px 0 20px; */
        margin-top: 80px;
	background-color:#fafafa;
	background-image:none;
	border-style: solid;
	border-width:1px;
	border-color:#dedede;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.breadcrumb a {
	color:#333;
	font-weight: bold;
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb > .active {
	color: #3079ed;
	font-weight: bold;
}

.table  th a {
	color:#fff;
}

.table th a:hover {
	color:#333;
}

.grid-view table.items th:hover a:after {content:""; display:block; position:absolute; top:0; right:-10px; width:14px; height:14px; line-height:14px; vertical-align:text-top; background-image:url("../images/glyphicons-halflings-white.png"); background-position:-312px -96px; background-repeat:no-repeat;}
.grid-view table.items th:hover a.asc:after {background-position:-289px -96px;}
.grid-view table.items tr.selected td { background:#eeeeee; }
.grid-view .filters .filter-container { padding:0 15px 0 0; }

/*
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #ffffff;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}*/
.grid-view table.items th a.asc .caret {
    border-bottom: 4px solid #000;
    border-top: 0;
	display:block;
}
.grid-view table.items th a.desc .caret {
    border-bottom:0;
    border-top: 4px solid #000;
    display:block;
}
/*
.grid-view table.items th a.asc .caret { display:block; }
.grid-view table.items th a.desc .caret {
    border-bottom:4px solid #ffffff;
    border-top:none;
    display:block;
}*/

html,
body {
    height: 100%;
    padding: 0px 0px 0px 0px;
}

#wrap {
    min-height: 100%;

    /* Negative indent footer by it's height */
    margin: 0 auto -50px;
    /*background-image: url('<?php echo Yii::app()->request->baseUrl ?>/images/patterns/random_grey_variations.png');*/
}

#push,
#footer {
    height: 50px;
}
#footer {
    text-align: center;
    background-color: #f5f5f5;
}
    /* Main page layout */
    
    .content {
        /* padding: 5px 20px 5px 20px; */
        margin: 0px auto 0px;
        background-color: #fff;

    }
   
    
    @media (min-width: 1200px){
        
        /*
        .span3{
           
        }
        
        [class*="span"]{
            margin-left: 20px;
        } */
        
        #JobRecord_leave_manual_date_in{
            margin-left: 40px;
        }
        
        .content{
            /* margin-top: 50px; */
            /* width: 300px; */
        }

        input,
        textarea {
            width: 280px;
        }
        
        select{
            width: 280px;
        }
}

/* IPhone 6plus */
/* Lastly, apply responsive CSS fixes as necessary */
@media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)	
{
    #job-record-grid{
        width: 20%;
    }
    .content{
        margin-top: 50px;
    }
    
    #footer {
                
    /*
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px; */
    }
 
    .btn-large {
        width: 220px;
    }
    
    .navbar-fixed-top {
        margin-bottom: 0px;
    }
    
    #btnSubmit{
        font-size: 20px;
        width: 200px;
        margin-right: 5px;
        height: 50px;      
    }

    /*White Cancel Button */
    #yw2{
        width: 60px;
        padding: 15px 10px 15px 10px;      
    }
    
    #cancel_button{
        width: 60px;
        padding: 15px 10px 15px 10px;      
    }
    
    .container {
        width: auto;
        /*margin-left: 5px; 
        margin-right: 5px; */
    }
    
    
    .breadcrumb{
        margin: 30px 0px 10px 0px;
    } 
    
    h1{
        font-size: 30px;
    }
        
    /*
    .btn-primary{
        font-size: 20px;
        width: 50px;
        width: 200px;
        margin-right: 5px;
        height: 50px;
    } */
    
    select{
        width: 280px;
    }

    input,
    textarea {
        width: 280px;
    }
    
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    .uneditable-input {
        width: 260px;
    }
}

@media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)	 
and (orientation : landscape) { 

    #wrap{
        margin-bottom: 10px;
    }
    
    .ui-datepicker {
        margin-left: 40px;
    }
}

.container {
    width: auto;
    margin-left: 20px; 
    margin-right: 20px;
}

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
and (orientation : landscape){
    
    #wrap{
        margin-bottom: 100px;
    }
    .ui-datepicker {
        margin-left: 40px;
    }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
    
    #wrap{
        margin-bottom: 10px;
    }
       .ui-datepicker {
        margin-left: 40px;
    }
    
}


@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)	{

    h1{
        font-size: 25px;
    }
    
    
    .content{
        margin-top: 6px;
        width: 240px;
    }
    
    .breadcrumb{
        margin: 0px 0px 10px 0px;
    }
    
    .btn-large {
        width: 160px;
    }
    
    .container .credit {
        font-size: 12px;
    }
    
    .footer{

    }
    
    h4{
        font-size: 14px;
    }
   
    
    input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
        width: 200px;
    }
    
    
    select{
        width: 220px;
    } 
    
    #btnSubmit{
        font-size: 20px;
        width: 100px;
        margin-right: 5px;
        height: 50px;      
    }
    
    /*White Cancel Button */
    #yw2{
        width: 50px;
        padding: 15px 10px 15px 10px;      
    }
        
    #cancel_button{
        width: 50px;
        padding: 15px 10px 15px 10px;      
    }


    input,
    textarea {
        width: 220px;
    }
    
    .control-group.error input, .control-group.error select, .control-group.error textarea{
        width: 200px;
    }
    
    .form-actions{
        padding: 10px 10px 10px 10px;
    }
}

@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)	{

    h1{
        font-size: 30px;
    }
    
    
    .content{
        margin-top: 40px;
    }
    
    .breadcrumb{
        margin: 0px 0px 10px 0px;
    }
    
    .btn-large {
        width: 210px;
    }
    
    #btnSubmit{
        font-size: 20px;
        width: 200px;
        margin-right: 5px;
        height: 50px;      
    }

    /*White Cancel Button */
    #yw2{
        width: 60px;
        padding: 15px 10px 15px 10px;      
    }
    
    #cancel_button{
        width: 60px;
        padding: 15px 10px 15px 10px;      
    }
    
        
    select{
        width: 280px;
    }

    input,
    textarea {
        width: 280px;
    }
    
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    .uneditable-input {
        width: 260px;
    }
    
    .control-group.error input, .control-group.error select, .control-group.error textarea{
        width: 260px;
    }
}

.container .credit {
    margin: 15px 0;
}
/* End page layout */

.border-red {
    border: 1px solid red;
}

.null {
    color: #CCCCCC;
    font-weight: bold;
}

.btn-rotate-left {
    background: url('../images/rotate-right-white.png') no-repeat scroll 6px 1px #515151;
}
.btn-rotate-left:hover, .btn-rotate-left:focus, .btn-rotate-left:active {
    background: url('../images/rotate-right-white.png') no-repeat scroll 6px 1px #444444;
}

/*r18 defect css*/
#defectTable th {
    vertical-align: middle;
    text-align: center;
}
.personTable {
    margin-top: 8px;
    margin-bottom: 6px;
    width: 100%;
}
.personTable th, .personTable td {
    border-left: 0 none;
    border-right: 0 none;
    height: 20px;
}
.imgHolder {
    height: 250px;
    width: 250px;
    border: 1px dotted #CCCCCC;
    margin-bottom: 10px;
}
.imgHolder a {
    display: block;
    height: 100%;
}
.imgHolder:hover .btnDeleteAttPhoto, .imgHolder:hover .btnDeleteFollowUpAttPhoto {
    display: inline;
}
.imgHolder:hover .btnDeleteAttPhoto, .imgHolder:hover .btnDeleteFollowUpAttPhoto,
.imgHolder:hover .btnRotateLeftPhoto, .imgHolder:hover .btnRotateRightPhoto
{
    display: inline;
}
.btnRotateRightPhoto {
    margin-left: 2px;
}
input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block {
    width: 100%;
}
button.btn,input[type="submit"].btn {
    *padding-top: 3px;
    *padding-bottom: 3px;
}

button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button.btn.btn-large,input[type="submit"].btn.btn-large {
    *padding-top: 7px;
    *padding-bottom: 7px;
}

button.btn.btn-small,input[type="submit"].btn.btn-small {
    *padding-top: 3px;
    *padding-bottom: 3px;
}

button.btn.btn-mini,input[type="submit"].btn.btn-mini {
    *padding-top: 1px;
    *padding-bottom: 1px;
}