@import url("reset.css");
@import url("util.css");
@import url("icons.css");

html{
  position:relative;
  height:100%;
}

body{
  font-size:100%;
  font-family: sans-serif;
  padding:40px;
  padding-top:16px;
  border-top: 7px solid orangered;
  position:relative;
  height:100%;
}

pre{
  font-family: sans-serif;
  font-size: 0.9em;
}

.container{
  max-width:1140px;
  margin:auto;
}

.error{

  margin:0 0.5em;
  color: red;
}
/* COLOURS */
/* higher number = paler versions */
.blue0-bg{
  background-color:#045879;
}

.blue1-bg{
  background-color:#045879;
}

.blue2-bg{
  background-color:#4C889F;
}

.grey1-bg{
  background-color: #F1F2F2;
}

.eway-button span{
  font-family: Roboto !important;
  font-size:1.2em !important;

}


.modal-bg{
  display:none;
  position:absolute;
  background-color:rgba(0,0,0,0.75);
  width:100%;
  height:100%;
  z-index:1;
  left:0;
  top:0;
}

.modal{
  display:none;
  position:absolute;
  z-index:100000;
  background:#eee;
  padding:2em;
  top: 50%;
  left: 50%;
  width: 500px;
  margin-top: -250px; /* Half the height */
  margin-left: -250px; /* Half the width */
  border:4px solid orangered;
}

form{

}

/* STATUS */
span.alert{
  color:orangered;
  font-weight:bold;
}


/* HEADER */

.header-bar{
  margin-bottom:10px;
}


ul.nav{
  margin-top:1.5em;
  list-style-type: none;
  background:#eee;
  padding:0.5em 1em;

}

ul.nav li{
  display:inline-block;
  margin-right:1.3em;
}

ul.nav li:last-of-type{
  display:inline-block;
  margin-right:0;
}

ul.nav li a{
  color:orangered;
  font-family:Roboto;
  display:block;
  font-size:1.1em;
  font-weight:bold;
  text-decoration: none;
}




ul.nav li a.logout{
  color:#aaa;
}

ul.nav li a.search{
  color:orangered;
}

ul.nav li a.register{
  color:#045879;
}

ul.nav li a:hover{
  color:#1DA03D;
}


ul.nav.tech-bar{
  background-color: #4C889F;
  padding-right:20px;
  color:#fff;
}

ul.nav.tech-bar li a{
  color:#fff;
}



.footer{
  font-size:0.8em;
  letter-spacing:0.1em;
  color:grey;
  margin-top:3em;
}

/* STATUS BAR */

.status-bar{
  padding:25px 30px;
  background-color:#F1F2F2;
  margin:20px 0;
}

h3{
  margin-bottom:0.5em;
}

p{
  line-height:1.5;
}


.rep{
  position:absolute;
  text-align:center;
  font-size:2em;
  font-family:"Roboto Condensed";
  font-weight:700;
  color:#000;
  vertical-align: middle;
  left:50%;


}

.rep-star{
  width:88px;
  height:90px;
  display:inline-block;
  background-image:url('/img/star02.png');
  color:#000;
  vertical-align: middle;
  padding-top:33px;
  font-size:22px;
  text-align:center;
  letter-spacing: -0.01em;
  margin-top:-15px;
  position: relative;
  left:-50%;


}

/* PANEL */

.panel h2, .pay-line{
  font-size:1.5em;

  font-weight:normal;
  padding:7px 24px;
  display:inline-block;
  color:orangered;
  background-color:#F1F2F2;
  margin-top:2em;
}

.panel form, .panel > h2 + div{
  padding:24px;
  background-color:#F1F2F2;
}

.pay-line{
  background-color: transparent;
  color:#045879;
  padding-left:0;
  padding-top:0;
  margin-bottom:15px;
}

.price{
  text-align: right;
  width:80px;
}



/* JOB LISTS */
ul.job-list {
  list-style: none;
  margin-bottom:24px;
}

ul.job-list li{
  overflow:auto;
  position:relative;
  background:#fff;
  border: 1px solid #7FAABA;
  padding:10px 14px;
}

ul.job-list  div {
 display:inline-block;
 vertical-align: middle;
}

ul.job-list > li > div {

}

/* price container div */
ul.job-list > li > div + div {
 position: absolute;
 top:24px;
 right:24px;
}


/* job status */
ul.job-list > li > div > h2{
  padding:0;
  margin-bottom:4px;
  color:#637475;
  font-size:1.6em;
  font-weight:bold;
  background: none;
}

ul.job-list > li > div > h2 span{
  padding:0;
  margin-bottom:4px;
  color:#637475;
  font-size:0.8em;
  font-weight:normal;
  background: none;
}



