/* MINIMUM RESET - based on work by Eric Meyer ------------------------------------------------------------------ */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {border:0;font-size:100%;margin:0;outline:0;padding:0} body {line-height:1} ol,ul {list-style:none} blockquote,q {quotes:none} blockquote:before,blockquote:after,q:before,q:after {content:''} /* CLEAR FIX ------------------------------------------------------------------- */ .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix {display:inline-block} * html .clearfix {height:1%} *+html .clearfix {height:1%} .clearfix {display:block} /* GENERAL STYLE ------------------------------------------------------------------- */ body {font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:150%;color:#333;background:#f3f3f3} a:link,a:visited {color:#06c} a:hover {color:#f30} a img {border:0 none} small {font-size:90%;line-height:150%} #wrap {width:90%;min-width:960px;max-width:1150px;margin:20px auto 0;position:relative;background:#fff;border:10px solid #fff;} #header {background:#fff;position:relative} #header h1 a {display:inline-block;font-size:24px;color:#333;text-decoration:none;padding:0 20px;height:50px;line-height:50px;margin:0} #header .welcome {color:#fff;position:absolute;top:4px;right:20px} #vps h1 {font-size:18px;margin:0 0 10px;padding:5px 10px;text-transform:uppercase} h2 {font-size:21px;margin:0 0 10px;padding:0 10px 5px;border-bottom:1px solid #fff} h2 small {font-weight:normal;font-size:14px;margin-left:10px} h3 {font-size:14px;margin:20px 0 3px} p {padding:2px 0} .button {padding:2px 5px;margin-right:5px;background-repeat:no-repeat;background-position:3px 50%;background-color:#eee;border:1px solid;border-color:#ddd #ccc #ccc #ddd;text-decoration:none;color:#333} .button:hover {background-color:#fff;border:1px solid #deded9;cursor:pointer} .button:active {background-color:#ddd;border-color:#bbb #ddd #ddd #bbb;padding:2px 4px 2px 6px} /* LOGIN ------------------------------------------------------------------- */ #login_box {width:315px;margin:180px auto} #login_box fieldset {padding:20px 30px} #login_box legend.error {color:#c00} #login_box fieldset p {padding:15px 0 0;height:30px} #login_box fieldset input,#login_box fieldset button {float:right;} #login_box fieldset label {width:auto;} /* LIVE SEARCH ------------------------------------------------------------------- */ #livesearch {position:absolute;right:10px;top:5px} #searchterm {border-color:#aaa;font-size:14px;font-weight:bold;line-height:18px;height:18px;margin-right:10px;background:#fff;} #searchterm:hover {background:#ffc;border-color:#666} #searchterm:focus {background:#fff;border-color:#000} #search-suggestions-wrap {position:absolute;right:0;top:30px;z-index:999} #search-suggestions {background:#fff;border:1px solid #222;margin:0;padding:12px;position:relative;} #search-suggestions table {width:100%} #search-suggestions td {padding:0 2%;vertical-align:top} #search-suggestions td h3 {text-align:left;padding:5px 2px;margin:0;} #search-suggestions td ol {line-height:120%;text-align:left;margin:0} #search-suggestions td ol li {position:relative;padding:4px 2px;white-space:nowrap;overflow:hidden;} #search-suggestions td ol li img {display:block;float:left} #search-suggestions p {padding:10px 2px 0;color:#c00;font-size:90%;font-weight:bold;} #search-suggestions a {color:#222;text-decoration:none;border-bottom:1px dotted #aaa;} #search-suggestions a:hover {color:#06c;border-bottom:1px solid #06c;} #search-close {width:24px;height:24px;background:url('../img/close-search.png') no-repeat 50%;text-indent:-9999px;cursor:pointer;position:absolute;right:12px;} /* NAVIGATION ------------------------------------------------------------------- */ #nav {float:right;margin-right:10px} #nav li {display:block;float:left} #nav li a {display:block;float:left;padding:5px 10px 5px 30px;color:#222;margin:0 1px;font-weight:bold;text-decoration:none;background-repeat:no-repeat;background-position:7px 5px} #nav li a.active:hover, #nav li a.active {background-color:#eef;border:1px solid #acf;border-bottom:0 none;margin-bottom:-1px} #nav li a:hover {background-color:#eee;color:#222} #nav li.inicio a {background-image:url('../img/home-medium.png')} #nav li.clientes a {background-image:url('../img/user.png')} #nav li.viaturas a {background-image:url('../img/truck-empty.png')} #nav li.servicos a {background-image:url('../img/gear.png')} #nav li.emails a {background-image:url('../img/mails.png')} #nav li.faxes a {background-image:url('../img/telephone-fax.png')} #nav li.vps a {background-image:url('../img/calendar-task.png')} #nav li.logout a {background-image:url('../img/control-power.png')} #nav li.logout a:hover {background-color:#c00;color:#fff;} .topbuttons {padding-left:10px;height:30px;background:#eef;border:1px solid #acf;margin:0 0 20px;} .topbuttons a {font-weight:bold;font-size:90%;display:block;float:left;padding:2px 6px 2px 24px;background-repeat:no-repeat;background-position:4px 50%;text-decoration:none;color:#333;margin:4px 5px 0 0;} .topbuttons a:hover {background-color:#06c;color:#fff !important} .topbuttons a:active {background-color:#acf !important;padding:3px 5px 1px 25px} .topbuttons a.list {background-image:url('../img/list.png')} .topbuttons a.add {background-image:url('../img/add.png')} .topbuttons a.car {background-image:url('../img/truck-empty.png')} .topbuttons a.tac {background-image:url('../img/clock.png')} .topbuttons a.edit {background-image:url('../img/edit.png')} .topbuttons a.print {background-image:url('../img/print-16.png')} .topbuttons a.vps {background-image:url('../img/calendar-task.png')} .topbuttons a.emails {background-image:url('../img/mails.png')} .topbuttons a.fax {background-image:url('../img/telephone-fax.png')} .topbuttons a.servico {background-image:url('../img/gear.png')} .topbuttons a.delete {background-image:url('../img/delete.png');color:#c00} .topbuttons a.delete:hover {background-image:url('../img/delete.png');color:#fff;background-color:#c00 !important;} .toolbox {float:right;margin:0 5px 10px;text-align:right} /* TABLES ------------------------------------------------------------------- */ .datagrid {margin:0 0 10px;border:1px solid #ddd;border-width:0 1px;width:100%;background:#fff;display:none;} .datagrid a {text-decoration:none;color:#333;border-bottom:1px dotted #aaa} .datagrid td {} .datagrid td .tools {visibility:hidden;float:right} .datagrid tr:hover td .tools {visibility:visible} tr.vp_expirada td:first-child {padding-left:26px;background-image:url('../img/exclamation-red.png');background-repeat:no-repeat;background-position:3px 5px} tr.vp_a_expirar td:first-child {padding-left:26px;background-image:url('../img/exclamation-yellow.png');background-repeat:no-repeat;background-position:3px 5px} tr.vp_proxima td:first-child {padding-left:26px;background-image:url('../img/tick-small.png');background-repeat:no-repeat;background-position:3px 5px} /* FOOTER ------------------------------------------------------------------- */ #footer {font-size:11px;text-align:right;margin:0 auto;color:#666;padding:5px 0;width:90%;min-width:960px;max-width:1150px;margin:0 auto 20px;} /* COLUNAS ------------------------------------------------------------------- */ .right-col-wrap {width:60%;float:right;right:0} .left-col-wrap {padding:20px 2%;position:relative;float:left;width:35%;background:#fff;border:1px solid #deded9;} .left-col-wrap h3 {margin-top:0} .left-col-wrap hr {border:0 none;margin:15px 0;} .left-col-wrap table td {padding:3px 15px 3px 5px;min-width:50px;background:#f7f7f2;border-bottom:1px solid #deded9;font-weight:bold} .left-col-wrap table td:first-child {background:transparent;font-weight:normal;padding-left:0} /* APRESENTAÇÃO DAS VPS ------------------------------------------------------------------- */ .vps-wrap {clear:both;margin:0 0 20px;border:1px solid #deded9;padding:10px;background:#fff;position:relative} .vps-wrap h3 {margin:0 0 10px} .vps-wrap h3 img {vertical-align:text-bottom;margin-right:6px} .vps-wrap h3 small {font-size:11px;color:#333;font-weight:normal;margin:0 0 0 20px} .vps-wrap table {width:88%;font-size:12px} .vps-wrap table td {padding:5px 3px;border-top:1px solid #f3f3f0} .vps-wrap table tr:hover td {background:#ffffe5} .vps-wrap .tools {width:100px;position:absolute;top:10px;right:10px} .vps-wrap .tools span {float:left;width:50%} .vps-wrap .tools a {padding:10px;margin:1px;display:block;border:1px solid #fff;position:relative;} .vps-wrap .tools a:hover{background:#ffffe5;border:1px solid #fea;padding:9px 10px 11px} .vps-wrap .tools .email {float:left} .vps-wrap .tools .fax {float:right} .vps-wrap .tools .enviado {background:#e0febf url('../img/tick.png') no-repeat 50% 50%;display:block;width:44px;height:44px;text-indent:-9999px;border:1px solid #9c3;margin:1px} .vps-wrap .tools .loading {background:#ffffe5 url('../img/ajax-loader.gif') no-repeat 50% 50%;display:block;width:44px;height:44px;text-indent:-9999px;border:1px solid #fea;margin:1px} .vps-wrap .icon-sent {width:16px !important;height:16px;background:url('../img/tick-circle-frame.png') no-repeat;position:absolute;bottom:3px;right:3px;z-index:5;text-indent:-9999px} .vps-wrap p {width:86%;clear:both;font-weight:bold;padding:5px 0;border-top:1px solid #f3f3f0;margin:10px 0 0 2%} .vps-wrap ul.nextmonth {width:88%;display:block;clear:both;font-size:90%;margin-left:2%} .vps-wrap .nextmonth li {display:inline-block;width:31%;line-height:140%;border-top:1px solid #f3f3f0;padding:.2% .5%;margin:0 .5% 0 0} .vps-wrap .nextmonth li:hover {background:#ffffe5} #dateSelector {float:right;margin-right:10px;margin-top:6px;} /* FORMS ------------------------------------------------------------------- */ fieldset {padding:10px;border:1px solid #deded9;background:#fff;margin:0 0 20px} legend {font-size:12px;text-transform:uppercase;padding:5px 10px;font-weight:bold;border:1px solid #deded9;background:#fff} label {display:block;float:left;padding:3px 0;width:100px} label.error {display:inline;float:none;padding:3px 0;width:50%;color:#c00;font-weight:bold;margin-left:10px;} input,textarea {margin:2px 0;border:1px solid #deded9;padding:3px 2px;font-family:Helvetica,Arial,sans-serif;font-size:12px} input:focus,textarea:focus {border:1px solid #fa0} input.ui-autocomplete-input {padding:6px 2px;width:275px} ul.ui-autocomplete {max-height:300px;overflow-y:scroll} fieldset input,textarea {width:300px;padding:4px;} fieldset textarea {height:150px;} textarea.required.error, input.required.error {border-color:#d00;} #validarMatricula span {color:#c00; margin-left:10px;font-weight:bold;padding:2px 0 2px 24px;background:url('../img/exclamation-yellow.png') no-repeat left;} /* select#data {font-size:12px;font-weight:bold;padding:0 3px;margin-right:5px;background-repeat:no-repeat;background-position:3px 50%;background-color:#eee;border:1px solid #ccc;text-decoration:none;color:#333;-moz-border-radius:4px} select#data option {padding:3px 0 0} */ /* TipTip CSS - Version 1.2 ------------------------------------------------------------------- */ #tiptip_holder {display:none;position:absolute;top:0;left:3px;z-index:99999} #tiptip_holder.tip_top {padding-bottom:5px} #tiptip_holder.tip_bottom {padding-top:5px} #tiptip_holder.tip_right {padding-left:5px} #tiptip_holder.tip_left {padding-right:5px} #tiptip_content {font-size:12px;color:#fff;text-shadow:0 0 2px #000;padding:3px 8px;background-color:rgb(25,25,25);background-color:rgba(25,25,25,0.92);background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(transparent),to(#000))} #tiptip_arrow,#tiptip_arrow_inner {position:absolute;border-color:transparent;border-style:solid;border-width:6px;height:0;width:0} #tiptip_holder.tip_top #tiptip_arrow {border-top-color:#fff;border-top-color:rgba(255,255,255,0.35)} #tiptip_holder.tip_bottom #tiptip_arrow {border-bottom-color:#fff;border-bottom-color:rgba(255,255,255,0.35)} #tiptip_holder.tip_right #tiptip_arrow {border-right-color:#fff;border-right-color:rgba(255,255,255,0.35)} #tiptip_holder.tip_left #tiptip_arrow {border-left-color:#fff;border-left-color:rgba(255,255,255,0.35)} #tiptip_holder.tip_top #tiptip_arrow_inner {margin-top:-7px;margin-left:-6px;border-top-color:rgb(25,25,25);border-top-color:rgba(25,25,25,0.92)} #tiptip_holder.tip_bottom #tiptip_arrow_inner {margin-top:-5px;margin-left:-6px;border-bottom-color:rgb(25,25,25);border-bottom-color:rgba(25,25,25,0.92)} #tiptip_holder.tip_right #tiptip_arrow_inner {margin-top:-6px;margin-left:-5px;border-right-color:rgb(25,25,25);border-right-color:rgba(25,25,25,0.92)} #tiptip_holder.tip_left #tiptip_arrow_inner {margin-top:-6px;margin-left:-7px;border-left-color:rgb(25,25,25);border-left-color:rgba(25,25,25,0.92)} /* Webkit Hacks */ @media screen and (-webkit-min-device-pixel-ratio:0) { #tiptip_content {padding:4px 8px 5px 8px;background-color:rgba(45,45,45,0.88)} #tiptip_holder.tip_bottom #tiptip_arrow_inner {border-bottom-color:rgba(45,45,45,0.88)} #tiptip_holder.tip_top #tiptip_arrow_inner {border-top-color:rgba(20,20,20,0.92)} } /* Rounded borders + Shadows ------------------------------------------------------------------- */ .button, .topbuttons a, .left-col-wrap, .datagrid, .vps-wrap, fieldset, legend, #tiptip_content, #search-suggestions, .topbuttons {-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px} input, textarea {-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} #nav li a {-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0} .vps-wrap .tools a, .vps-wrap .tools .enviado, .vps-wrap .tools .loading, #wrap {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px} input:focus, textarea:focus {-moz-box-shadow:0 0 4px #ff0;} /* Printing styles ------------------------------------------------------------------- */ @media screen { .print-wrap { display:none; } } @media print { .print-wrap {display:block;} .print-wrap h2 {padding:0;margin:0;} .noprint {display:none;} table.print td { padding:3px 5px;border-bottom:1px solid #ccc;} table.print th {text-align:left;padding:3px 5px;text-transform:uppercase;} body {background:#fff;} #wrap {width:auto;margin:0;min-width:10%;max-width:100%;} #header, #dateSelector, a.print, .topbuttons, .vps-wrap .tools, #footer {display:none} .vps-wrap table {width:100%} .vps-wrap table td {border-top:1px dotted #000} .vps-wrap {background:#fff;border:.1pt solid #999;page-break-before:auto} #vps-print h2 {clear:both;} #vps-print table {page-break-before:auto;} #vps-print table td {padding:2px 0;border-bottom:1px solid #ccc;} }