@import url('jquery.Jcrop.min.css');
html,
body {
    height: 100%;
}
body:not(#blank){
    background: url("http://cdn.seemynewvehicle.com/assets/images/core/smnv-header-557x60_w_background.png") no-repeat scroll 50% 0 transparent;

}
#header{
    padding: 6px;
    color: #FFF;
}
.loading{
    background: url(http://cdn.seemynewvehicle.com/assets/images/core/loading-square-circles.gif) no-repeat 50% 50%;
}
.l-overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(http://cdn.seemynewvehicle.com/assets/images/core/loading.gif) no-repeat 50% 50%;
    background-color: #CCC;
    opacity:0.5;
    z-index: 20;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}
.image{
    text-align: center;
    position: relative;
}

#dropboxcontainer .zones{
    position: relative;
    margin: 0px auto;
    border: 2px dashed silver; 
    width: 170px;
    height: 90px;
    background-color: #FFF;
}
#dropboxcontainer .zones:first-of-type {
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
    margin-bottom: 5px;
}
#dropboxcontainer .zones:last-child {
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    margin-top: 5px;
} 
#dropboxcontainer .zones .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    opacity:0.5;
    z-index: 300;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    background-color: #000;
}
#dropboxcontainer .over .overlay{
    width: 100%;
    height: 100%;
}
#dropbox_photo{
    background: url(http://cdn.seemynewvehicle.com/assets/images/core/bg_photo_drop_s.png) no-repeat 50% 50%;
}
#dropbox_card{
    background: url(http://cdn.seemynewvehicle.com/assets/images/core/bg_datacard_drop_s.png) no-repeat 50% 50%;
}
#dropbox_data{
    background: url(http://cdn.seemynewvehicle.com/assets/images/core/bg_data_drop_s.png) no-repeat 50% 50%;
}

form .group{
    margin-top: 2px;
}
#form_customer_info input{
    text-transform: uppercase;
}
.details label{
    min-width: 120px;
}
.tab-content{
    min-height: 380px;
}
#card_thumbs{
    position: absolute;
    width: 100%;
    bottom:0px;
    left: 0px;
}
#card_thumbs div.large{
    position: absolute;
    height: 300px;
    min-width: 300px;
    top: -300px;   
}
#photo_card{
    width: 100%;
}
.thumb{
    z-index: 300;
    float: left;
    height: 60px;
}
.thumb>img{
    height: 60px;
}

.photo .thumb{
    position: absolute;
    top:10px;
    right: 10px;
}

/* New Table Setup */
tr,td{
    position: relative;
}
td[name=pic]{ 
    min-height: 48px;
}
td[name=pic]>div>.source{
    max-height: 48px;
    overflow: hidden;
}
td[name=pic]>div{
    position: relative;
    width: 48px; 
}
td[name=pic] > div > div.large{
    position: absolute;
    top: 0%;;
    left: 98%;
    width: 300px;
    height: 300px;
    z-index: 300;
}

.edit-image,.row-options,.alt-row-options, .large .options,.notes>div{

    border: 1px solid #000;
    padding: 2px 6px;
    background-color: #FFF;
}
.edit-image,.row-options,.alt-row-options, .large .options{
    position: absolute;
}
.edit-image,.large{
    top: 5px;
    left: 5px;
}

.row-options,.alt-row-options{
    width: 320px;
    left: 200px;
}

a.notes span{
    font-size: 11px;
}
.notes>div{
    width: 200px;
    font-size: 11px;    
}
a.notes{
    font-size: 10px; 
}
.photolist{
    font-size: 12px;
}
td.status{
    width: 68px; 
}
tr.success .row-options,tr.warning .row-options{

}
tr.droppable-active td[name=name]{
    border: 2px solid #006dcc;
}
.options{
    z-index: 350;
}
.row-options a{
    display: block;  
    float: left;
    padding: 2px 6px;
}
.extras{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity:0.70;
    filter:alpha(opacity=70); /* For IE8 and earlier */ 
}

