/*===================== Variable =====================*/

/*=== Grid & Layout ===*/
@grid-columns: 12;
@grid-gutter: 30px;
@sub-top-menu-width: 200px;
@sub-menu-width: 250px;
@layout-width: 1110px;
@menu-height: 56px;
@menu-togger-size: 56px;

/*=== Font face ===*/
@typo-fontface:'PT Serif', serif;

/*=== Color === */
@scheme: #cba860;
@black: #000;
@white: #fff;
@grey: #ccc;
@blue: #009eca;
@green: #a0ce4e;
@red: #e74c3c;
@dark: #333;
@light: #ddd;
@orange: #f6ba70;
@lightblue: #58c5c0;
@darkblue: #42555c;
@headerbar-color: #666;
@sitebrand-color: #999;

/*=== Background Color ===*/
@body-background: #fff;
@headerbar-background: #222;
@sitebrand-background: #333;
@sub-menu-background: #2a2a2a;
@sitefooter-background:#222;

.rounded (@radius:0px) {
	-webkit-border-radius: @radius;
 	   -moz-border-radius: @radius;
	    -ms-border-radius: @radius;
	     -o-border-radius: @radius;
	        border-radius: @radius;
}
.transition (@transition: all 0.2s ease-in-out 0s)  {
	-webkit-transition: @transition;
	   -moz-transition: @transition;
	    -ms-transition: @transition;
	     -o-transition: @transition;
	        transition: @transition;
}
.box-shadow(@arguments:0 2px 3px rgba(0, 0, 0, 0.1)) {
    -webkit-box-shadow: @arguments;
       -moz-box-shadow: @arguments;
        -ms-box-shadow: @arguments;
         -o-box-shadow: @arguments;
            box-shadow: @arguments;
}
.opacity(@opacity: 0.5) {
	-webkit-opacity: @opacity;
	 -khtml-opacity: @opacity;
       -moz-opacity: @opacity;
            opacity: @opacity;
            @opperc: @opacity * 100;
            -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
                filter: ~"alpha(opacity=@{opperc})";
}