EVOLUTION-MANAGER
Edit File: layout.css
/** ********************************************** ** @Author Dorin Grigoras @Website www.stepofweb.com @Last Update Friday, August 21, 2015 TABLE CONTENTS ------------------------------- Globals Boxed Header Page Header Aside Middle Plugins Maps Block Review Page 404 / 500 Lock Screen Pricing Table Page Search Page Sidebar Comments Date Box Bullet List Page Profile Page Gallery Item Box Login Page Dashboard Colored Boxes Responsive DEMO [can be deleted on production] *************************************************** **/ /** Globals **************************************************************** **/ html, body { background:#f1f2f7; height:100%; } body { color:#676a6c; height:100%; direction: ltr; overflow-x:hidden; font-size:14px; font-family:'Open Sans', Arial, sans-serif; } ::selection { background: #333; color: #FFF; text-shadow: none; } ::-moz-selection { background: #333; /* Firefox */ color: #FFF; text-shadow: none; } ::-webkit-selection { background: #333; /* Safari */ color: #FFF; text-shadow: none; } #wrapper { position: relative; min-height: 100%; } #mobileMenuBtn { float:left; color:#fff; height:50px; width:50px; font-size:21px; border-right:rgba(255,255,255,0.1) 1px solid; } #mobileMenuBtn:before { font-family:'FontAwesome'; content: "\f0c9"; } #mobileMenuBtn.active:before { font-family: 'Glyphicons Halflings'; content: "\e014"; line-height:50px; } a:active, a:focus, a:hover { text-decoration: none; } /** Boxed **************************************************************** **/ body.boxed { background-color:#f1f2f7; } body.boxed section { background-color:#fff; } body.boxed #wrapper { max-width:1170px; margin-left:auto; margin-right:auto; margin-top:50px; margin-bottom:50px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } body.boxed #mobileMenuBtn, body.boxed #asidebg { display:none; } @media only screen and (max-width: 992px) { body.boxed #wrapper { margin-top:0; margin-bottom:0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } body.boxed #mobileMenuBtn { display:block; } } /** Header *************************************************** **/ #header { height:50px; color: #939da8; position:relative; z-index:1000; background:#4b5354; background-image: -webkit-gradient(linear,left 0,left 100%,from(rgba(40,50,60,0)),to(rgba(40,50,60,0.05))); background-image: -webkit-linear-gradient(top,rgba(40,50,60,0),0,rgba(40,50,60,0.05),100%); background-image: -moz-linear-gradient(top,rgba(40,50,60,0) 0,rgba(40,50,60,0.05) 100%); background-image: linear-gradient(to bottom,rgba(40,50,60,0) 0,rgba(40,50,60,0.05) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0028323c',endColorstr='#0c28323c',GradientType=0); filter: none; } /* Header Navigation */ #header nav ul li.button, #header nav ul li.button a { width:50px; height:49px; font-size:23px; line-height:50px; display:inline-block; } #header nav ul li a { color:#526070; padding:0; margin:0; position:relative; } #header nav ul li.button span.info.label { position:absolute; top:5px; right:5px; font-size:12px; padding: .1em .2em; font-weight:300; } #header nav .dropdown-menu { background:#f9f9f9; border-top:0; box-shadow:none; margin-top:0; padding-top:10px; padding-bottom:10px; right: 0; left: auto; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.1); box-shadow: 0 6px 12px rgba(0,0,0,0.1); } #header nav .dropdown-menu li a { padding:4px 13px; } #header nav .dropdown-menu li a .pull-right { margin-top:2px; } #header nav .dropdown-menu li a .fa { margin-right:6px; } #header nav ul li:hover a { color:#1F262C; } #header .dropdown { margin:0 10px; } #header .dropdown-toggle { color:#939da8; margin:0 !important; padding:0 !important; height:50px; } #header a.dropdown-toggle i.fa-angle-down { margin-left:6px; margin-right:3px; } #header img.user-avatar { display:inline-block; margin-right:10px; margin:7px; border:#999 1px solid; } #header .logo { display:inline-block; height:50px; width:100%; max-width:170px; line-height:40px; margin-left:15px; } #header form.search { margin:0; padding:0; } #header form.search>input { color:#fff; height:50px; line-height:50px; padding:0; border:0; margin:0; background:transparent; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; box-shadow:none !important; } /* header dropdown background color */ #header>nav>ul>li:hover>a, #header>nav>ul>li.open, #header>nav>ul>li.open>a { color:#fff; background-color:rgba(0,0,0,0.1); } /** Page Header *************************************************** **/ .page-header, #page-header { padding: 8px 15px; position:relative; width:100%; margin:0; background-color: #f6f8f8; border-bottom: 1px solid #dee5e7; z-index:1; } .page-header { padding:15px; z-index:1; } #page-header>h1 { padding: 0; color: #666; display: inline-block; font-weight: 300; text-shadow: #fff 0 1px; font-size: 22px; line-height: 22px; margin: 7px 0; } #page-header>ol { margin:-5px 0 0 0; padding:0; background:transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-header>ol>li { color:#c3c3c3; font-size:13px; line-height:13px; } /** Aside *************************************************** **/ #aside ul.nav-list li { border:0; } #aside { position: absolute; left: 0; top: 49px; bottom: 0; z-index:30; } #aside, #asidebg { color: #939da8; width: 235px; background-color: #5a6667; } #asidebg { position:fixed; top:0; left:0; bottom:0; z-index:-1; } /* LOGO */ #aside header { display:block; margin-top:-50px; color:#939da8; } #aside .logo h1 { font-size: 25px; color:#939da8; } #aside .logo h2 { display:block; font-size:13px; line-height:13px; margin:0; padding:0; text-transform:uppercase; text-shadow:#000 0 0 10px; color:#939da8; } #aside .logo { display:table-cell; margin-top:-50px; background: #5a6667; text-align:center; position:relative; padding:10px 0; height:103px; width:235px; vertical-align:middle; } /* MAIN MENU */ #aside nav h3 { font-size:11px; line-height:11px; font-weight:700; margin:0 10px 6px 10px; text-transform:uppercase; color:#939ea4; } #aside nav>ul.nav.nav-list { margin-bottom:30px; } #aside nav ul { list-style:none; border-top:rgba(0,0,0,0.1) 1px solid; border-bottom:rgba(255,255,255,0.1) 1px solid; height:100%; } #aside nav ul li { position:relative; } #aside nav ul li a { /*background-color:#5a6667;*/ border-bottom:rgba(0,0,0,0.1) 1px solid; border-top:rgba(255,255,255,0.1) 1px solid; padding:12px 10px !important; color:#c2c9c9; font-size:14px; line-height:14px; display:block; height:40px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; } #aside nav ul>li:hover>a, #aside nav ul>li.active:hover>a, #aside nav ul>li.active>a { background-color:rgba(0,0,0,0.05) !important; } #aside nav ul li a .label { margin-top:-2px; padding: 3px 6px; border:0; } #aside nav ul li a.dashboard { height:50px; line-height:27px; } #aside nav ul li a:focus, #aside nav ul li.active { color:#fff; background-image: -webkit-gradient(linear,left 0,left 100%,from(rgba(40,50,60,0)),to(rgba(40,50,60,0.05))); background-image: -webkit-linear-gradient(top,rgba(40,50,60,0),0,rgba(40,50,60,0.05),100%); background-image: -moz-linear-gradient(top,rgba(40,50,60,0) 0,rgba(40,50,60,0.05) 100%); background-image: linear-gradient(to bottom,rgba(40,50,60,0) 0,rgba(40,50,60,0.05) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0028323c',endColorstr='#0c28323c',GradientType=0); filter: none; } #aside nav ul li.menu-open > a, #aside nav ul li.always-open > a, #aside nav ul li.active > a { color:#fff !important; } #aside nav ul li.menu-open li a { background-color:transparent; } #aside nav ul li ul li a>.label { margin-top:0px; } /* nav icons */ #aside nav a i.main-icon { float:left; font-size:20px; width:50px; height:40px; line-height:40px; text-align:center; margin:-12px 10px -12px -10px; } #aside nav ul li.menu-open > ul, #aside nav ul li.always-open > ul, #aside nav ul li.active > ul { display:block; } #aside nav ul li ul li.menu-open, #aside nav ul li ul li.always-open, #aside nav ul li ul li.active { background:transparent !important; } #aside nav ul li a.dashboard i.main-icon { height:50px; line-height:50px; } #aside nav ul li > a i.fa-menu-arrow:before { content: "\f196"; } #aside nav ul li.active > a i.fa-menu-arrow:before, #aside nav ul li.always-open > a i.fa-menu-arrow:before, #aside nav ul li.menu-open > a i.fa-menu-arrow:before { content: "\f147" !important; } /* nav labels */ #aside nav a i.pull-right { padding-left:8px; font-size:14px; width:20px; color:#9da9b7; } /* SUBMENU */ #aside nav ul li ul { padding:0; border-top:0; background-color:rgba(255,255,255,0.06); display:none; } #aside nav ul li.always-open, #aside nav ul li ul.menu-open, #aside nav ul li ul.active { display:block !important; } #aside nav ul li ul li a { padding:6px 10px !important; height:32px !important; line-height:18px !important; } #aside nav ul li ul li a { border:0; text-decoration:none; } #aside nav ul li ul li a i.fa { color:#939da8; } #aside nav ul li ul li:hover a i.fa { color:#fff; } #aside nav ul li ul li { padding-left:40px; } #aside nav ul li ul li ul { background-color:inherit !important; } /* tree lines #1 */ #aside nav ul li ul:before { content: ""; display: block; position: absolute; top: 42px; bottom:17px; left: 20px; border-left:rgba(255,255,255,0.2) 1px dotted; z-index:0; } #aside nav ul li ul li:before { content: ""; display: block; position: absolute; width: 12px; left: 21px; top: 15px; border-top:rgba(255,255,255,0.2) 1px dotted; } /* tree lines #2 - #5 */ #aside nav ul li ul li ul { padding:0; margin-left:-20px; border:0; } #aside nav ul li ul li ul { padding-left:6px; } #aside nav ul li ul li ul:before { top: 32px; bottom:16px; left: 50px; border-left:rgba(255,255,255,0.2) 1px solid; } #aside nav ul li ul li ul li:before { left: 25px; } /* MINIFIED ASIDE */ @media only screen and (min-width: 768px) { body.min #aside #asidebg { top:94px; } body.min #header { margin-left:-50px; } body.min #header>nav { padding-left:7px; } body.min #aside, body.min #aside #asidebg, body.min #aside .logo { width:50px; } body.min .min-hide, body.min #aside .logo, body.min #showHideAside, body.min #aside ul.nav>li>a i.fa.pull-right, body.min #aside ul.nav>li>a span { display:none !important; } body.min #aside nav ul li a { overflow:visible; } body.min #aside nav.ajaxNav h3 { text-indent:-99999px; } body.min #wrapper { margin-left:0px; padding-left:50px; } body.min #aside ul.nav>li:hover:before { right: 0; top: 50%; content: " "; width: 0; height: 0; position: absolute; border: solid transparent; border-color: rgba(0, 0, 0, 0); border-right-color: #5a6667; border-width: 6px; margin-top: -6px; z-index:100; } /* do not keep menu open on min */ body.min #aside>nav li>ul { display:none !important; } /* menu hover */ body.min #aside ul.nav>li:hover>a span { display:block !important; position:absolute; background-color:#5a6667; width:200px; height:40px; top:-1px; left:50px; line-height:40px; padding-left:20px; } body.min #aside ul.nav>li:hover>a span.label { display:none !important; } body.min #aside ul.nav>li:hover>ul { display:block; position:absolute; background-color:#5a6667; width:200px; left:50px; top:40px; } body.min #aside ul.nav>li>ul li, body.min #aside ul.nav li.menu-open { background-color:#5a6667 !important; } body.min #aside nav ul li ul { display:none; } body.min #aside nav ul li:hover>ul { display:block !important; } body.min #aside nav ul li ul li { padding-left:10px; } body.min #aside nav ul li ul li ul li { padding-left:50px; } body.min #aside nav ul li ul > li { padding-left:10px; } body.min #aside nav ul li ul > li:before { display:none; } } #aside nav ul li.active li.active>a:after, #aside nav ul li ul li a:hover:after { content:' '; position:absolute; height:33px; width:100%; background-color:rgba(0,0,0,0.06); left:0; top:0; } #aside nav ul li ul li ul li.active a:after, #aside nav ul li ul li ul li a:hover:after { left: -24px; top: 0; width: 233px; } body.min #aside nav ul li ul li ul li.active a:after, body.min #aside nav ul li ul li ul li a:hover:after { left: 4px; top: 0; width: 200px; } body.menu-open #aside nav ul li ul li ul li.active a:after, body.menu-open #aside nav ul li ul li ul li a:hover:after { width:110%; } /* level 3 */ #aside nav ul ul ul li.active>a:after, #aside nav ul ul ul ul li a:hover:after { margin-left: -26px; width: 233px !important; } /* level 4 */ #aside nav ul ul ul li.active>a:after, #aside nav ul ul ul ul li a:hover:after { margin-left:-27px; } /* level 5 */ #aside nav ul ul ul ul ul li.active>a:after, #aside nav ul ul ul ul ul li a:hover:after { margin-left:-53px; } /* level 6 */ #aside nav ul ul ul ul ul ul li.active>a:after, #aside nav ul ul ul ul ul ul li a:hover:after { margin-left:-78px; } /* dashboard menu btn fix */ #aside nav ul li a.dashboard { background-color:#5a6667; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } body.min #aside nav ul li a.dashboard { height:45px; /* #topBar height */ line-height:45px; } body.min #aside nav ul li:hover a.dashboard span { top:2px; } body.min #aside nav ul li a.dashboard .main-icon { line-height:45px; height:45px; } /* do not show dashboard button on hover body.min #aside nav ul li:hover a.dashboard span { display:none !important; } */ /** Middle *************************************************** **/ #middle { position: relative; content: ' '; clear: both; /*overflow: hidden;*//* DO NOT USE - autosuggest & pickers are half hidden */ margin-left: 235px; } /* PANEL */ #middle div.panel-heading ul.options { margin:-5px -15px 0 0; position:relative; } #middle div.panel-heading ul.options>li { border-left: rgba(0,0,0,0.04) 1px solid; padding:0; float:left; position:relative; } #middle div.panel-heading ul.options>li>a { padding:3px 7px 3px 7px; display:inline-block; text-transform:none; font-weight:400; } #middle div.panel-heading ul.options>li>.btn { color:#fff; padding: 1px 5px; text-transform:none; margin:5px 3px 0 0; font-weight:400; } #middle div.panel-heading ul.options>li:last-child>.btn { margin-right:10px; } #middle div.panel-heading ul.options>li:first-child { border-left:0; } #middle div.panel-heading { color: #1E252D !important; height:51px; } #middle .panel-primary .panel-heading ul.options>li>a, #middle .panel-primary div.panel-heading strong, #middle .panel-primary div.panel-heading { color:#fff !important; } #middle div.panel-heading .dropdown-menu { text-transform:none !important; } #middle .panel-heading ul.dropdown-menu>li { padding-left:0; padding-right:0; } #middle .panel-heading ul.dropdown-menu>li label { margin-left:10px; margin-right:10px; display:block; } #middle .panel-heading ul.dropdown-menu>li a { padding:3px; font-size:14px; } #middle .panel-heading ul.options .dropdown-menu li { border-left:0; } #middle .panel-heading ul.options .dropdown-menu li label { font-weight:300; } #middle .panel-heading ul.options li { border-left: rgba(0,0,0,0.04) 1px solid; margin: 0; } #middle .panel-heading ul.options li.divider { padding:0; } #middle .panel-heading ul.options i.fa { margin:0 4px 0 0; text-align:center; } #middle .panel-heading .radio, #middle .panel-heading .checkbox { font-size:14px; } #middle .panel-heading ul.dropdown-menu>li>a { padding-left: 10px; padding-right: 10px; } .panel-heading .label { display:inline-block; padding: 3px 4px; font-size:11px; line-height:11px; } .panel-heading .dropdown-toggle .label { padding:6px 8px; font-size:13px; } .panel-heading ul.nav-tabs li .label>i { padding:0; margin:0; font-size:11px; width:11px; height:11px; } #middle div.panel-heading ul.options li>.label, #middle div.panel-heading ul.options li>.badge { margin-right:6px; margin-top:7px; } #middle div.panel-heading ul.options li:last-child .label, #middle div.panel-heading ul.options li:last-child .badge { margin-right:15px; } #middle div.panel-heading form { display:inline-block; margin-top:-6px; } #middle div.panel-heading form input, #middle div.panel-heading form input.form-control { height:34px; line-height:34px; } /* panel tabs */ .panel-heading ul.nav-tabs.pull-left { margin-left:-15px; } .panel-heading ul.nav-tabs.pull-right { margin-right:-15px; } .panel-heading ul.nav-tabs { border:0; margin:0; padding:0; margin:-15px 0 0 0; } .panel-heading ul.nav-tabs li { border-left: rgba(0,0,0,0.08) 1px solid !important; } .panel-heading ul.nav-tabs.pull-left li { border-left:0 !important; border-right: rgba(0,0,0,0.08) 1px solid !important; } .panel-heading ul.nav-tabs li>a { border:0 !important; margin:0 !important; background-color:transparent !important; padding:15px 10px; padding-bottom:16px; font-size:14px; } .panel-heading ul.nav-tabs li.active>a { background-color:#fff !important; } .panel-heading .label { display:inline-block; padding: 3px 4px; font-size:11px; line-height:11px; } .panel-heading .dropdown-toggle .label { padding:6px 8px; font-size:13px; } .panel-heading ul.nav-tabs li .label>i { padding:0; margin:0; font-size:11px; width:11px; height:11px; } /* fullscreen mode */ .panel-widget.fixed .slimScrollDiv, .panel-widget.fixed .slimscroll { height:100% !important; bottom:50px; top:0; padding-bottom:30px; } .panel-widget.fixed .panel-footer { position:absolute; left:0; right:0; bottom:0; border-top:#fff 10px solid; z-index:99999; } .panel-primary .panel-heading ul.nav-tabs li>a { color:#fff !important; } .panel-heading ul.nav-tabs li { border-left-color: rgba(255,255,255,0.08); } /* collapse button */ #middle div.panel-heading .panel_colapse:before { font-family:'FontAwesome'; display: inline-block; font-size: 14px; content: "\f068"; width:22px; height:24px; line-height:24px; text-align:center; } #middle div.panel-heading .panel_colapse.plus:before { content: "\f067"; } /* fullscreen */ #middle div.panel.fullscreen { position:fixed; top:0; right:0; bottom:0; left:0; margin:0; z-index:1000; background-color:#fff; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } #middle div.panel.fullscreen div.panel-heading { border-bottom:rgba(0,0,0,0.1) 1px solid !important; } #middle div.panel.fullscreen div.panel-body { display:block !important; position:absolute; top:42px; left:0; right:0; bottom:0; } /** Plugins **************************************************************** **/ /** Sparkline ************** **/ .jqstooltip { padding:7px !important; border-radius:3px !important; border:0 !important; background-color:#000 !important; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } .jqstooltip .jqsfield { font-size:11px } /** Morris ************** **/ .morris-hover { position: absolute; z-index: 1000 } .morris-hover.morris-default-style { border-radius: 10px; padding: 6px; color: #666; background: rgba(255, 255, 255, 0.8); border: solid 2px rgba(230, 230, 230, 0.8); font-family: sans-serif; font-size: 12px; text-align: center } .morris-hover.morris-default-style .morris-hover-row-label { font-weight: bold; margin: 0.25em 0 } .morris-hover.morris-default-style .morris-hover-point { white-space: nowrap; margin: 0.1em 0 } /** Flot ******** **/ #flotTip { background:rgba(255, 255, 255, 0.8); border:solid 2px rgba(230, 230, 230, 0.8); padding:6px; text-align:center; font-family:sans-serif; font-size:12px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #flotTip span { font-weight:bold; margin:0.25em 0; display:block; } .fplot-container { min-height:50px; } .flot-chart { overflow: hidden; min-height: 220px; } .nopadding>.flot-chart { margin:10px; } .flot-chart .legend, .flot-chart .legend>div { background-color: transparent !important; } .flot-chart .legend .legendLabel { padding-left:6px !important; } .flot-chart .legend tr>td { padding:2px 0 !important; } /** easyPieChart ***************** **/ .easyPieChart { position: relative; display: inline-block; text-align: center; } .easyPieChart canvas { position: absolute; top: 0; left: 0; } .easyPieChart .percent { width:100%; top:50%; position:absolute; margin-top:-10px; display: block; text-align:center; z-index: 2; } .easyPieChart .percent:after { content: '%'; margin-left: 0.1em; font-size: .8em; } /** @CALENDAR **/ #calendar { width: 100%; margin: 0 auto; } .fc-event { border:0; } .fc-event-inner { padding-left:4px; padding-right:4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .fc-day-grid-event .fc-content { padding:3px; } .fc-other-month { background-image: -webkit-gradient(linear,left top,right bottom,color-stop(.25,rgba(0,0,0,.03)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(0,0,0,.03)),color-stop(.75,rgba(0,0,0,.03)),color-stop(.75,transparent),to(transparent)); background-image: -webkit-linear-gradient(135deg,rgba(0,0,0,.03) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.03) 50%,rgba(0,0,0,.03) 75%,transparent 75%,transparent); background-image: -webkit-linear-gradient(315deg,rgba(0,0,0,.03) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.03) 50%,rgba(0,0,0,.03) 75%,transparent 75%,transparent); background-image: linear-gradient(135deg,rgba(0,0,0,.03) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.03) 50%,rgba(0,0,0,.03) 75%,transparent 75%,transparent); -webkit-background-size: 16px 16px; background-size: 16px 16px; } .fc-state-highlight { background-image: -webkit-gradient(linear,left top,right bottom,color-stop(.25,rgba(0,0,0,.03)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(0,0,0,.03)),color-stop(.75,rgba(0,0,0,.03)),color-stop(.75,transparent),to(transparent)); background-image: -webkit-linear-gradient(135deg,rgba(0,0,0,.03) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.03) 50%,rgba(0,0,0,.03) 75%,transparent 75%,transparent); background-image: -webkit-linear-gradient(315deg,rgba(0,0,0,.03) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.03) 50%,rgba(0,0,0,.03) 75%,transparent 75%,transparent); background-image: linear-gradient(135deg,rgba(0,0,0,.03) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.03) 50%,rgba(0,0,0,.03) 75%,transparent 75%,transparent); -webkit-background-size: 16px 16px; background-size: 16px 16px; background-color:#fceedc; } .fc-icon { position:absolute; top:3px; right:3px; } a.fc-event i.fa { color:#fff !important; } .fc-header-title h2 { margin:0; padding:0; font-size:20px; line-height:26px; color:#ccc; } #external-events>li>:first-child:after { color: #fff; color: rgba(255,255,255,.7); content: attr(data-description); font-size: 11px; font-weight: 400; display: block; line-height: 0; margin: 7px 0; text-transform: lowercase; } @media only screen and (max-width: 482px) { .fc-header-title h2 { font-size:14px; } } /* Dropzone File Upload */ .dropzone { cursor:pointer; background-image: -webkit-gradient(linear,left top,right bottom,color-stop(0.25,rgba(0,0,0,.03)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(0,0,0,.03)),color-stop(0.75,rgba(0,0,0,.03)),color-stop(0.75,transparent),to(transparent)); background-image: -webkit-linear-gradient(135deg,rgba(0,0,0,.03)25%,transparent 25%,transparent 50%,rgba(0,0,0,.03)50%,rgba(0,0,0,.03)75%,transparent 75%,transparent); background-image: -moz-linear-gradient(135deg,rgba(0,0,0,.03)25%,transparent 25%,transparent 50%,rgba(0,0,0,.03)50%,rgba(0,0,0,.03)75%,transparent 75%,transparent); background-image: -ms-linear-gradient(135deg,rgba(0,0,0,.03)25%,transparent 25%,transparent 50%,rgba(0,0,0,.03)50%,rgba(0,0,0,.03)75%,transparent 75%,transparent); background-image: -o-linear-gradient(135deg,rgba(0,0,0,.03)25%,transparent 25%,transparent 50%,rgba(0,0,0,.03)50%,rgba(0,0,0,.03)75%,transparent 75%,transparent); background-image: linear-gradient(135deg,rgba(0,0,0,.03)25%,transparent 25%,transparent 50%,rgba(0,0,0,.03)50%,rgba(0,0,0,.03)75%,transparent 75%,transparent); background-color: #FAFCFD; background-size: 16px 16px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } /* Datepicker */ .datepicker.dropdown-menu { box-shadow: 5px 5px rgba(102, 102, 102, 0.1); border: 1px solid #efefef; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .datepicker, .colorpicker, .bootstrap-timepicker-widget, .daterangepicker { z-index:1051 !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .input-group.color .input-group-btn>.btn { padding-left:10px; background-color:#fff !important; } .input-group.color .input-group-btn i { position: absolute; display: block; cursor: pointer; width: 20px; height: 20px; right: 6px; } .daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.in-range + td.end-date, .daterangepicker .ranges .input-mini, .daterangepicker .calendar-date { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /* File Upload */ .fileupload-buttonbar .btn, .fileupload-buttonbar .toggle { margin-bottom:5px !important; } /* Ion.RangeSlider */ .irs-line-mid, .irs-line-left, .irs-line-right, .irs-diapason, .irs-slider { background:#E5E5E5; } .irs-diapason { background: #ffb848; } .irs { height: 40px; } .irs-with-grid { height: 60px; } .irs-line { height: 8px; top: 25px; } .irs-line-left { height: 8px; } .irs-line-mid { height: 8px; } .irs-line-right { height: 8px; } .irs-diapason { height: 8px; top: 25px; } .irs-slider { width: 13px; height: 24px; top: 17px; border:1px solid #fefefe; background:#777; } #irs-active-slider, .irs-slider:hover { } .irs-min, .irs-max { color: #999; font-size: 10px; line-height: 1.333; text-shadow: none; top: 0; padding: 1px 3px; background: rgba(0,0,0,0.1); border-radius: 0; } .lt-ie9 .irs-min, .lt-ie9 .irs-max { background: #ccc; } .irs-from, .irs-to, .irs-single { color: #fff; font-size: 10px; line-height: 1.333; text-shadow: none; padding: 1px 5px; background: rgba(0,0,0,0.3); border-radius: 3px; } .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single { background: #999; } .irs-grid-pol { background: #99a4ac; } .irs-grid-text { color: #99a4ac; } /* X-Editable */ .editable-input .form-control { height:30px; padding:0 3px; margin:0; } .select2-container .select2-choice abbr { top:13px; } .editable-input .select2-container { border:#ccc 1px solid !important; } /* from wizzard error the same with sky-form error! */ label.error { font-size:12px; color: #fff; display: inline-block; background-color: #ee9393; } /* force background colors */ .bg-calendar { font-size:12px; font-weight:300; border-left:rgba(0,0,0,0.2) 4px solid; } .bg-calendar.bg-info, .fc-event.bg-info { background-color: #5bc0de !important; } .bg-calendar.bg-warning, .fc-event.bg-warning { background-color:#f0ad4e !important; } .bg-calendar.bg-danger, .fc-event.bg-danger { background-color:#d9534f !important; } .bg-calendar.bg-success, .fc-event.bg-success { background-color:#5cb85c !important; } .bg-calendar.bg-primary, .fc-event.bg-primary { background-color:#333 !important; } #external-events>li { margin: 6px 4px 6px 0; display: inline-block; } #external-events>li>:first-child { padding: 5px 10px 10px; cursor: move; display: block; } /** Maps *************************************************** **/ #gmap, .gmap, #gpanorama, .gpanorama { width:100%; min-height:300px; display:block; z-index:1; } #gmap.bw, .gmap.bw { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; } /* vectorial map */ #world-map { background-color:rgba(0,0,0,0.06); padding:0 3px 3px 0; } .jvectormap-zoomout { top: 40px !important; } .jvectormap-zoomin, .jvectormap-zoomout { background: #333 !important; width: 20px !important; height: 20px !important; padding: 4px 0 !important; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } /** Block Review example usage: page-forum-post.html **************************************************************** **/ .block-review-content div.block-review-body { position:relative; padding:20px 0 20px 150px; } .block-review-content div.block-review-avatar { width:130px; float:left; margin-left:-140px; } @media only screen and (max-width: 482px) { .block-review-content div.block-review-body { padding:20px 0 20px 100px; } .block-review-content div.block-review-avatar { width:80px; margin-left:-90px; } .block-review-content div.block-review-avatar img { width:70px; } } /** Page 404 / 500 *************************************************** **/ .e404, .e500 { font-size:80px; line-height:80px; float:left; margin-top:-10px; margin-right:30px; font-weight:700; color:#D9534F; } /** Lock Screen *************************************************** **/ html,body { height:100%; } .lockscreen { display:table; width:100%; height:100%; text-align:center; } .lockscreen .inner { display:table-cell; vertical-align:middle; } .lockscreen form { margin:auto; max-width:450px; text-align:left; } .lockscreen form>.lock-container { background-color:#fff; padding:8px; -moz-box-shadow:#ccc 0 0 25px; box-shadow:#ccc 0 0 25px; } .lockscreen form img { float:left; margin-right:20px; } .lockscreen form h1 { font-size:20px; line-height:20px; margin-bottom:7px; } /** Pricing Table *************************************************** **/ .pricing-table { border:1px solid #f6f6f6;} .plan-title { background:#ebebeb; line-height:32px; text-transform:uppercase; text-align:center; color:#2e2e2e; } .plan-price { background:#fafafa; text-transform:uppercase; text-align:center; font-size:40px; line-height:25px; font-weight:400; padding: 16px 0 13px; color:#1c2b36; text-shadow:0px 1px 0px rgba(255,255,255,0.8); } .plan-price span { display:block; font-size:12px; font-weight:400; text-transform:none; text-shadow:none; } .plan-features {padding:0px;margin:0px;} .plan-features li { line-height:40px; list-style:none; text-align:center; color:#2e2e2e; font-size:12px; border-bottom:1px solid #f2f2f2; border-top:1px solid #fff; background:#f9f9f9; margin:0px; } .plan-buy { background:#f9f9f9; border-top:1px solid #fff; padding:17px 0; } .popular { border:5px solid #1c2b36; border-top:1px solid #1c2b36; width: 104%; position: relative; left: -2%; top:-6px; -webkit-box-shadow: 1px 1px 18px rgba(50, 50, 50, 0.4); -moz-box-shadow: 1px 1px 18px rgba(50, 50, 50, 0.4); box-shadow: 1px 1px 18px rgba(50, 50, 50, 0.4); } .popular .plan-title { background:#1c2b36; color:#fff; } .popular .plan-price { background:#fff; } .pricing-wrap .col-md-3 { padding:0 2px !important; } .popular .plan-buy { padding:23px 0; background:#fdfdfd; } .popular .plan-features li { background:#fefefe; } /** Page Search *************************************************** **/ .search-result { padding:20px 0; border-bottom:#eee 1px solid; } .search-result h4 { margin:0; line-height:20px; } .search-result p { font-size:12px; margin:0; padding:0; } .search-result img { float:left; margin-right:10px; margin-top:6px; } /** Page Sidebar *************************************************** **/ .sidebar h3 { margin-bottom:20px; margin-top:60px; } .sidebar h3:first-child { margin-top:10px; } /* thumbs */ .aside-thumbs li { float:left; margin: 3px 0; width:50px; height:50px; overflow:hidden; } .aside-thumbs li a img { opacity: 0.6; filter: alpha(opacity=60); padding:0; width:50px; height:50px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .aside-thumbs li a:hover>img { opacity: 1; filter: alpha(opacity=100); } /* twitter */ .aside-twitter .twitter-item { display:block; margin-bottom:20px; } .aside-twitter p { padding:0; margin:0; } .aside-twitter a .fa { color:#ccc; font-size:18px; } /* tags */ ul.list-tags >li { padding:1px 0; } /* tabs */ .aside-tabs .tab-content { border:#ccc 1px solid; border-top:0; padding:15px; padding-bottom:0; } /** Comments *************************************************** **/ #comments { margin-top:60px; } #comments .comment { margin:40px 0; } #comments a.replyBtn { float:right; font-size:11px; text-transform:uppercase; } #comments span.user-avatar { background:#eee; width:64px; height:64px; float:left; margin-right:10px; } ul.comment { margin-bottom:30px; } li.comment { position:relative; margin-bottom:25px; font-size:13px; } li.comment p { margin:0; padding:0; } li.comment img.avatar { position:absolute; left:0; top:0; display:inline-block; } li.comment.comment-reply img.avatar { left:6px; top:6px; } li.comment .comment-body { position:relative; padding-left:60px; } li.comment.comment-reply { margin-left:60px; background-color:#fafafa; padding:6px; margin-bottom:6px; } li.comment a.comment-author { margin-bottom:6px; display:block; } li.comment a.comment-author span { font-size:15px; } li.comment-relpy { margin-top:-15px; margin-bottom:20px; } /** Date Box *************************************************** **/ time.datebox { font-size: 14px; display: block; position: relative; width: 35px; border-color:#2E363F; background-color: #fff; margin: 3px auto; border:1px solid; } time.datebox strong { padding: 2px 0; color: #fff; background-color:#1c2b36; display:block; text-align:center; } time.datebox span { font-size: 15px; color: #2f2f2f; display:block; text-align:center; } /** Bullet List *************************************************** **/ ul.bullet-list li { position: relative; padding: 0 0 0 20px; margin: 0 0 10px; } ul.bullet-list li:before { border: 6px solid #cccccc; border-radius: 100px; content: ''; display: inline-block; left: 0; margin: 0; position: absolute; top: 5px; z-index: 2; } ul.bullet-list li.red:before { border-color: #d64b4b; } ul.bullet-list li.green:before { border-color: #4dd79c; } ul.bullet-list li.blue:before { border-color: #0090d9; } ul.bullet-list li.orange:before { border-color: #E2A917; } ul.bullet-list li h3 { display: block; font-weight: 700; font-size: 14px; font-size: 1.4rem; line-height: 1.4; color: #171717; margin:0; padding:0; } /** Page Profile *************************************************** **/ .profile-buttons { background-color:rgba(0,0,0,0.05); padding:15px; } .profile-buttons h2 { margin:0; padding:0; font-size:30px; line-height:30px; } .profile-btn-link { padding:4px 10px !important; margin:0 !important; color:#999; } .profile-activity { margin-top:17px; } .profile-activity h6 { margin-bottom:6px; padding-left:15px; font-weight:bold; } .profile-activity p { font-size:13px; padding-left:15px; } .page-profile h6 { color:#999; font-size: 1em; letter-spacing: normal; line-height: 18px; margin: 0 0 6px 0; } .page-profile div.tabs ul.nav-tabs li.active a, .page-profile .tab-content { background-color:#fff !important; } /** Page Gallery *************************************************** **/ /* categories */ .gallery-category { float:left; text-align:center; margin:0 0 15px 15px; width:16.6%; } .gallery-category img { display:block; } @media only screen and (max-width: 1680px) { .gallery-category { width:20%; } } @media only screen and (max-width: 1366px) { .gallery-category { width:18.3%; } } @media only screen and (max-width: 1024px) { .gallery-category { width:22.5%; } } @media only screen and (max-width: 480px) { .gallery-category { width:45%; } } /** Item Box **************************************************************** **/ .item-box { background:#f6f6f6; overflow:hidden; margin:16px 0; position:relative; display:inline-block; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; } .item-box.fullwidth { max-width:100%; } section.alternate .item-box { background-color:#fff; } .item-box figure { width:100%; display:block; margin-bottom:0; overflow:hidden; position:relative; text-align:center; } .item-box.fixed-box figure img { width:100%; height:auto; } .item-box-desc { padding:10px 20px; overflow:hidden; } .item-box-desc p { margin-top:20px; display:block; overflow:hidden; text-overflow:ellipsis; /*white-space: nowrap;*/ } .item-box.fixed-box .item-box-desc p { height:98px; } .item-box-desc h4 { padding:0; margin:0; } .item-box .item-box-desc small { display:block; } .item-box.fixed-box .item-box-desc { height:256px; } .item-box.fixed-box figure { max-height:263px; } .item-box .socials { border-top:#eee 1px solid; text-align:center; display:block; } /* hover */ .item-box .item-hover { opacity: 0; filter: alpha(opacity=0); position:absolute; left:0; right:0; top:0; bottom:0; text-align:center; color:#fff; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .item-box .item-hover, .item-box .item-hover button, .item-box .item-hover a { color:#fff; } .item-box .item-hover .inner { position:absolute; display:block; left:0; right:0; top:50%; margin-top:-10px; z-index:100; } .item-box:hover .item-hover { opacity: 1; filter: alpha(opacity=100); } .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { color:#333; background-color:rgba(0,0,0,0.07); } .item-box .item-hover .overlay { background-color:rgba(127,127,127,0.6); } /** Box Content **/ .box-content.thumbnail { position:relative; max-width:255px; display:inline-block; margin-bottom:30px; border:0; padding:0; background:rgba(0,0,0,0.03); } .box-content.thumbnail:hover { background:rgba(0,0,0,0.08); border:0 !important; } .box-content.thumbnail .item-image { position:relative; display:inline-block; overflow:hidden; } .box-content.thumbnail h3 { position:absolute; bottom:10px; left:0; text-align:left; font-size:18px; line-height:18px; color:#fff; } .box-content.thumbnail img { width:100%; /* IE fix */ } .box-content.thumbnail h3 span { display:inline-block; background-color:rgba(0,0,0,0.8); padding:10px 10px 20px 10px; } .box-content.thumbnail h3 small { display:inline-block; color:#333; background:rgba(255,255,255,0.9); padding:3px; margin-top:-10px; position:absolute; bottom:-10px; left:10px; } .box-content.thumbnail p { font-size:12px; line-height:16px; text-align:left; height:80px; overflow:hidden; text-overflow:ellipsis; border-bottom:#eee 1px solid; padding-bottom:10px; margin-bottom:6px; } @media only screen and (max-width: 480px) { .box-content.thumbnail h3 { font-size:15px; line-height:15px; } } .box-content .item-image>img { -webkit-transition: all .2s ease 0s; -moz-transition: all .2s ease 0s; -o-transition: all .2s ease 0s; transition: all .2s ease 0s; } .box-content .item-image:hover>img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } /* tecegory item list */ .box-content.box-list { width:12.1%; margin:3px; display: inline-block; position: relative; zoom: 1; float:left; } .box-content .image-name { margin-top:0 !important; padding-top:3px !important; } .box-content .caption a.del-img { display:none; } .box-content:hover .caption a.del-img { display:inline-block; } @media only screen and (max-width: 1680px) { .box-content.box-list { width:12%; } } @media only screen and (max-width: 1366px) { .box-content.box-list { width:11.9%; } } @media only screen and (max-width: 1280px) { .box-content.box-list { width:11.8%; } } @media only screen and (max-width: 1024px) { .box-content.box-list { width:11.5%; } } @media only screen and (max-width: 768px) { .box-content.box-list { width:24%; } } @media only screen and (max-width: 640px) { .box-content.box-list { width:23.9%; } } @media only screen and (max-width: 480px) { .box-content.box-list { width:48.5%; } } /** Login *************************************************** **/ .login-box { max-width:350px; margin:auto; margin-top:10%; } .login-box>form { background-color:#fff; } .forgot-password { display: inline-block; margin-top: 8px; } /** Page Dashboard *************************************************** **/ ul.easypiecharts { display: table; table-layout: fixed; width: 100%; margin: 0; padding: 0; min-height:64px; } ul.easypiecharts li { display: table-cell; border-right: 1px solid #e4e5e6; margin-right: -1px; padding: 0 15px; position: relative; } ul.easypiecharts li:last-child { border-right:0; } ul.easypiecharts li span.stat-number { font-size: 18px; position: absolute; top: 10px; right: 15px; } ul.easypiecharts li span.stat-title { color: #cccccc; text-transform: uppercase; font-weight: 300; font-size: 11px; position: absolute; top: 34px; right: 15px; } @media only screen and (max-width: 1260px) { ul.easypiecharts li { text-align:center; } ul.easypiecharts li span.stat-number, ul.easypiecharts li span.stat-title { position:relative; display:block; top:0; right:auto; } ul.easypiecharts li span.stat-title { font-size:10px; } } @media only screen and (max-width: 480px) { ul.easypiecharts li { text-align:center; padding:0; } ul.easypiecharts li span.stat-number, ul.easypiecharts li span.stat-title { position:relative; display:block; top:0; right:auto; } ul.easypiecharts li span.stat-title { font-size:10px; } } /* used on Recent Activities */ ul.list-hover>li { background-color:#eff3f8; padding:4px; margin-bottom:1px; } ul.list-hover>li:hover { background-color:#e0e8f1; } ul.list-hover>li .label { height:27px; line-height:25px; display:inline-block; text-align:center; margin-right:6px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } ul.list-hover>li .label>i { width:22px; } .dashboard .panel { border:#e6e6e6 1px solid; -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.03); -moz-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.03); box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.03); } .dashboard .panel-footer { background-color: #F9FAFC; border-top: #eee 1px solid; padding: 10px 21px; -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.03); -moz-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.03); box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.03); } /** Colored Boxes **************************************************************** **/ .box { color:#fff; background-color:#999999; margin-bottom:20px; overflow:hidden; position:relative; padding:10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .box .box-title h1>a, .box .box-title h2>a, .box .box-title h3>a, .box .box-title h4>a, .box .box-title h5>a, .box .box-title h6>a, .box h1, .box h2, .box h3, .box h4, .box h5, .box h6 { color:#fff; margin:0; } .box .box-title { padding:10px 0 20px 0; position:relative; border-bottom: rgba(0,0,0,0.1) 1px solid; } .box .box-title i.fa { position:absolute; top:0; right:0; font-size:70px; color:rgba(0,0,0,0.1); } .box .box-body .sparkline { display:block; margin-top:10px; } .box .box-body { border-top: rgba(255,255,255,0.1) 1px solid; } .box.warning { background-color:#f4b04f; } .box.info { background-color:#1D89CF; } .box.danger { background-color:#E66454; } .box.default { background-color:#999999; } .box.success { background-color:#5CB85C; } /** Responsive *************************************************** **/ @media only screen and (max-width: 992px) { } @media only screen and (max-width: 768px) { #aside, #asidebg { margin-left:-235px; } #middle { margin-left: 0px; } #mobileMenuBtn { display:block; } #header .logo { width:auto; } body.menu-open #aside, body.menu-open #asidebg { margin-left:0; width:235px; } body.menu-open #aside ul.nav>li>a span { display:block !important; } body.menu-open #aside nav ul li a.dashboard { line-height:1.5; } } @media only screen and (max-width: 482px) { body.menu-open #aside, body.menu-open #asidebg { width:100%; } .lockscreen form { margin:0 15px; } .lockscreen form img.avatar { display:none; } } /** DEMO ONLY DO NOT USE THIS CSS - USED FOR DEMO ONLY! **************************************************************** **/ .iconsPreview a { text-decoration:none; } .iconsPreview .fa-hover a { display:block; padding:4px; text-decoration:none; } .iconsPreview .fa-hover a:hover { background-color:#f3f3f3; } .iconsPreview .fa-hover i { width:20px; margin-right:10px; color:#333 !important; } .iconsPreview .fa-hover a span { color:#666; } /** *** **/ .iconFlags a { text-decoration:none; } .iconFlags .flag-icon { padding-top:4px; padding-bottom:4px; cursor:pointer; display:block; } .iconFlags .flag-icon img { display:inline-block; margin-right:6px; } .iconFlags .flag-icon:hover { background-color:#f3f3f3; } .bs-glyphicons a { text-decoration:none; } .bs-glyphicons .glyphicon-class { display: block; text-align: center; word-wrap: break-word; } .bs-glyphicons .glyphicon { margin-top: 5px; margin-bottom: 10px; font-size: 24px; } .bs-glyphicons li { float: left; width: 25%; height: 115px; padding: 10px; font-size: 10px; line-height: 1.4; text-align: center; border: 1px solid #fff; background-color: #f9f9f9; cursor:pointer; padding-top: 20px; } .bs-glyphicons li:hover { background-color:#f3f3f3; } @media (min-width: 769px) { .bs-glyphicons li { width: 12.5%; font-size: 12px; } } .iconExamples a { text-decoration:none; } .iconExamples .example { text-align: center; cursor:pointer; padding:6px 3px; } .iconExamples .example:hover { background-color:#f3f3f3; } .iconExamples .example:before, .iconExamples .example:after { content: " "; display: table; } .iconExamples .example .icon { font-size: 20px; float: left; width: 35px; } .iconExamples .example .class { text-align: center; float: left; margin-top: 0; font-weight: 400; margin-left: 10px; color: #333; } /** *** **/ .row.show-grid, .row.show-grid>div { padding:0; } .grid-block { background-color: #EEE; border: 1px solid #FFF; display: block; line-height: 40px; min-height: 40px; text-align: center; } .grid-color span { display:block; padding: 10px 0; text-align: center; background-color:rgba(0,0,0,0.1); } .grid-demo [class*="col-"] { background: #fafafa; border: 1px solid; border-color: #ddd; padding: 10px; text-align: center; margin-bottom:20px; } .grid-demo .row { margin-left:0; margin-right:0; } /** *** **/ .linecon a { text-decoration:none; } .linecon .icon { width: 12.5%; float: left; height: 115px; text-align: center; padding: 22px 10px; margin: 0 -1px -1px 0; border: 1px solid #fff; background-color: #f6f6f6; word-wrap: break-word; cursor:pointer; } .linecon .icon:hover { background-color:#f3f3f3; } .linecon .icon i { display: block; font-size: 30px; margin-bottom: 10px; } /** *** **/ .colors-bg-demo { padding:3px; margin-top:3px; } /** et line icons */ .et-line-icons li>i { margin-top: 5px; margin-bottom: 10px; font-size: 26px; display:block; text-align:center; color:#000; margin-top:25px; } .et-line-icons li>span { font-size:13px; } .et-line-icons li { float: left; width: 25%; height: 115px; padding: 10px; font-size: 10px; line-height: 1.4; text-align: center; border: 1px solid #fff; background-color: #f9f9f9; cursor:pointer; } .et-line-icons li:hover { background-color:#f3f3f3; } @media (min-width: 769px) { .et-line-icons li { width: 12.5%; font-size: 12px; } }