.extras .remove{
    float: right;
}
.required_fields{

}
.deleted{
    background: url(http://cdn.seemynewvehicle.com/assets/images/bg/bg_status_deleted.png) no-repeat left top;
}
.confirmed{
    background: url(http://cdn.seemynewvehicle.com/assets/images/bg/bg_status_confirmed.png) no-repeat left top;
}
.deleted td.status{
    background: url(http://cdn.seemynewvehicle.com/assets/images/bg/bg_photo_status_deleted.png) no-repeat 50% 10%;
}
.confirmed td.status{
    background: url(http://cdn.seemynewvehicle.com/assets/images/bg/bg_photo_status_confirmed.png) no-repeat 50% 10%;
}

#image-editor{
    width: 800px;
    min-height: 480px;
}
.info-card{
    position:absolute;
    right:15px;
    border: 1px solid silver;
}
.info-card .options{
    width: 100%;   
}
/* info card maximized */
.info-card-large{
    width: 400px;
    top:15px;    
}
.info-card-large .options .maximize{
    display: none;
}
.info-card-large .image-small{
    display: none;
}

/* info card minimized */
.info-card-small{
    width: 64px;
    bottom:15px;
}
.info-card-small .options{
    top: 5px;
}
.info-card-small .options .minimize,.info-card-small .options .remove{
    display: none;
}
.info-card-small .image-large{
    display: none;
}
.info-card .options .remove{
    float: right;
}

.header span{
    padding-left: 11px; 
}
.header span a{
    padding-left: 3px;
    font-size: 12px;
}

/* New Zones */
#dropzones>div{
    position: relative;
    width: 180px;
    height: 180px;
    border: 1px solid #bbb6b6;
    margin: 5px auto;
}
#dropzones>div.hover form{

}
#dropzones>div>form{
    width: 180px;
    height: 180px;
    margin: 0px;
    padding: 0px;
}
#dropzones>div>form.drag-hover,#dropzones>div.hover form{
    background: url(http://cdn.seemynewvehicle.com/assets/images/bg/bg_overlay_500x500.png) no-repeat 50% 50%;
}
#zone_photo{
    background: url(http://cdn.seemynewvehicle.com/assets/images/bg/bg_zone_photos.png) no-repeat 50% 50%;
}
#zone_data{
    background: url(http://cdn.seemynewvehicle.com/assets/images/bg/bg_zone_data.png) no-repeat 50% 50%;
}
#zone_cards{
    background: url(http://cdn.seemynewvehicle.com/assets/images/bg/bg_zone_cards.png) no-repeat 50% 50%;
}
#previews_container{
    position: absolute;
    width: 160px;
    padding: 5px;
    margin-left: -100px;
    background-color: #FFF;
}

.preview .details .filename,.preview .details .size{
    width: 45%;
    float: left;
    font-size: 11px;
}
.preview .success-mark,.preview .error-mark,.preview .error-message{
    display: none;
}
.preview  .progress{
    clear: both;
}
#photo_container{
    margin-bottom: 70px;
}

#cards .display_tab {
    cursor: pointer;
}

#cards{
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0px;
    margin-bottom: -70px;
}
#cards .thumbs {
    background-color: whitesmoke;
    border: 1px solid silver;
    clear: both;
    height: 60px;
    padding: 4px;
}
#cards .thumb {
    border: 1px solid silver;
    float: right;
    margin: 0 3px;
}

.imgedit{
    position: relative;
    min-width: 400px;
    min-height: 400px;
}
.imgedit img{
    max-width: 100%;
}
.imgedit .options{
    position: absolute;
    border: 1px solid silver;
    background: white;
    padding: 3px;
    top: -40px;
    left: 10px;
}
tr.data-row{
    cursor: pointer;
}
.red {
	color: red;
}