/* job title */
ul.job-list > li > div > h3{
  font-family: "Roboto Condensed";
  padding:0;
  margin:0;
  color:#000;
  font-size:1.3em;
  font-weight:normal;
  background: none;
  background-image: url(/img/ico-expand.png);
  background-repeat: no-repeat;
  padding-left:24px;
  cursor:pointer;
}

ul.job-list > li > div > h3.open{
  background-image: url(/img/ico-collapse.png);
}

/* description */
ul.job-list > li > div > div{
  display:none;
  font-family:Roboto;
  margin-top:10px;
  padding-top:7px;
  line-height: 1.5;
  font-weight:300;
  color:#637475;
  border-top:1px solid #ddd;
}

ul.job-list > li > div > h3:hover{
  color:#637475;
}


/* job price */
ul.job-list > li > div > h4{
  font-family: "Roboto Condensed";
  padding:0;
  color:#000;
  font-size:1.6em;
  font-weight:bold;
  background: none;
}

/* job offer variations */

ul.job-offer > li > div > h2{
  color:#EF4136;
}

ul.job-offer > li{
  padding:0;
  border-bottom: 0;
}

ul.job-offer > li > div{
  padding:10px 14px;
}

/* price div */
ul.job-offer > li > div + div {
  padding-top:0;
  right:10px;
}



/* INVOICE TABLE */


table.invoice-header{
  width:auto;
  margin-bottom:1em;
}

table.invoice-header tr{
  border-bottom: 0;
}


table.invoice-header td, table.invoice-header th{
  padding:3px 0;
  font-size:1.2em;
  font-weight:bold;
  white-space: nowrap;
  width:auto;
  text-align:left;
}

table.invoice-header td:first-child{
  text-align: right;
  padding-right:0.5em;
}


.invoice-footer h2, .invoice-footer h3{
  margin:1em 0;
}

.result h2, .result h3{
  margin:1em 0;
}


/* JOB LIST TABLE */

table, td, th{
  padding:0;
  margin:0;
  border-collapse: collapse;
}

table{
  width:100%;

}

table.invoice{
  border-top: 4px solid #ddd;
}

tr{
  border-bottom: 1px solid #ddd;
}

tr.open{
  border-bottom:1px dotted lightgrey;
}


td, th{
  padding:14px ;
  font-size:1.1em;
  font-weight:normal;
  white-space: nowrap;
  width:20%;

}

th{
  font-weight:bold;
}

td >  img{
  vertical-align: middle;
}


td:first-of-type{
  padding-right:0;
}

td:last-of-type{

}


td > img.ico{
  margin-bottom:4px;
}


td.aging{
  color:red;
}


/* ICONS */

.ico-windows{
  background-image:url(/img/ico-windows.png);
}

.ico-apple{
  background-image:url(/img/ico-mac.png);
}

.ico-linux{
  background-image:url(/img/ico-linux.png);
}

.ico-android{
  background-image:url(/img/ico-android.png);
}

.ico-other{
  background-image:url(/img/ico-other.png);
}

/* BUTTONS */

.btn{
  font-family:"Roboto Condensed";
  border:0;
  padding:8px 15px;
  background-color:#aaa;
  color:#fff;
  font-size:1.5em;
  font-weight:bold;
  cursor:pointer;
  display:inline-block;
}

.btn-small{
  font-size:1.2em;
}

.btn-smaller{
    padding:4px 8px;
  font-size:1em;
}

.btn:hover{
  opacity:0.66;
}

.btn-pixel{
  box-shadow:
  8px 0 0 -4px  #aaa,
  -8px 0 0 -4px  #aaa
  ;
 }

.btn-pixel-red{
  background-color:orangered;
  box-shadow:
  8px 0 0 -4px  orangered,
  -8px 0 0 -4px  orangered
  ;
}

.btn-pixel-lightblue{
  background-color:#005576;
  box-shadow:
  8px 0 0 -4px  #005576,
  -8px 0 0 -4px  #005576
  ;
}

.btn-pixel-green{
  background-color:#1DA03D;
  box-shadow:
  8px 0 0 -4px  #1DA03D,
  -8px 0 0 -4px  #1DA03D
  ;
}

.btn-pixel-grey{
  background-color:#aaa;
  box-shadow:
  8px 0 0 -4px  #aaa,
  -8px 0 0 -4px  #aaa
  ;
}

.btn-orange{
  background-color:orangered;

}


.btn-login{
  color:#fff !important;
}



/* FONTS / TYPE / LINKS */

p > a, a{
  color:#1DA03D;
}

a.btn{
  text-decoration: none;
}


/* FORMS */


.col{
    width:45%;
    display: inline-block;
}

.admin form{
    margin:1em 0;
    border: 1px solid #eee;
    background-color: #f8f8f8;
    padding:1em;
}

.admin hr{
    border-bottom-color: #ddd;
}

label {
  display:inline-block;
  margin-bottom:1.1em;
  font-weight:normal;
  width:160px;
}

h2 label{
  margin:0;
  font-weight:normal !important;
}

