// Input LESS here, strike 'Ctrl|Command+Enter' to compile. /* Variables *********************************/ @color10: #F5F5F5; @color20: #F5F5F5; @unit: 20px; .display { display: inline-block; float: left; width: 100%; } .border-box { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; } .border-radius(@radius: 4px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; -o-border-radius: @radius; -ms-border-radius: @radius; } .transition (@time:0.2s) { transition: all @time ease-in-out; -webkit-transition: all @time ease-in-out; -moz-transition: all @time ease-in-out; -o-transition: all @time ease-in-out; -ms-transition: all @time ease-in-out; } .box-shadow (@x: 0; @y: 0; @blur: 10px; @color: rgba(0,0,0,0.75)) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; -o-box-shadow: @arguments; -ms-box-shadow: @arguments; } /* COLOR SCHEMES ****************************************************/ /* BLUE SCHEMES */ hr { border: 1px solid @color10; margin-bottom: 0; } .ps-desc h3 a, .modal-body ul li i, .agencies_meta i, .testimonial_desc p i, .testimonial_full p i, .agents_widget i, .callus i { color: @color10; } .fhmm .dropdown-menu > li > a:hover, .fhmm .dropdown-menu > li > a:focus, .searchmodule { background-color: @color10; } .nav-tabs li.active a { background-color: @color10; } .nav-tabs li.active a:focus { background-color: @color10; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, #help a, .hovicon.effect-1.sub-a:hover, .hovicon.effect-1.sub-a:hover i, .hovicon.effect-1, .hovicon.effect-1.sub-a:hover, .flex-direction-nav a, #tabbed_widget .nav-tabs > li > a:hover, #tabbed_widget .nav-tabs > li > a:active, #tabbed_widget .nav-tabs > li > a:focus, #tabbed_widget .nav-tabs > li.active > a, #tabbed_widget .nav-tabs > li.active > a:hover, #tabbed_widget .nav-tabs > li.active > a:focus, .navbar-blue .navbar-toggle:hover, .navbar-blue .navbar-toggle:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-blue, .boxes_img .box_type, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .ps-mini-desc .price, .blog-wrap div.post-date span.month, .ps-desc .price { background-color: @color10; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .topbar, .fhmm .dropdown-menu { border-top-color: @color10; } .post-wrapper-top h2 { border-bottom-color: @color10; } .navbar.affix { border-bottom:3px solid @color10 !important; } .hovicon.effect-1:after { box-shadow: 0 0 0 4px @color10; } .bs-glyphicons { padding-left: 0; padding-bottom: 1px; margin-bottom: 20px; list-style: none; overflow: hidden; } .bs-glyphicons li { float: left; width: 25%; height: 115px; padding: 10px; margin: 0 -1px -1px 0; font-size: 12px; line-height: 1.4; text-align: center; border: 1px solid #ddd; } .bs-glyphicons .glyphicon { display: block; margin: 5px auto 10px; font-size: 24px; } ul.the-icons li { list-style:none; } .property-features-wrapper ul li i {color: @color10;} /* DATE PICKER */ .datepicker .day.active, .datepicker .prev.active, .datepicker .next.active, .datepicker .month.active, .datepicker .year.active { background-color: @color10; color: #ffffff; } .datepicker .month:hover, .datepicker .year:hover, .datepicker .day:hover, .datepicker .prev:hover, .datepicker .next:hover { background-color: @color10; color: #ffffff; } .chosen-container-active .chosen-choices { border: 1px solid @color10 !important; } .chosen-container .chosen-results li.highlighted { background-color: @color10 !important; background-image: none !important; } /* ORANGE SCHEMES */ a, .panel-title i, .check li:before, .ps-desc h3 a:hover, .widget h3 i, .widget ul.tweet li a, div.popup ul li a:hover, div.popup ul li a:focus, div.popup ul li a:active { color: @color20; } .nav-tabs li a { background-color: @color20; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled], mark, #support a, .bs-glyphicons li:hover, .boxes_img .status_type, .ps-mini-desc .status, .ps-desc .status, .pricing-table > .price .name, ul.real-estate-cats-widget li ul li:before { background-color: @color20; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .form-control:focus, .gform_wrapper select:focus, .gform_wrapper input:focus, ul.real-estate-cats-widget li ul { border-color:@color20 } .btn-primary { background: @color20 !important; border-color: @color20 !important; } .btn-primary:active, .btn-primary.active { background-color: @color20 !important; } /* Gravity Forms */ .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type="submit"] { background: @color20 none repeat scroll 0 0 !important; border-color: @color20; } /* Results filters *****************************************************/ .view-mode ul li a, .sort ul li a { color: @color20; } /* Start Styles *****************************************************/ form { .btn-group, .btn-group-vertical { width: 100%; } button { width: 100%; } .btn .caret { float: right; display: inline-block; margin-top: 10px; } } form.form { margin: 0; input, textarea, select, .chosen-container { .border-box; display: inline-block; float: left; position: relative; height: 40px; padding: 0 5px; margin: 0; border: 3px solid @color10; outline: 0; vertical-align: middle; .box-shadow(0;0;0;rgba(0,0,0,0)); margin-bottom: 10px; background: #FFFFFF; font-family: inherit; font-size: inherit; line-height: inherit; }/* input textarea select */ textarea { padding-bottom: 0 !important; } textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { color: #000; } /*Styles for Placeholder*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #000; opacity: 1; } input:-moz-placeholder, textarea:-moz-placeholder { color: #000; opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { color: #000; opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #000; opacity: 1; } .col-lg-12.col-md-12.col-sm-12.col-xs-12 { padding: 0; } button { font-size: 16px; height: 40px; line-height: 40px; .border-radius(4px); background: darken(@color10, 10%); color: #FFF; border: none; .box-shadow(0;0;0;#000); } } /* Custom Check box *********************************/ .custom-form { @input-height: 24px; label.custom-label { .display; width: 50%; margin-bottom: @unit; font-size: 20px; font-weight: 200; line-height: @unit *1.2; cursor: pointer !important; color: #000; } input[type=radio] { display: none; } input[type=radio] + span { .border-radius(200px); .border-box; .display; .transition; position: relative; width: @input-height; height: @input-height; text-align: center; line-height: @input-height; font-size: 12px; background-color: transparent; border: 1px solid #FFF; margin-right: @unit /2; color: transparent; &:before { position: absolute; top: 50%; margin-top: -12px; left: 50%; margin-left: -6px; text-align: center; opacity: 0; } } input[type=radio]:checked + span { /*background-color: @color10;*/ color: @color10; border: 12px solid #FFFFFF; &:before { opacity: 1; } } } .custom-form-2 { input[type=radio] + span { border: 1px solid @color10; } input[type=radio]:checked + span { /*background-color: @color10;*/ color: #FFF; border: 12px solid @color10; &:before { opacity: 1; } } } .overlay1 { background-color: transparent; } /* RESPONSIVE DESIGN *****************************************************/ /* DESKTOP */ @media (min-width: 1200px) { } /* LEPTOP */ @media (min-width: 979px) and (max-width: 1200px) { } /* TABLET */ @media (min-width: 768px) and (max-width: 979px) { } /* MOBILE */ @media (max-width: 767px) { }