sara_t
چهارشنبه 12 آبان 1395, 10:10 صبح
سلام دوستان
من از یک قالب اماده نوشته شده با بوت استرپ استفاده کردم.
دوستان میشه راهنمایی کنید که هدر من برای نمایش موبایل بهتر بشه؟من چیکار کنم که هر جز تو یه خط باشه و کنار هم قرار نگیرن؟
ممنون
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="plugins/flexslider/flexslider.css" rel="stylesheet" media="screen" />
<link href="css/cubeportfolio.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link id="t-colors" href="skins/default.css" rel="stylesheet" />
<!-- boxed bg -->
<link id="bodybg" href="bodybg/bg1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- start header -->
<header>
<div class="top">
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="جستجو" type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search" title="Click to start searching"></span>
</form>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-theme btn-add">ورود</button>
<button type="button" class="btn btn-theme btn-add">عضویت رایگان</button>
<button type="button" class="btn btn-theme btn-add">سبد خرید</button>
</div>
<div class="col-md-4">
<ul class="topleft-info">
<li><i class="fa fa-phone"></i>091711111111</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- end header -->
<footer>
</footer>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="plugins/flexslider/jquery.flexslider-min.js"></script>
<script src="plugins/flexslider/flexslider.config.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/stellar.js"></script>
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script src="js/jquery.cubeportfolio.min.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/animate.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500, 500italic,700,700italic,900|Open+Sans:300,400,600, 700');
/* === prettify === */
@import url('../js/google-code-prettify/prettify.css');
/* === fontawesome === */
@import url('font-awesome.css');
/* === custom icon === */
@import url('custom-fonts.css');
/* ==== overwrite bootstrap standard ==== */
@import url('theme.css');
@import url('animate.css');
.directionrtl{direction:rtl;}
/* ===================================
1. General
==================================== */
body {
font-family: tahoma;
font-size:14px;
font-weight:300;
line-height:1.6em;
color:#656565;
}
a:active {
outline:0;
}
.clear {
clear:both;
}
h1,h2, h3, h4, h5, h6 {
font-family:'Roboto', sans-serif;
font-weight:700;
line-height:1.1em;
color:#666;
margin-bottom: 20px;
}
.highlight {
color: #fff !important;
padding: 0 8px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.color-white {
color: #fff;
}
/* ===================================
2. layout
==================================== */
#wrapper {
width:100%;
margin:0;
padding:0;
}
#wrapper.boxed {
width:1230px;
overflow:hidden;
margin:0 auto;
padding:0;
background:#fff;
}
.row,.row-fluid {
margin-bottom:30px;
}
.row .row,.row-fluid .row-fluid{
margin-bottom:30px;
}
.row.nomargin,.row-fluid.nomargin {
margin-bottom:0;
}
/* ===================================
3. Responsive media
==================================== */
.video-container,.map-container,.embed-container { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:none; }
.embed-container iframe,
.embed-container object,
.embed-container embed,
.video-container iframe,
.map-container iframe,
.map-container object,
.map-container embed,
.video-container object,
.video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
iframe {
border:none;
}
img.img-polaroid {
margin:0 0 20px 0;
}
.img-box {
max-width:100%;
}
/* ===================================
4. Header
==================================== */
/* === header === */
/* top area */
header .top .row {
margin-bottom: 0;
}
header .top {
padding:20px 0;
margin:0;
background: #f2f2f2;
}
header .top {
border-bottom: 1px solid #ddd;
}
header .top ul.topleft-info {
list-style: none;
margin: 10px 0 0;
padding-left: 0;
float:right;
}
header .top ul.topleft-info li {
display: inline;
margin: 0 20px 0 0;
padding:0;
font-weight: 600;
}
header .top ul.topleft-info li a:hover {
text-decoration: none;
outline: 0;
}
ul.social-network {
list-style:none;
margin:0;
padding:0;
}
ul.social-network li {
display:inline;
margin:0 5px;
}
ul.social-network li a:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
header .top ul.social-network li a {
color: #fff;
}
.sb-search {
position: relative;
width: 0%;
min-width: 36px;
height: 36px;
float: left;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
top: 0;
right: 0;
border: none;
outline: none;
background: #fff;
width: 60%;
height: 36px;
margin: 0;
z-index: 10;
padding: 2px 2px 2px 2px;
font-family: inherit;
font-size: 14px;
color: #2c3e50;
text-align:right;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}
.sb-search-input:-moz-placeholder {
color: #efb480;
}
.sb-search-input::-moz-placeholder {
color: #efb480;
}
.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit {
width: 36px;
height: 36px;
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 36px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
z-index: 90;
font-size: 14px;
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
}
.sb-icon-search:before {
content: "\f002";
}
/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #666;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
z-index: 90;
}
/* -- end top area */
header .navbar {
margin-bottom: 0;
}
.navbar-default {
border: none;
}
.navbar-brand {
color: #222;
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
line-height: 1em;
letter-spacing: -1px;
margin-top: 30px;
padding: 0 0 0 15px;
}
header .navbar-collapse ul.navbar-nav {
float: right;
margin-right: 0;
}
header .navbar-default{
background-color: #fff;
border-bottom: 1px solid #ddd;
}
header .nav li a:hover,
header .nav li a:focus,
header .nav li.active a,
header .nav li.active a:hover,
header .nav li a.dropdown-toggle:hover,
header .nav li a.dropdown-toggle:focus,
header .nav li.active ul.dropdown-menu li a:hover,
header .nav li.active ul.dropdown-menu li.active a{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
header .navbar-default .navbar-nav > .open > a,
header .navbar-default .navbar-nav > .open > a:hover,
header .navbar-default .navbar-nav > .open > a:focus {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
header .navbar {
min-height: 100px;
}
header .navbar-nav > li {
padding-bottom: 30px;
padding-top: 30px;
}
header .navbar-nav > li > a {
padding-bottom: 6px;
padding-top: 5px;
margin-left: 2px;
line-height: 30px;
font-weight: 700;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
header .nav .caret {
border-bottom-color: #f5f5f5;
border-top-color: #f5f5f5;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #fff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #fff;
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 1px solid #eee;
}
header .navbar-nav > li > ul > li {
border-bottom: 1px solid #eee;
}
header .navbar-nav > li > ul > li.dropdown-submenu > ul > li {
border-bottom: 1px solid #eee;
}
.dropdown-menu li:last-child {
padding-bottom: 0 !important;
margin-bottom: 0;
}
header .nav li .dropdown-menu {
padding: 0;
}
header .nav li .dropdown-menu li a {
line-height: 30px;
padding: 3px 12px;
text-align:right;
}
/* --- menu --- */
header .navigation {
float:right;
}
header ul.nav li {
border:none;
margin:0;
}
header ul.nav li a {
font-size:12px;
border:none;
font-weight:700;
text-transform:uppercase;
}
header ul.nav li ul li a {
font-size:13px;
border:none;
font-weight:400;
text-transform:none;
}
.navbar .nav > li > a,.navbar .nav > li.active > .dropdown-menu > li > a {
color: #444;
text-shadow: none;
}
.dropdown-menu li:hover,
.dropdown-menu li a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
background: #f5f5f5;
}
.navbar .nav a:hover {
background:none;
}
.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
background:none;
font-weight:700;
}
.navbar .nav > .active > a:active,.navbar .nav > .active > a:focus {
background:none;
outline:0;
font-weight:700;
}
.navbar .nav li .dropdown-menu {
z-index:2000;
}
header ul.nav li ul {
margin-top:1px;
}
header ul.nav li ul li ul {
margin:1px 0 0 1px;
}
.dropdown-menu .dropdown i {
position:absolute;
right:0;
margin-top:3px;
padding-left:20px;
}
.navbar .nav > li > .dropdown-menu:before {
display: inline-block;
border-right: none;
border-bottom: none;
border-left: none;
border-bottom-color: none;
content:none;
}
ul.nav li.dropdown a {
z-index:1000;
display:block;
}
header .nav .dropdown:hover > .dropdown-menu {
display: block;
margin-top: 0;
}
/* sub menu */
header ul.nav li ul li.dropdown-submenu li a {
color: #444;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
margin-left: 1px;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0;
border-radius: 0 0 0 0;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: "\f105";
font-family: 'FontAwesome';
float: right;
width: 0;
height: 0;
margin-top: 0;
margin-right: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/* =============================
21. Media queries
============================= */
@media (min-width: 979px) and (max-width: 1200px) {
#wrapper.boxed{
width:1000px;
margin:0 auto;
}
}
@media (min-width: 768px) and (max-width: 979px) {
#wrapper.boxed{
width:784px;
margin:0 auto;
}
a.detail{
background:none;
width:100%;
}
footer .widget form input#appendedInputButton {
display: block;
width: 91%;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
footer .widget form .input-append .btn {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top:10px;
}
ul.related-folio li{
width:156px;
margin:0 20px 0 0;
}
}
@media (max-width: 767px) {
body {
padding-right: 0;
padding-left: 0;
}
#wrapper.boxed{
width:90%;
margin:0 auto;
}
.navbar-brand {
margin-top: 10px;
border-bottom: none;
}
.navbar-header {
margin-top: 20px;
border-bottom: none;
}
.navbar-nav {
border-top: none;
padding-top: 30px;
float: none;
width: 100%;
}
header .navbar-nav > li {
padding-bottom: 0;
padding-top: 0;
}
header .nav li .dropdown-menu {
margin-top: 0;
}
.stats > div {
margin-bottom: 30px;
}
.dropdown-menu {
position: absolute;
top: 0;
left: 40px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 13px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #f5f5f5;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 0;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-collapse.collapse {
border: none;
overflow: hidden;
}
.box {
padding:20px 0;
margin-bottom: 20px;
}
#inner-headline .breadcrumb {
float:left;
clear:both;
width:100%;
}
.breadcrumb > li {
font-size:13px;
}
ul.portfolio li article a i.icon-48{
width:20px;
height:20px;
font-size:16px;
line-height:20px;
}
.left-sidebar{
border-right:none;
padding:0 0 0 0;
border-bottom: 1px dotted #e6e6e6;
padding-bottom:10px;
margin-bottom:40px;
}
.right-sidebar{
margin-top:50px;
border-left:none;
padding:0 0 0 0;
}
footer .col-lg-1, footer .col-lg-2, footer .col-lg-3, footer .col-lg-4, footer .col-lg-5, footer .col-lg-6,
footer .col-lg-7, footer .col-lg-8, footer .col-lg-9, footer .col-lg-10, footer .col-lg-11, footer .col-lg-12{
margin-bottom:20px;
}
#sub-footer ul.social-network {
float:left;
}
[class*="span"] {
margin-bottom:20px;
}
}
@media (max-width: 480px) {
.bottom-article a.pull-right {
float:left;
margin-top:20px;
}
.search{
float:left;
}
.cta-text {
margin:0 auto;
text-align:center;
}
ul.portfolio li article a i{
width:20px;
height:20px;
font-size:14px;
}
.main-slider .flex-caption {
bottom: 0;
text-align: center;
}
.main-slider .flex-caption p {
display: none;
}
.cta-btn {
float: none;
text-align: center;
}
}
@media (max-width: 360px) {
}
من از یک قالب اماده نوشته شده با بوت استرپ استفاده کردم.
دوستان میشه راهنمایی کنید که هدر من برای نمایش موبایل بهتر بشه؟من چیکار کنم که هر جز تو یه خط باشه و کنار هم قرار نگیرن؟
ممنون
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="plugins/flexslider/flexslider.css" rel="stylesheet" media="screen" />
<link href="css/cubeportfolio.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link id="t-colors" href="skins/default.css" rel="stylesheet" />
<!-- boxed bg -->
<link id="bodybg" href="bodybg/bg1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- start header -->
<header>
<div class="top">
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="جستجو" type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search" title="Click to start searching"></span>
</form>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-theme btn-add">ورود</button>
<button type="button" class="btn btn-theme btn-add">عضویت رایگان</button>
<button type="button" class="btn btn-theme btn-add">سبد خرید</button>
</div>
<div class="col-md-4">
<ul class="topleft-info">
<li><i class="fa fa-phone"></i>091711111111</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- end header -->
<footer>
</footer>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="plugins/flexslider/jquery.flexslider-min.js"></script>
<script src="plugins/flexslider/flexslider.config.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/stellar.js"></script>
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script src="js/jquery.cubeportfolio.min.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/animate.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500, 500italic,700,700italic,900|Open+Sans:300,400,600, 700');
/* === prettify === */
@import url('../js/google-code-prettify/prettify.css');
/* === fontawesome === */
@import url('font-awesome.css');
/* === custom icon === */
@import url('custom-fonts.css');
/* ==== overwrite bootstrap standard ==== */
@import url('theme.css');
@import url('animate.css');
.directionrtl{direction:rtl;}
/* ===================================
1. General
==================================== */
body {
font-family: tahoma;
font-size:14px;
font-weight:300;
line-height:1.6em;
color:#656565;
}
a:active {
outline:0;
}
.clear {
clear:both;
}
h1,h2, h3, h4, h5, h6 {
font-family:'Roboto', sans-serif;
font-weight:700;
line-height:1.1em;
color:#666;
margin-bottom: 20px;
}
.highlight {
color: #fff !important;
padding: 0 8px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.color-white {
color: #fff;
}
/* ===================================
2. layout
==================================== */
#wrapper {
width:100%;
margin:0;
padding:0;
}
#wrapper.boxed {
width:1230px;
overflow:hidden;
margin:0 auto;
padding:0;
background:#fff;
}
.row,.row-fluid {
margin-bottom:30px;
}
.row .row,.row-fluid .row-fluid{
margin-bottom:30px;
}
.row.nomargin,.row-fluid.nomargin {
margin-bottom:0;
}
/* ===================================
3. Responsive media
==================================== */
.video-container,.map-container,.embed-container { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:none; }
.embed-container iframe,
.embed-container object,
.embed-container embed,
.video-container iframe,
.map-container iframe,
.map-container object,
.map-container embed,
.video-container object,
.video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
iframe {
border:none;
}
img.img-polaroid {
margin:0 0 20px 0;
}
.img-box {
max-width:100%;
}
/* ===================================
4. Header
==================================== */
/* === header === */
/* top area */
header .top .row {
margin-bottom: 0;
}
header .top {
padding:20px 0;
margin:0;
background: #f2f2f2;
}
header .top {
border-bottom: 1px solid #ddd;
}
header .top ul.topleft-info {
list-style: none;
margin: 10px 0 0;
padding-left: 0;
float:right;
}
header .top ul.topleft-info li {
display: inline;
margin: 0 20px 0 0;
padding:0;
font-weight: 600;
}
header .top ul.topleft-info li a:hover {
text-decoration: none;
outline: 0;
}
ul.social-network {
list-style:none;
margin:0;
padding:0;
}
ul.social-network li {
display:inline;
margin:0 5px;
}
ul.social-network li a:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
header .top ul.social-network li a {
color: #fff;
}
.sb-search {
position: relative;
width: 0%;
min-width: 36px;
height: 36px;
float: left;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
top: 0;
right: 0;
border: none;
outline: none;
background: #fff;
width: 60%;
height: 36px;
margin: 0;
z-index: 10;
padding: 2px 2px 2px 2px;
font-family: inherit;
font-size: 14px;
color: #2c3e50;
text-align:right;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}
.sb-search-input:-moz-placeholder {
color: #efb480;
}
.sb-search-input::-moz-placeholder {
color: #efb480;
}
.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit {
width: 36px;
height: 36px;
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 36px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
z-index: 90;
font-size: 14px;
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
}
.sb-icon-search:before {
content: "\f002";
}
/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #666;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
z-index: 90;
}
/* -- end top area */
header .navbar {
margin-bottom: 0;
}
.navbar-default {
border: none;
}
.navbar-brand {
color: #222;
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
line-height: 1em;
letter-spacing: -1px;
margin-top: 30px;
padding: 0 0 0 15px;
}
header .navbar-collapse ul.navbar-nav {
float: right;
margin-right: 0;
}
header .navbar-default{
background-color: #fff;
border-bottom: 1px solid #ddd;
}
header .nav li a:hover,
header .nav li a:focus,
header .nav li.active a,
header .nav li.active a:hover,
header .nav li a.dropdown-toggle:hover,
header .nav li a.dropdown-toggle:focus,
header .nav li.active ul.dropdown-menu li a:hover,
header .nav li.active ul.dropdown-menu li.active a{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
header .navbar-default .navbar-nav > .open > a,
header .navbar-default .navbar-nav > .open > a:hover,
header .navbar-default .navbar-nav > .open > a:focus {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
header .navbar {
min-height: 100px;
}
header .navbar-nav > li {
padding-bottom: 30px;
padding-top: 30px;
}
header .navbar-nav > li > a {
padding-bottom: 6px;
padding-top: 5px;
margin-left: 2px;
line-height: 30px;
font-weight: 700;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
header .nav .caret {
border-bottom-color: #f5f5f5;
border-top-color: #f5f5f5;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #fff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #fff;
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 1px solid #eee;
}
header .navbar-nav > li > ul > li {
border-bottom: 1px solid #eee;
}
header .navbar-nav > li > ul > li.dropdown-submenu > ul > li {
border-bottom: 1px solid #eee;
}
.dropdown-menu li:last-child {
padding-bottom: 0 !important;
margin-bottom: 0;
}
header .nav li .dropdown-menu {
padding: 0;
}
header .nav li .dropdown-menu li a {
line-height: 30px;
padding: 3px 12px;
text-align:right;
}
/* --- menu --- */
header .navigation {
float:right;
}
header ul.nav li {
border:none;
margin:0;
}
header ul.nav li a {
font-size:12px;
border:none;
font-weight:700;
text-transform:uppercase;
}
header ul.nav li ul li a {
font-size:13px;
border:none;
font-weight:400;
text-transform:none;
}
.navbar .nav > li > a,.navbar .nav > li.active > .dropdown-menu > li > a {
color: #444;
text-shadow: none;
}
.dropdown-menu li:hover,
.dropdown-menu li a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
background: #f5f5f5;
}
.navbar .nav a:hover {
background:none;
}
.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
background:none;
font-weight:700;
}
.navbar .nav > .active > a:active,.navbar .nav > .active > a:focus {
background:none;
outline:0;
font-weight:700;
}
.navbar .nav li .dropdown-menu {
z-index:2000;
}
header ul.nav li ul {
margin-top:1px;
}
header ul.nav li ul li ul {
margin:1px 0 0 1px;
}
.dropdown-menu .dropdown i {
position:absolute;
right:0;
margin-top:3px;
padding-left:20px;
}
.navbar .nav > li > .dropdown-menu:before {
display: inline-block;
border-right: none;
border-bottom: none;
border-left: none;
border-bottom-color: none;
content:none;
}
ul.nav li.dropdown a {
z-index:1000;
display:block;
}
header .nav .dropdown:hover > .dropdown-menu {
display: block;
margin-top: 0;
}
/* sub menu */
header ul.nav li ul li.dropdown-submenu li a {
color: #444;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
margin-left: 1px;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0;
border-radius: 0 0 0 0;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: "\f105";
font-family: 'FontAwesome';
float: right;
width: 0;
height: 0;
margin-top: 0;
margin-right: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/* =============================
21. Media queries
============================= */
@media (min-width: 979px) and (max-width: 1200px) {
#wrapper.boxed{
width:1000px;
margin:0 auto;
}
}
@media (min-width: 768px) and (max-width: 979px) {
#wrapper.boxed{
width:784px;
margin:0 auto;
}
a.detail{
background:none;
width:100%;
}
footer .widget form input#appendedInputButton {
display: block;
width: 91%;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
footer .widget form .input-append .btn {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top:10px;
}
ul.related-folio li{
width:156px;
margin:0 20px 0 0;
}
}
@media (max-width: 767px) {
body {
padding-right: 0;
padding-left: 0;
}
#wrapper.boxed{
width:90%;
margin:0 auto;
}
.navbar-brand {
margin-top: 10px;
border-bottom: none;
}
.navbar-header {
margin-top: 20px;
border-bottom: none;
}
.navbar-nav {
border-top: none;
padding-top: 30px;
float: none;
width: 100%;
}
header .navbar-nav > li {
padding-bottom: 0;
padding-top: 0;
}
header .nav li .dropdown-menu {
margin-top: 0;
}
.stats > div {
margin-bottom: 30px;
}
.dropdown-menu {
position: absolute;
top: 0;
left: 40px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 13px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #f5f5f5;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 0;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-collapse.collapse {
border: none;
overflow: hidden;
}
.box {
padding:20px 0;
margin-bottom: 20px;
}
#inner-headline .breadcrumb {
float:left;
clear:both;
width:100%;
}
.breadcrumb > li {
font-size:13px;
}
ul.portfolio li article a i.icon-48{
width:20px;
height:20px;
font-size:16px;
line-height:20px;
}
.left-sidebar{
border-right:none;
padding:0 0 0 0;
border-bottom: 1px dotted #e6e6e6;
padding-bottom:10px;
margin-bottom:40px;
}
.right-sidebar{
margin-top:50px;
border-left:none;
padding:0 0 0 0;
}
footer .col-lg-1, footer .col-lg-2, footer .col-lg-3, footer .col-lg-4, footer .col-lg-5, footer .col-lg-6,
footer .col-lg-7, footer .col-lg-8, footer .col-lg-9, footer .col-lg-10, footer .col-lg-11, footer .col-lg-12{
margin-bottom:20px;
}
#sub-footer ul.social-network {
float:left;
}
[class*="span"] {
margin-bottom:20px;
}
}
@media (max-width: 480px) {
.bottom-article a.pull-right {
float:left;
margin-top:20px;
}
.search{
float:left;
}
.cta-text {
margin:0 auto;
text-align:center;
}
ul.portfolio li article a i{
width:20px;
height:20px;
font-size:14px;
}
.main-slider .flex-caption {
bottom: 0;
text-align: center;
}
.main-slider .flex-caption p {
display: none;
}
.cta-btn {
float: none;
text-align: center;
}
}
@media (max-width: 360px) {
}