File: /home/iestorre/www/templates/it_zen/assets/less/layout.less
/*********************************************************************************/
/* General */
/*********************************************************************************/
body {
overflow-x: hidden;
background-color:@bg_body;
}
.container {
min-width:240px;
}
@media (max-width: 979px) {
body .visible-phone {
display: inherit !important;
}
}
/*********************************************************************************/
/* HEADER */
/*********************************************************************************/
#topbar {
background:@bg_light;
border-bottom:1px solid darken(@bg_light,5%);
#topmenu {
margin: 5px 0;
text-align:right;
ul {
margin-bottom:0;
padding:0 0;
li {
display:inline-block;
margin:0 0 0 30px;
line-height:normal;
position:relative;
&:after {
content:"/";
color: #ccc;
position: absolute;
top: 0;
left: -15px;
}
&:first-child:after {
display:none;
}
a {
font-size:13px;
color: @text_color;
.transition();
&:hover,
&:focus {
background:none;
color: #111;
text-decoration: none;
}
}
}
}
}
#language {
margin:5px 0 0 15px;
}
p.welcome_site {
margin:5px 0;
font-size:13px;
font-style: italic;
color: @grayLight;
}
}
#header {
padding: 15px 0 0;
&.no_slideshow {
margin-bottom:35px;
border-bottom:5px solid lighten(@bg_primary,0%);
}
#logo {
text-align: center;
padding: 20px 0 15px;
-webkit-animation: LOGO 1s 1;
-moz-animation: LOGO 1s 1;
-o-animation: LOGO 1s 1;
animation: LOGO 1s 1;
}
.search_icon {
display:inline-block;
width:25px;
height:25px;
background: url("../images/icon_search.png") no-repeat center;
margin: 0;
vertical-align:middle;
opacity:.75;
.transition();
&:hover {
opacity:1;
}
span {
display:none;
}
}
}
@media (min-width: 767px) {
#searchModal.modal {
width:420px;
margin-left:-210px;
.modal-body {
padding: 15px;
width: auto;
}
}
}
@-webkit-keyframes LOGO {
0% { .scale(.5); opacity:0; }
100% { .scale(1); opacity:1; }
}
@-moz-keyframes LOGO {
0% { .scale(.5); opacity:0; }
100% { .scale(1); opacity:1; }
}
@-o-keyframes LOGO {
0% { .scale(.5); opacity:0; }
100% { .scale(1); opacity:1; }
}
@keyframes LOGO {
0% { .scale(.5); opacity:0; }
100% { .scale(1); opacity:1; }
}
/*********************************************************************************/
/* CONTENT */
/*********************************************************************************/
#content {
position:relative;
padding: 0;
margin:0;
#content_inner {
margin-bottom:60px;
}
#middlecol {
&.sidebar_left {float: right;}
&.sidebar_right {}
}
#sidebar {
&.sidebar_left {margin-left: 0px;}
&.sidebar_right {}
/* Sidebar Modules */
.sidebar_module {
background:@bg_light;
padding: 15px;
margin:0 0 20px;
&:last-child {
margin-bottom:0;
}
.sidebar_module_heading {
position: relative;
font-size: 20px;
line-height: 28px;
margin: 0 0 35px;
padding:0;
&:before{
background: @bg_primary;
bottom: -12px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 35px;
}
}
.sidebar_module_content {
padding:0;
a {
}
.btn.icebtn {
text-shadow: none;
.transition();
&:hover {
}
&.icebtn-more {
text-shadow: none;
&:before {
}
}
}
}
/* (style-1) module class suffix */
&.sidebar_module_style-1 {
background: @bg_primary;
color: #fff;
.sidebar_module_heading {
color: #fff;
text-shadow:1px 1px 1px darken(@bg_primary,10%);
&:before {
background: lighten(@bg_primary,15%);
}
}
.sidebar_module_content {
a {
color: yellow;
}
.btn.icebtn {
color:#fff;
border-color: lighten(@bg_primary,20%);
&:hover {
-webkit-animation: STYLE1 2s infinite;
-moz-animation: STYLE1 2s infinite;
-o-animation: STYLE1 2s infinite;
animation: STYLE1 2s infinite;
}
}
}
}
/* (style-2) module class suffix */
&.sidebar_module_style-2 {
background: @bg_secondary;
color: #fff;
.sidebar_module_heading {
color: #fff;
text-shadow:1px 1px 1px darken(@bg_secondary,10%);
&:before {
background: lighten(@bg_secondary,15%);
}
}
.sidebar_module_content {
a {
color: yellow;
}
.btn.icebtn {
color:#fff;
border-color: lighten(@bg_secondary,15%);
&:hover {
-webkit-animation: STYLE2 2s infinite;
-moz-animation: STYLE2 2s infinite;
-o-animation: STYLE2 2s infinite;
animation: STYLE2 2s infinite;
}
}
}
}
/* joomla menu on sidebar */
ul.menu li {
line-height:34px;
&.divider {
display:none;}
a {
color:@text_color;
padding:2px;
line-height: 30px;
border-bottom:1px dotted darken(@bg_light,15%);
.transition();
&:hover {
background:darken(@bg_light,5%);
padding-left:10px;
text-decoration:none;
}
}
&.active a {
padding-left:10px;
color:#111;
background:darken(@bg_light,5%);
}
&.dropdown-submenu > a:after {
display:none;
}
}
}
}
}
@-webkit-keyframes STYLE1 {
0% { border-color: lighten(@bg_primary,20%); }
50% { border-color: lighten(@bg_primary,60%); }
100% { border-color: lighten(@bg_primary,20%); }
}
@-moz-keyframes STYLE1 {
0% { border-color: lighten(@bg_primary,20%); }
50% { border-color: lighten(@bg_primary,60%); }
100% { border-color: lighten(@bg_primary,20%); }
}
@-o-keyframes STYLE1 {
0% { border-color: lighten(@bg_primary,20%); }
50% { border-color: lighten(@bg_primary,60%); }
100% { border-color: lighten(@bg_primary,20%); }
}
@keyframes STYLE1 {
0% { border-color: lighten(@bg_primary,20%); }
50% { border-color: lighten(@bg_primary,60%); }
100% { border-color: lighten(@bg_primary,20%); }
}
@-webkit-keyframes STYLE2 {
0% { border-color: lighten(@bg_secondary,15%); }
50% { border-color: lighten(@bg_secondary,50%); }
100% { border-color: lighten(@bg_secondary,15%); }
}
@-moz-keyframes STYLE2 {
0% { border-color: lighten(@bg_secondary,15%); }
50% { border-color: lighten(@bg_secondary,50%); }
100% { border-color: lighten(@bg_secondary,15%); }
}
@-o-keyframes STYLE2 {
0% { border-color: lighten(@bg_secondary,15%); }
50% { border-color: lighten(@bg_secondary,50%); }
100% { border-color: lighten(@bg_secondary,15%); }
}
@keyframes STYLE2 {
0% { border-color: lighten(@bg_secondary,15%); }
50% { border-color: lighten(@bg_secondary,50%); }
100% { border-color: lighten(@bg_secondary,15%); }
}
#promo {
margin: 0 0 45px;
padding:0;
.moduletable {
position: relative;
margin-top:15px;
margin-bottom:5px;
.moduletable_heading {
position: relative;
font-size: 20px;
line-height: 28px;
margin: 0 0 35px;
padding:0;
&:before{
background: @bg_primary;
bottom: -12px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 35px;
}
}
.moduletable_content {
.moduletable_heading {
&:before{
left:50%;
margin-left:-17px;
}
}
a img {
.transition();
}
a:hover img {
.rotate(5deg);
opacity:.7;
}
img {
}
}
}
}
/* Showcase and Tagline mods
-----------------------------*/
#showcase {
background-color:@bg_light;
background-size: cover;
padding:50px 0;
margin: 0;
position:relative;
overflow: hidden;
hr {
border:none;
overflow: hidden;
}
&:before,
&:after {
content:"";
position:absolute;
top:0;
left:0;
background:rgba(255,255,255,.20);
width:100%;
height:10px;
z-index: 9;
}
&:after {
top:auto;
bottom:0;
}
#showcase_inner {
background: rgba(255, 255, 255, 0.85);
padding: 20px 12px;
border-radius: 0;
border-radius:5px;
}
#showcase-modules {
margin:15px;
.moduletable {
margin-bottom:0;
.moduletable_heading {
position: relative;
font-size: 20px;
line-height: 28px;
margin: 0 0 35px;
padding:0;
&:before{
background: @bg_primary;
bottom: -12px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 35px;
}
}
.moduletable_content {
.btn.icebtn {
&:hover {
}
}
}
}
}
#it_tagline {
padding: 18px 0 5px;
text-align:center;
h3 {
font-family:@heading_font;
font-size: 32px;
line-height: 40px;
font-weight:300;
span {
}
}
p {
font-size:16px;
line-height:28px;
span {
}
}
input[type="text"]{
width:auto;
min-width:60px;
margin: 0 0 2px 8px;
}
select{
width:auto;
min-width:75px;
margin: 0 0 2px 2px;
}
.btn.icebtn {
margin: 0 0 0 5px;
&:hover {
}
}
}
}
/*********************************************************************************/
/* FOOTER */
/*********************************************************************************/
#footer {
position:relative;
padding-top: 45px;
&:before {
content: "";
height: 240px;
width: 100%;
position: absolute;
top: 0;
left: 0;
#gradient.vertical(@bg_light, @bg_body);
z-index: -9;
}
/* footer module position */
.moduletable {
margin-top:10px;
margin-bottom:5px;
.moduletable_heading {
position: relative;
font-size: 20px;
line-height: 28px;
margin: 0 0 35px;
padding:0;
&:before{
background: @bg_primary;
bottom: -12px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 35px;
}
}
}
}
/* Copyright */
#copyright {
position:relative;
margin: 0 0 0;
padding: 15px 0 15px;
font-size:13px;
text-align:center;
p.copytext {
display:inline-block;
clear:both;
color:@grayLight;
display:inline-block;
text-align:center;
font-style:italic;
padding:0;
margin:0;
}
ul.menu {
display:inline-block;
clear:none;
float:none;
text-align:center;
display:inline-block;
list-style-type:none;
margin:0;
padding: 0;
li {
display:inline;
position:relative;
a {
font-size:13px;
padding: 0 0 0 9px;
display:inline-block;
margin:0 3px;
font-style:italic;
color:@grayLight;
.transition();
&:hover {
background:none;
color: @text_color;
opacity:1!important;
}
}
}
}
}