/* 
    Created on : 14.8.2014, 22:55:
    Author     : Nenad Jovanovski
*/
/* DEFAULTS */
* { 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
}
html { 
    font-size: 100%; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}
body, html, div, ul, li, input { margin:0; padding:0; font: normal 400 13px/18px 'Roboto', sans-serif;  }
a:focus { outline: thin dotted; }
a:hover { text-decoration:underline; outline: 0; }
a:active { outline: 0; }
ul { list-style: none;}
li { vertical-align: top; }

b, strong { font-weight: bold; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: top; }
pre { word-wrap: break-word; font:normal normal 500 13px/18px 'Roboto', sans-serif; color: #666;  }
svg:not(:root) { overflow: hidden; }
form { margin: 0; }
button, input, select, textarea { 
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}
button, input { line-height: normal; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
select, input[type=text], input[type=search], textarea {
    width: 100%;
    background: 0;
	padding: 4px;
	border: 1px solid #D0D0D0;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
	outline-color: #2297E0;
}
/* LAYOUT */
.clear { clear: both; }
.row {
    width: 100%;
    clear: both;
    float: left;
}
.fullheight { height: 100%; }
.fullwidth { width: 100%; float: left; }
.block-90 { width: 90%; float: left; }
.block-80 { width: 80%; float: left; }
.block-70 { width: 70%; float: left; }
.block-60 { width: 60%; float: left; }
.block-50 { width: 50%; float: left; }
.block-40 { width: 40%; float: left; }
.block-30 { width: 30%; float: left; }
.block-20 { width: 20%; float: left; }
.block-10 { width: 10%; float: left; }

.fw-row {
    clear: both;
    margin: 0 -10px 0 -10px;
}
.fw-row:after,
.fw-row:before {
    content: '';
    clear: both;
    display: block;
}
.col-12,
.col-6,
.col-4,
.col-3,
.col-2,
.col-1 {
    padding: 0 10px;
    box-sizing: border-box;
    float: left;
}
.col-12 {
    width: 100%;
}
.col-6 {
    width: 50%;
}
.col-4 {
    width: 33.33333%;
}
.col-3 {
    width: 25%;
}
.col-2 {
    width: 16.66666%;
}
.col-1 {
    width: 8.333333%;
}
.text-right { text-align: right; }
.text-center { text-align: center; }
.align-left { float: left; }
.align-right { float: right; }

.approved {
    display: block;
    background: #4CAF50;
    color: #fff;
    padding: 3px 10px;
    border-radius: 2px;
}
.not-approved {
    display: block;
    background: #f44336;
    color: #fff;
    padding: 3px 10px;
    border-radius: 2px;
}

.pending-aproval {
    display: block;
    background: #ffd100;
    color: #ff0000;
    padding: 3px 10px;
    border-radius: 2px;
}

/* ELEMENTS */
button, .btn {
    background: #4bafff;
    color: #fff;
    border: none;
    padding: 4px 15px;
    border-bottom: 2px solid rgb(48, 150, 232);
    cursor: pointer;
    font: normal 500 12px/18px 'Roboto', sans-serif;
    position: relative;
    outline: none;
    display: inline-block;
    text-decoration: none;
}
button:hover, .btn:hover {
    background: rgb(61, 161, 241);
    text-decoration: none;
}
button:active, .btn:active {
    border-bottom: none;
    top: 2px;
    outline: none;
}

.btn-red {
    background: #F44336;
    border-bottom-color: #da2c1f;
}
.btn-red:hover {
    background: #e6372a;
}

.btn-header {
    float: right;
    margin: 0 10px 0 0;
    background: #585858;
    border-bottom: 2px solid #4a4a4a;
}
.btn-header:hover {
    background: #4a4a4a;
}