|
/** the nav object **/ |
|
.nav {} |
|
.nav ul { margin-bottom: 0; } |
|
.nav li { |
|
list-style: none; |
|
list-style-image: none; |
|
margin-left:0; |
|
} |
|
/** nav object for horizontal navigations **/ |
|
.nav.horizontal ul, |
|
.nav.horizontal li { display: inline; } |
|
|
|
/** nav object for horizontal navigations with divider |
|
* 1. divider style |
|
* 2. IE6, IE7 & IE8 content hack |
|
*/ |
|
.nav.horizontal.divider li:after, |
|
.lt-ie9 .nav.horizontal.divider li .ie-after { |
|
content: "|"; /* 1. */ |
|
padding:0 10px; |
|
display:inline-block; |
|
display:-moz-inline-stack; |
|
zoom: 1; |
|
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = "|"); /* 2. */ |
|
*display:inline; |
|
font-style: normal; |
|
} |
|
.nav.horizontal.divider li:last-child:after, |
|
.lt-ie9 .nav.horizontal.divider li:last-child .ie-after { |
|
content: ""; |
|
background: none repeat scroll 0 0 transparent; |
|
padding-left:0; |
|
/* IE6, IE7 & IE8 dont display content Hack ;) */ |
|
*color:transparent; |
|
*background-color: transparent; |
|
*font-size: 0; |
|
*line-height: 0; |
|
} |
|
|
|
/** nav object for breadcrumb, with divider **/ |
|
.nav.breadcrumb li{ |
|
display: inline; |
|
margin-left:20px; |
|
} |
|
/** |
|
* 1. divider |
|
* 2. IE6, IE7 & IE8 content hack |
|
*/ |
|
.nav.breadcrumb li:after, |
|
.lt-ie9 .nav.breadcrumb li .ie-after { |
|
content: "\25B8"; /* 1. */ |
|
display:inline-block; |
|
display:-moz-inline-stack; |
|
zoom: 1; |
|
*display:inline; |
|
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = "\25B8"); /* 2. */ |
|
font-size:1.5em; |
|
font-style: normal; |
|
padding:0 0 0 20px; |
|
vertical-align:middle; |
|
} |
|
.nav.breadcrumb li:last-child:after, |
|
.lt-ie9 .nav.breadcrumb li:last-child .ie-after { |
|
content: ""; |
|
/* IE6, IE7 & IE8 dont display content Hack ;) */ |
|
*color:transparent; |
|
*background-color: transparent; |
|
*font-size: 0; |
|
*line-height: 0; |
|
} |
|
.nav.breadcrumb li a {color: #2c4460 !important;} |
|
|
|
/** nav object for pagination **/ |
|
.nav.pagination { margin: 20px 0; } |
|
.nav.pagination ul { |
|
display: inline-block; |
|
display:-moz-inline-stack; |
|
*display: inline; |
|
margin-bottom: 0; |
|
margin-left: 0; |
|
-webkit-border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
border-radius: 4px; |
|
*zoom: 1; |
|
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); |
|
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); |
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); |
|
} |
|
.nav.pagination ul > li { display: inline; } |
|
/* 1. & 2. override with your color value */ |
|
.nav.pagination ul > li > a { |
|
float: left; |
|
padding: 4px 12px; |
|
line-height: 20px; |
|
text-decoration: none; |
|
background-color: #ffffff; /* 1. */ |
|
border: 1px solid #dddddd; /* 2. */ |
|
border-left-width: 0; |
|
} |
|
.nav.pagination ul > li > a:hover, |
|
.nav.pagination ul > .active > a { |
|
background-color: #f5f5f5; |
|
} |
|
.nav.pagination ul > .active > a { |
|
color: #999999; |
|
cursor: default; |
|
} |
|
|
|
|
|
/* `IE6, IE7 & IE8 ::after polyfill ============================================= */ |
|
.lt-ie9 .nav.horizontal.divider li, |
|
.lt-ie9 .nav.breadcrumb li { zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="ie-after" ); } |