/priv/skel/blog/lib/css/zp-menu.css

  1/* Styling for menu's in the default blog template.
  2----------------------------------------------------------
  3
  4@package:	Atatonic CSS framework 2009	
  5@Author: 	Tim Benniks <tim@timbenniks.nl>
  6@Created: 	10-12-2009
  7@Changed:	19-03-2010
  8
  9Copyright 2010 Tim Benniks <tim@timbenniks.nl>
 10
 11Licensed under the Apache License, Version 2.0 (the "License");
 12you may not use this file except in compliance with the License.
 13You may obtain a copy of the License at
 14
 15http://www.apache.org/licenses/LICENSE-2.0
 16
 17Unless required by applicable law or agreed to in writing, software
 18distributed under the License is distributed on an "AS IS" BASIS,
 19WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 20See the License for the specific language governing permissions and
 21limitations under the License.
 22
 23
 24/* navigation
 25---------------------------------------------------------- */
 26
 27nav {
 28	margin: 0 0 24px 0;
 29}
 30
 31
 32/*** ESSENTIAL STYLES ***/
 33.sf-menu, .sf-menu * {
 34	margin:			0;
 35	padding:		0;
 36	list-style:		none;
 37}
 38.sf-menu {
 39	line-height:	1.0;
 40}
 41.sf-menu ul {
 42	position:		absolute;
 43	top:			-999em;
 44	width:			14em; /* left offset of submenus need to match (see below) */
 45}
 46.sf-menu ul li {
 47	width:			100%;
 48}
 49.sf-menu li:hover {
 50	visibility:		inherit; /* fixes IE7 'sticky bug' */
 51}
 52.sf-menu li {
 53	float:			left;
 54	position:		relative;
 55}
 56.sf-menu a {
 57	display:		block;
 58	position:		relative;
 59}
 60.sf-menu li:hover ul,
 61.sf-menu li.sfHover ul {
 62	left:			0;
 63	top:			1.9em; /* match top ul list item height */
 64	z-index:		99;
 65}
 66ul.sf-menu li:hover li ul,
 67ul.sf-menu li.sfHover li ul {
 68	top:			-999em;
 69}
 70ul.sf-menu li li:hover ul,
 71ul.sf-menu li li.sfHover ul {
 72	left:			14em; /* match ul width */
 73	top:			0;
 74}
 75ul.sf-menu li li:hover li ul,
 76ul.sf-menu li li.sfHover li ul {
 77	top:			-999em;
 78}
 79ul.sf-menu li li li:hover ul,
 80ul.sf-menu li li li.sfHover ul {
 81	left:			14em; /* match ul width */
 82	top:			0;
 83}
 84
 85/*** SKIN ***/
 86.sf-menu {
 87	float:			left;
 88
 89}
 90.sf-menu a {
 91    border: 0;
 92	border-left:	1px solid #fff;
 93	padding: 		.45em 1em;
 94	text-decoration:none;
 95}
 96.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
 97	color:			#333;
 98}
 99.sf-menu li {
100
101}
102.sf-menu li li {
103	background:		#eee;
104}
105.sf-menu li li li {
106	background:		#eee;
107}
108.sf-menu li:hover, .sf-menu li.sfHover,
109.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
110	background:		#bbb;
111	outline:		0;
112}
113
114.sf-menu li ul li a {
115    border-top: 1px dotted #aaa;
116}
117
118.sf-menu a.current {
119    background: #ddd;
120}
121
122/*** arrows **/
123.sf-menu a.sf-with-ul {
124	padding-right: 	2.25em;
125	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
126}
127.sf-sub-indicator {
128	position:		absolute;
129	display:		block;
130	right:			.75em;
131	top:			1.05em; /* IE6 only */
132	width:			10px;
133	height:			10px;
134	text-indent: 	-999em;
135	overflow:		hidden;
136	background:		url('/lib/images/arrows-333333.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
137}
138a > .sf-sub-indicator {  /* give all except IE6 the correct values */
139	top:			.6em;
140	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
141}
142/* apply hovers to modern browsers */
143a:focus > .sf-sub-indicator,
144a:hover > .sf-sub-indicator,
145a:active > .sf-sub-indicator,
146li:hover > a > .sf-sub-indicator,
147li.sfHover > a > .sf-sub-indicator {
148	background-position: -10px -100px; /* arrow hovers for modern browsers*/
149}
150
151/* point right for anchors in subs */
152.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
153.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
154/* apply hovers to modern browsers */
155.sf-menu ul a:focus > .sf-sub-indicator,
156.sf-menu ul a:hover > .sf-sub-indicator,
157.sf-menu ul a:active > .sf-sub-indicator,
158.sf-menu ul li:hover > a > .sf-sub-indicator,
159.sf-menu ul li.sfHover > a > .sf-sub-indicator {
160	background-position: -10px 0; /* arrow hovers for modern browsers*/
161}
162
163/*** shadows for all but IE6 ***/
164.sf-shadow ul {
165	background:	url('/lib/images/shadow.png') no-repeat bottom right;
166	padding: 0 8px 9px 0;
167	-moz-border-radius-bottomleft: 17px;
168	-moz-border-radius-topright: 17px;
169	-webkit-border-top-right-radius: 17px;
170	-webkit-border-bottom-left-radius: 17px;
171}
172.sf-shadow ul.sf-shadow-off {
173	background: transparent;
174}
175    
176
177/* Footer navigation styles
178---------------------------------------------------------- */
179
180footer #navigation {
181	margin: 0;
182}
183
184footer #navigation li a {
185	font-size: 12px;
186	font-variant: small-caps;
187	text-transform: lowercase;
188	color: #666;
189	border: none;
190	margin: 0 6px 0 0;
191}
192
193	footer #navigation li a:hover {
194		color: #154868;
195	}