label.checkbox, label.radio{
  display: inline-block;
  position: relative;
  padding-right:10px;
  font-weight:bold;
}

label.checkbox-icon{
  height:50px;
  padding-left:55px;
  padding-top:15px;
  background-repeat: no-repeat;
  cursor:pointer;
  border:1px solid transparent;
}

label.checkbox-icon:hover {
  border:1px solid lightgrey;
}

label.label-small{
  font-size:0.85em;
}

input[type="text"].small{
  width:88px;
}

input[type="radio"], input[type="checkbox"]{
  vertical-align: middle;
  display: inline-block;
  margin-right:10px;
  width:20px;
  height:20px;
  cursor:pointer;
}

input[type="text"],input[type="password"], select{
  display:inline-block;
   font-size:0.85em;
   border: 1px solid #4C889F;
   padding:5px 10px;
 width:250px ;
}

textarea, 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{
    padding:5px 10px;
    height:auto;
}

select{
  margin:0;
  display:inline-block;
}

textarea{
  font-family:"Roboto";
  font-size:1.1em;
  width:100%;
  height:150px;
  border: 1px solid #4C889F;
  padding:5px 10px;
  margin-bottom:15px;
  vertical-align:top;
}

textarea.small{
  font-family:"Roboto";
  font-size:0.85em;
  width:200px;
  height:150px;
  border: 1px solid #4C889F;
  padding:5px 10px;
  margin-bottom:15px;

}

textarea:hover, input[type="text"]:hover{
  box-shadow: 0 0 2px #4C889F;
}

label.error{
  font-size:12px;
  color:#DF4D02;
  font-weight:bold;
   vertical-align: baseline;
    width:auto;
}

form > h2.heading{
  font-size:1.1em;
  padding:5px 10px;
  background:#1DA03D;
  margin-top: 15px;
}

#detailsForm label{
  display:inline-block;
  font-weight:bold;
  width:200px;
}

/* LIST BOX IN PROFILE */

div.os-profile >  ul > li >  label.checkbox{
  background:0;
  height:auto;
  padding:0;
  margin:0;
    margin-bottom:10px;
  width:180px !important;
  font-weight:normal !important;
}

div.os-profile > ul{
  list-style: none;
  margin-bottom:15px;
}

div.os-profile > ul > li{
  display: inline-block;
}



/* !!!TODO: change to hyphen */
.fieldGroup{
  margin-top:30px;
}

.field-group{
  margin-top:30px;
}


.panel-verify .fieldGroup{
  margin-top:0;
  padding:30px;
  padding-bottom:15px;
  border:1px solid #1DA03D;
  background:#f7f7f7;
}

#detailsForm label.error{
  width:auto;
  margin-left:15px;
}

#skillList li{
  padding:0;
  padding-top:10px;
  position:relative;
}

#skillList li input{
  border-color:#dedede;
  background:#F1F2F2;
  margin-right:8px;
  border-radius:3px;
}

#skillList li div{
  z-index:1000;
  font-size:19px;
  position:absolute;
  top:10px;
  right:10px;
  opacity:0.2;
  cursor:pointer;
}

#skillList li div:hover{
  font-size:19px;
  position:absolute;
  top:10px;
  right:10px;
  opacity:0.5;
}

hr{
  clear:both;
  border:0;
  border-bottom:1px solid #4C889F;
  margin:15px 0;
  margin-bottom:25px;
}




/* JOB SEARCH*/
.bottom-spacer{
  margin-bottom:15px;
}

div.left-side-bar{
  float:left;
  width:250px;
  position:relative;
  z-index:10000;
}

div.job-search{
  display:inline-block;
  margin-left:-250px;
  padding-left:250px;
  width:100%;
  position:relative;
}

.job-search h2, .left-side-bar h2{
  margin-bottom:15px;
}

.job-search ul.job-list li div + div{
  float:right;
  position:absolute;
  display: inline-block;
  top:9px;
  right:15px;
}

.job-search ul.job-list li {
  margin-bottom:15px;
}

.job-search ul.job-list > li > div > h2{
  margin-right:30px;
  vertical-align:middle;
  display: inline-block;
}

.job-search ul.job-list > li > div > button{
  display: inline-block;
}


.job-search ul.job-list div.offer{
  float:none;
  display:none;
  clear:both;
  position:static;
  text-align:right;
  background:#F1F2F2;
  border:1px solid #aaa;
  padding:15px;
  margin-top:10px;
  margin-bottom:5px;
}

.job-search ul.job-list div.offer  input{
 width:70px;
}




.ajax-bg-wait{


  opacity: 0.5;
  background-image:url(/img/bg-loader.gif);
  color:#000;
  border:1px solid #000;
}


.filter li{
  list-style: none;
}

.filter li label{
  background:none;
  padding:0;
  height:auto;
  font-weight:normal;
  font-size:0.85em;
}