css3唱片滑动效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3唱片滑动效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3唱片滑动效果</title>
<link href="css/global.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/zurb.mega-drop.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Place all stylesheet code here */
@font-face {
font-family: 'Chunky';
src: local('ChunkFive'), local('ChunkFive'), 
url(img/Chunkfive.ttf) format('truetype');
}

@font-face {
font-family: 'Daniel';
src: local('Daniel'), local('Daniel'), 
url(img/daniel.ttf) format('truetype');
}

@font-face {
font-family: 'Deftone';
src: local('DEFTONE'), local('DEFTONE'), 
url(img/DEFTONE.ttf) format('truetype');
}

body { background: #fff url(img/wood-oak.jpg); }
div#wrapper { background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.15)), color-stop(.75, transparent)); }

div#content a { color: #fff; font-weight: bold; }
div#content a:hover { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.5); }

h1, h2, h3, h4, h5, h6, p { text-shadow: 0 1px 1px rgba(0,0,0,.5); }
h1, h2, h3, h4, h5, h6 { color: #; }
h2 { margin-bottom: 0; }		
p { font-size: 14px; line-height: 20px; margin-bottom: 20px; color: #; }
p small { display: block; font-size: 12px; line-height: 18px; color: #; }

div#footer { padding: 0 0 36px; }

div#pageHeader h1, div#pageHeader p {  font-family: "Myriad Pro", Helvetica Neue, Arial, sans-serif; text-shadow: 0 3px 6px rgba(0,0,0,.75); color: #fff; }
div#pageHeader h1 { font-size: 72px; margin-bottom: 4px; 
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
}
div#pageHeader p { font-size: 24px; line-height: 24px; margin-right: 25%; margin-bottom: 20px; opacity: .85; }
div#pageHeader p small { font-size: 14px; line-height: 18px; color: #fff; opacity: .5; }

div.zurb.divider { background-image: url(img/zurb-divider.png); }

pre { background: #f5f5f5; margin: 0 0 18px; padding: 13px 18px 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px 1px #fff; font-size: 11px; line-height: 16px; }

code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }

ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
ol.code li, ol.code li code { font-size: 14px !important; }
ol.code code { background: none; }


/* -------------------------------------------------- */

div#header a img { opacity: .5; }
div#header a:hover img { opacity: 1; }

ul.tunes { margin-left: -20px; }
ul.tunes li { position: relative; width: 200px; height: 190px; float: left; margin-left: 20px; }
ul.tunes li div.album { margin: 0 0 48px 0; display: inline; background: #; width: 200px; height: 120px; position: absolute; text-decoration: none; -webkit-transition: all .15s linear; color: #333; left: 0px; top: 0px; }
ul.tunes img { width: 120px; position: relative; z-index: 30; float: left; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -webkit-border-radius: 2px; }

ul.tunes li div.album div { display: block; opacity: .95; text-align: center; -webkit-transition: all .25s linear; clear: left; width: 120px;  }
ul.tunes li div.album div h5 { text-align: center; }
ul.tunes li div.album:hover div { opacity: 1; }

ul.tunes li div.album span.vinyl { width: 116px; height: 116px; z-index: 1; display: block; -webkit-transition: all .25s linear;  position: absolute; top: 2px; left: 2px; margin-left: 16px; }
ul.tunes li div.album span.vinyl div {
position: absolute; 
top: 2px; 
left: 2px; 
display: block; 
z-index: 10; 
width: 112px; 
height: 112px; 
-webkit-border-radius: 59px; 
-moz-border-radius: 59px; 
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.5); 
-webkit-transition: all .25s linear; 
overflow: hidden; 
border: solid 1px black; 
background:
-webkit-gradient(
linear, left top, left bottom, 
from(transparent),
color-stop(0.1, transparent),
color-stop(0.5, rgba(255,255,255,0.25)),
color-stop(0.9, transparent), 
to(transparent)),
-webkit-gradient(
radial, 56 56, 10, 56 56, 114, 
from(transparent),
color-stop(0.01, transparent),
color-stop(0.021, rgba(0,0,0,1)),
color-stop(0.09, rgba(0,0,0,1)),
color-stop(0.1, rgba(28,28,28,1)),
to(rgba(28,28,28,1)));
border-top: 1px solid rgba(255,255,255,.25);
}
ul.tunes li div.album:hover span.vinyl { -webkit-transform: translateX(60px); }
ul.tunes li div.album:hover span.vinyl div { -webkit-transform: rotate(120deg); border-top: 0; border-left: 1px solid rgba(255,255,255,.25); }

ul.tunes li span.gloss { display: block; position: absolute; top: 0; left: 0; width: 120px; height: 120px; background: url(img/sheen3.png) no-repeat; z-index: 100; }

ul.tunes li div.album ul.actions { display: block; position: absolute; width: 60px; -moz-border-radius: 3px; -webkit-border-radius: 3px;left: 35px; top: 0px; height: 114px; z-index: 20; -webkit-transition: all 0.25s linear; }
ul.tunes li div.album:hover ul.actions { -webkit-transform: translateX(60px); } 

ul.tunes li div.album ul.actions li { display: block; position: absolute; height: 20px; width: 20px; left: 10px; top: 22px; background: -webkit-gradient(linear, left top, left bottom, from(black), to(#333)); -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.15); }
ul.tunes li div.album ul.actions li:hover { background: -webkit-gradient(linear, left top, left bottom, from(#333), to(black)); }
ul.tunes li div.album ul.actions li.info { top: 48px; left: 19px; }
ul.tunes li div.album ul.actions li a { display: block; width: 20px; height: 20px; }
ul.tunes li div.album ul.actions li.play-pause a { background: url(img/play-button.png) no-repeat center center; }
ul.tunes li div.album ul.actions li.info a { background: url(img/info.png) no-repeat center center; }

ul.tunes li { text-shadow: 0 2px 3px rgba(0,0,0,.75); }

ul.tunes h5 { padding-top: 8px; color: #fff; }
ul.tunes small { color: #fff; opacity: .75; }


</style>
</head>
<body id="slidingVinylPage" class=" ">
<div class="container" id="megaDrop">
<div class="mobile-main-nav-padding">
<div class="row">
<div class="tablet-padding">
<div class="show-on-phones"><br /><br /></div>
<div class="three columns property" id="foundation">

</div>
<div class="show-on-phones"><br /><br /></div>
<div class="three columns property" id="apps">
</div>

<div class="show-on-phones"><br /><br /></div>
<div class="three columns property" id="expo">

</div>
</div>
</div>    
</div>
</div>
<div id="wrapper">
<div id="container" class="container">
<div id="content">
<div id="pageHeader">	
<h1></h1>
<p></p>
</div>
<ul class="tunes">
<li>
<div class="album">
<a href=""><img src="img/michael-jackson-thriller.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</ul>
<div>
<h5>Michael Jackson</h5>
<small>Thriller</small>
</div>
<span class="gloss"></span>
</div>
</li>
<li>
<div class="album">
<a href=""><img src="img/michael-jackson-bad.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</ul>
<div>
<h5>Michael Jackson</h5>
<small>Bad</small>
</div>
<span class="gloss"></span>
</div>
</li>
<li>
<div class="album">
<a href=""><img src="img/michael-jackson-off-the-wall.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</ul>
<div>
<h5>Michael Jackson</h5>
<small>Off the Wall</small>
</div>
<span class="gloss"></span>
</div>
</li>

<li>
<div class="album">
<a href=""><img src="img/jayz-the-blueprint-3.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</ul>
<div>
<h5>Jay-Z</h5>
<small>The Blueprint 3</small>
</div>
<span class="gloss"></span>
</div>
</li>
<li>
<div class="album">
<a href=""><img src="img/keane-perfect-symmetry.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</ul>
<div>
<h5>Keane</h5>
<small>Perfect Symmetry</small>
</div>
<span class="gloss"></span>
</div>
</li>
<li>
<div class="album">
<a href=""><img src="img/muse-the-resistance.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</ul>
<div>
<h5>Muse</h5>
<small>The Resistance</small>
</div>
<span class="gloss"></span>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

CSS代码(global.css):

/*--------------------------------------------------Global ZURB Styles--------------------------------------------------ZURBcolors--------------------------------------------------Green:#a5c941Red:#ff3700Med Green:#769926Med Red:#e33100Drk Green:#91ad52Drk Red:#872300Blue:#73cacfOrange:#ff6908Med Blue:#2daebfMed Orange:#ff5c00Drk Blue:#007d9aDrk Orange:#d45500Magenta:#c9025cYellow:#ffb515Med Magenta:#a9014bMed Yellow:#fc9200Drk Magenta:#630030Drk Yellow:#d17200--------------------------------------------------Global Reset-------------------------------------------------- */
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,img,small,strike,sub,sup,tt,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;text-align:left;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
/*--------------------------------------------------Make it a ZURBody-------------------------------------------------- */
body{background:#fff;font-family:Arial,Helvetica,Helvetica Neue,Verdana,sans-serif;font-size:13px;line-height:18px;color:#555;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
body.chrome,body.safari{text-shadow:rgba(0,0,0,0.1) 0px 0px 1px;}
/*--------------------------------------------------Links-------------------------------------------------- */
a{color:#2daebf;text-decoration:underline;outline:0;line-height:inherit;}
a:hover{color:#007d9a;}
a.muted{color:#777;}
a.muted:hover{color:#555;}
h1 a,h2 a,h3 a{color:#333;text-decoration:none;font-weight:bold;}
h4 a,h5 a{text-decoration:none;line-height:inherit;font-weight:bold;}
h3 a:hover{color:auto;}
h4 a:hover,h5 a:hover{text-decoration:underline;}
p a{line-height:inherit;}
/* More Links (Can be applied to a <ul> or a <p>) */
.more-link{width:100%;height:27px;margin:0 0 18px;}
.more-link a{background:#eee;display:inline;float:left;padding:4px 15px;text-decoration:none;-webkit-border-radius:13px;-moz-border-radius:13px;-webkit-transition:all 0.1s ease-out;}
.more-link.green a{background:#f1f6ce;color:#95a105 !important;}
.more-link.green a:hover{background:#95a105;}
.more-link.blue a{background:#f1fafa;color:#2daebf !important;}
.more-link.blue a:hover{background:#73cacf;}
.more-link.magenta a{background:#f9e5ee;color:#a9014b !important;}
.more-link.magenta a:hover{background:#c9025c;}
.more-link.red a{background:#ffebe5;color:#e33100 !important;}
.more-link.red a:hover{background:#ff3700;}
.more-link.orange a{background:#fff0e6;color:#ff5c00 !important;}
.more-link.orange a:hover{background:#ff6908;}
.more-link.orangellow a{background:#fff7e7;color:#fc9200 !important;}
.more-link.orangellow a:hover{background:#ffb515;}
.more-link a:hover{color:#fff !important;}
ul.more-link{list-style:none;}
ul.more-link li{display:inline;}
ul.more-link li.next a{float:right !important;}
/*--------------------------------------------------Typography-------------------------------------------------- */
h1,h2,h3,h4,h5,h6{color:#333;font-weight:bold;}
h1,h2,h3{letter-spacing:-1px;}
h1{font-size:45px;line-height:1;margin:0 0 9px;}
h2{font-size:30px;line-height:1.2;margin:9px 0;}
h3{font-size:24px;line-height:1;margin:3px 0 9px;}
h4{font-size:18px;line-height:1.2;margin:0;}
h5{font-size:14px;line-height:18px;}
h6{font-size:13px;line-height:18px;}
p{line-height:18px;margin:0 0 18px;}
p img{margin:0;}
p.lead{font-size:18px;line-height:24px;margin:0 0 18px;color:#777;}
small{font-size:90%;line-height:inherit;color:#777;font-weight:normal;}
/*Blockquotes (props to @paulrobertlloyd for inspiration) -------------------- */
/*Original blockquote stylesblockquote,blockquote p{font-size:14px;line-height:20px;color:#777;}
blockquote{margin:0 0 18px;padding:9px 20px 0 19px;border-left:1px solid #ddd;}
blockquote.solid{background:#f5f5f5;}
blockquote p{margin:0;padding:0 0 9px;}
blockquote h5{margin:0;}
blockquote cite{display:block;padding:0 0 9px 6px;font-size:12px;color:#555;}
blockquote cite:before{content:"\2014 \0020";}
blockquote cite a,blockquote cite a:visited{color:#555;}
blockquote cite a:hover{color:#555;text-decoration:none;}
*/
blockquote,blockquote p{font-size:16px;line-height:24px;color:#777;font-style:italic;}
blockquote{margin:0 0 18px 1px;padding-left:15px;border-left:1px solid #ccc;}
blockquote.left{float:left;margin-right:20px;}
blockquote.right{float:right;margin-left:20px;}
blockquote p{margin:0;padding:0 0 9px;}
blockquote h5{margin:0;}
blockquote cite{display:block;padding:0 0 9px;font-size:13px;color:#999;}
/*blockquote cite:before{content:"\2014 \0020";}
*/
blockquote cite a,blockquote cite a:visited{color:#555;}
blockquote cite a:hover{color:#555;text-decoration:none;}
blockquote.black p{color:#333;}
blockquote.green p{color:#b8d30b;}
blockquote.blue p{color:#007d9a;}
blockquote.magenta p{color:#630030;}
blockquote.red p{color:#872300;}
blockquote.orange p{color:#d45500;}
blockquote.yellow p{color:#d17200;}
hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:17px 0 18px;height:0;}
body.ie6 hr{margin:8px 0 9px;}
code,pre{font:12px/18px "Monaco","Courier New","Courier",monospace;color:#e33100;}
address{color:#333;line-height:18px;margin:0 0 18px;}
abbr,acronym{text-transform:uppercase;font-size:90%;color:#222;border-bottom:1px solid #ddd;cursor:help;}
abbr{text-transform:none;}
/*--------------------------------------------------Lists-------------------------------------------------- */
ul,ol{margin-bottom:18px;}
ul{list-style:none outside;}
ol,ul.square,ul.circle,ul.disc{margin-left:24px;}
ol{list-style:decimal;margin-left:30px;}
ul.square{list-style:square outside;}
ul.circle{list-style:circle outside;}
ul.disc{list-style:disc outside;}
ul ul,ol ol{margin-left:30px;margin-top:4px;margin-bottom:5px;}
li{line-height:18px;}
dt{line-height:18px;font-weight:bold;color:#333;}
dd{margin:0 0 18px;line-height:18px;}
/*Recent Updates -------------------- */
ul.recent li{margin:0 0 12px;line-height:15px;}
ul.recent li h5{font-size:13px;line-height:15px;}
ul.recent li h5 a{font-weight:bold;}
ul.recent li small,ul.recent li small a{color:#999 !important;}
ul.recent li small a:hover{color:#555 !important;}
ul.recent li small span{padding:0 3px;color:#ccc;font-size:100%;}
/* Recent comments */
ul.recent.comments li{color:#999;}
/* Recent photos */
ul.photos{margin:9px 0 18px -10px;}
ul.photos li{display:inline;}
ul.photos a{display:inline;float:left;margin:0 0 9px 10px;line-height:1;text-decoration:none;}
ul.photos img{display:block;margin:0 0 5px;padding:4px;border:1px solid #ccc;border-color:rgba(0,0,0,.25);-moz-border-radius:5px;-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);-webkit-border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);-webkit-transition:all 0.15s ease-out;}
ul.photos a:hover img{border-color:#999;border-color:rgba(0,182,222,.5);-moz-box-shadow:0 0 9px rgba(0,182,222,.5);-webkit-box-shadow:0 0 9px rgba(0,182,222,.5);}
ul.photos li h5{font-size:14px;}
ul.photos.small{margin-left:-15px;}
ul.photos.small a{margin:0 0 14px 15px;}
ul.photos.medium,ul.photos.large{margin-left:-20px;}
ul.photos.medium a,ul.photos.large a{margin:0 0 18px 20px;}
ul.photos.medium img{width:90px;height:90px;}
ul.photos.large img{width:162px;height:162px;}
ul.photos.xlarge img{width:210px;height:210px;}
/* Awesome Rounded White Border Images ------- */
a.awesome.image img,img.awesome.image,ul.awesome.images img,div.awesome.image{display:inline;position:relative;margin:0 0 5px;padding:4px;border:1px solid #ccc;border-color:rgba(0,0,0,.25);-moz-border-radius:5px;-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);-webkit-border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);-webkit-transition:all 0.15s ease-out;}
ul.images.awesome{margin-left:-20px;margin-bottom:0;padding-top:9px;margin-top:-9px;}
ul.images.awesome li{float:left;margin:0 0 0 20px;position:relative;}
ul.images.awesome img{height:auto;margin-bottom:9px;background:#fff;}
ul.images.awesome a{margin:0;float:none;height:auto;}
ul.images.awesome a:hover img{border-color:rgba(0,182,222,.5);-moz-box-shadow:0 0 9px rgba(0,182,222,.5);-webkit-box-shadow:0 0 9px rgba(0,182,222,.5);}
ul.images.awesome a h4{color:#007d9a;-webkit-transition:all 0.15s ease-out;}
ul.images.awesome a:hover h4{color:#2daebf;}
ul.images.awesome a.button{float:none;margin:0 5px 0 0;display:inline-block;}
ul.images.awesome p{margin-bottom:9px;}
ul.images.awesome.micro li{width:100px;overflow:hidden;}
ul.images.awesome.micro li img{width:90px;}
ul.images.awesome.mini li{width:160px;overflow:hidden;}
ul.images.awesome.mini li img{width:150px;}
ul.images.awesome.regular li{width:220px;overflow:hidden;}
ul.images.awesome.regular li img{width:210px;}
ul.images.awesome.grande li{width:340px;overflow:hidden;}
ul.images.awesome.grande li img{width:330px;}
ul.images.awesome li ul{margin:0;}
ul.images.awesome li li{width:auto;float:none;height:auto;margin:0;display:block;}
ul.images.awesome li li a{line-height:20px;}
a.image.awesome img:hover{border-color:rgba(0,182,222,.5);-moz-box-shadow:0 0 9px rgba(0,182,222,.5);-webkit-box-shadow:0 0 9px rgba(0,182,222,.5);}
/* -------------------------------------------------- Tabs -------------------------------------------------- */
 ul.tab-nav{height:30px;border-bottom:1px solid #ddd;}
ul.tab-nav li{display:inline;}
ul.tab-nav a{display:inline;float:left;margin-top:2px;margin-right:1px;padding:5px 11px;font-size:12px;font-weight:bold;color:#555;background:#eee;-moz-border-radius:3px 3px 0 0;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;}
ul.tab-nav li.current a{background:#fff;margin-top:0;padding:6px 12px;color:#333;border:1px solid #ccc;border-bottom:0;}
div.simple-sub-nav ul{float:left;width:100%;border-top:2px solid #eee;padding-bottom:30px;margin-top:-33px;}
div.simple-sub-nav li{float:left;font-size:17px;font-weight:bold;border-top:5px solid #fff;padding:5px 18px 5px 2px;margin-right:5px;}
div.simple-sub-nav li a{text-decoration:none;color:#868686;}
div.simple-sub-nav li a:hover{color:#a9014b;}
div.simple-sub-nav li.current{border-top:5px solid #a9014b;}
div.simple-sub-nav li.current a{color:#3b3b3b;}
/*Code Lists -------------------- */
ol.code{background:#333;border:0;margin:0 0 18px;padding:18px;list-style:none;}
ol.code li{color:#fff;margin:0;line-height:18px;padding:0;font-family:"Consolas","Courier New",Monaco,Courier,monospace;}
ol.code li code{font-family:"Consolas","Courier New",Monaco,Courier,monospace;font-size:12px;line-height:inherit;color:inherit;}
ol.code .indent-1{padding-left:2em;}
ol.code .indent-2{padding-left:4em;}
ol.code .indent-3{padding-left:6em;}
ol.code li.selector{color:#39c;}
ol.code li.property{color:#f63;padding:0 0 0 2em;}
ol.code li.property span.value,ol.code .class{color:#9c3;}
ol.code li.punctuate,ol.code li.selector span.punctuate,ol.code li.property span.punctuate{color:#999;}
/* Awesome Rounded White Border Images ------- */
a.awesome.photo img,img.awesome.photo{display:inline;position:relative;margin:0 0 5px;padding:4px;border:1px solid #ccc;border-color:rgba(0,0,0,.25);-moz-border-radius:5px;-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);-webkit-border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);-webkit-transition:all 0.15s ease-out;}
ul.photos.awesome{margin-left:-20px;margin-bottom:0;padding-top:9px;margin-top:-9px;}
ul.photos.awesome li{float:left;margin:0 0 0 20px;position:relative;}
ul.photos.awesome img{height:auto;margin-bottom:9px;background:#fff;}
ul.photos.awesome a{margin:0;float:none;height:auto;}
ul.photos.awesome a:hover img{border-color:rgba(0,182,222,.5);-moz-box-shadow:0 0 9px rgba(0,182,222,.5);-webkit-box-shadow:0 0 9px rgba(0,182,222,.5);}
ul.photos.awesome a h4{color:#007d9a;-webkit-transition:all 0.15s ease-out;}
ul.photos.awesome a:hover h4{color:#2daebf;}
ul.photos.awesome a.button{float:none;margin:0 5px 0 0;display:inline-block;}
ul.photos.awesome p{margin-bottom:9px;}
ul.photos.awesome.micro li{width:100px;overflow:hidden;}
ul.photos.awesome.micro li img{width:90px;}
ul.photos.awesome.mini li{width:160px;overflow:hidden;}
ul.photos.awesome.mini li img{width:150px;}
ul.photos.awesome.regular li{width:220px;overflow:hidden;}
ul.photos.awesome.regular li img{width:210px;}
ul.photos.awesome.grande li{width:340px;overflow:hidden;}
ul.photos.awesome.grande li img{width:330px;}
ul.photos.awesome li ul{margin:0;}
ul.photos.awesome li li{width:auto;float:none;height:auto;margin:0;display:block;}
ul.photos.awesome li li a{line-height:20px;}
a.photo.awesome img:hover{border-color:rgba(0,182,222,.5);-moz-box-shadow:0 0 9px rgba(0,182,222,.5);-webkit-box-shadow:0 0 9px rgba(0,182,222,.5);}
/*@group Tables-------------------------------------------------- */
table{background:#fff;width:100%;margin:0 0 18px;border:solid #ddd;border-width:0 1px 1px 0;border-collapse:separate;-webkit-border-radius:5px;-moz-border-radius:5px;}
table thead{background:#555;}
table thead tr th,table tbody tr td{font-size:12px;line-height:18px;}
table thead tr{}
table thead tr th{padding:8px 10px 9px;font-size:14px;font-weight:bold;color:#fff;}
table tbody{}
table tbody tr{}
table tbody tr.even,table tbody tr.alt{background:#f5f5f5;}
body.safari table tbody tr:nth-child(even){background:#f5f5f5;}
table tbody tr td{color:#333;padding:9px 10px;border-left:1px solid #ddd;border-right:1px solid #fff;vertical-align:top;}
/* Get fancy with rounded corners */
table thead tr th:first-child{-webkit-border-top-left-radius:5px;-moz-border-radius:3px 0 0 0;}
table thead tr th:last-child{-webkit-border-top-right-radius:5px;-moz-border-radius:0 3px 0 0;}
table tbody tr:last-child td:first-child{-webkit-border-bottom-left-radius:5px;-moz-border-radius:0 0 0 3px;}
table tbody tr:last-child td:last-child{-webkit-border-bottom-right-radius:5px;-moz-border-radius:0 0 3px 0;}
/* Style the tables a bit lighter */
table.alt{border-width:1px 1px 1px 0;}
table.alt thead{background:#f5f5f5;}
table.alt thead tr th{color:#222;border-left:1px solid #ddd;border-right:1px solid #fff;}
/* @end */
/*@group Forms-------------------------------------------------- */
form{margin:0 0 18px;}
fieldset{}
label{display:block;font-size:13px;font-weight:bold;line-height:18px;cursor:pointer;}
button,input.input-text,input.password,input.button,textarea,select{font-family:Helvetica Neue,"Arial",Helvetica,Verdana,sans-serif;font-size:12px;}
input.input-text,input.password,textarea{display:block;background:#fff url(/playground/images/forms/input-bg.png) no-repeat 0 0;width:;margin:0 0 10px;padding:3px 5px;border:1px solid #bbb;-moz-border-radius:2px;-webkit-border-radius:2px;-webkit-box-shadow:0 1px 1px #fff;font:13px/18px Helvetica Neue,"Arial",Helvetica,Verdana,sans-serif;color:#777;}
form select:focus,form input.input-text:focus,form textarea:focus{outline:none;}
form input.input-text:focus,form textarea:focus{border-color:#999;color:#333;padding:2px 4px;border:2px solid #2daebf;}
form input.input-text.error,form textarea.error{color:#e33100;padding:2px 4px;border:2px solid #e33100;}
textarea{width:272px;}
span.wrap{background:#eee;display:inline-block;margin:0 0 14px;padding:3px;line-height:1;-moz-border-radius:5px;-webkit-border-radius:5px;}
span.wrap input,span.wrap textarea,span.wrap small,span.wrap p{display:inline;vertical-align:top;margin-bottom:0;}
span.wrap small{font-size:12px;color:#666;line-height:18px;padding:3px 10px 0 2px;position:relative;top:4px;}
/* IE6 Sucks */
body.ie6 input.input-text,body.ie6 input.password,body.ie6 textarea{background-image:url(/playground/images/forms/input-bg.gif);padding:5px 5px 6px;}
/* Firefox 3.5 Sucks */
body.ff3 input.input-text{padding:4px 5px;}
body.ff3 input.input-text:focus{padding:3px 4px;}
/* Text input and textarea sizes */
input.mini,textarea.mini{width:90px;}
input.small,textarea.small{width:120px;}
input.medium,textarea.medium{width:330px;}
input.large,textarea.large{width:570px;}
input.fluid,textarea.fluid{width:700px;}
/* Text input and textarea sizes for stuff in the span wraps */
span.wrap input.mini,span.wrap textarea.mini{width:90px;}
span.wrap input.small,span.wrap textarea.small{width:120px;}
span.wrap input.medium,span.wrap textarea.medium{width:324px;}
span.wrap input.large,span.wrap textarea.large{width:564px;}
span.wrap input.fluid,span.wrap textarea.fluid{width:680px;}
/* Sets of checkboxes and radio buttons */
ul.options{margin-bottom:18px;}
ul.options li{padding:0 0 3px;}
ul.options li label{font-size:13px;font-weight:normal;}
ul.options li input.radio,ul.options li input.checkbox{}
/* Inline options */
ul.options.inline{}
ul.options.inline li{display:inline;padding-right:8px;}
ul.options.inline li.label{font-weight:bold;background:none;color:#333;text-transform:none;padding:0;display:inline;font-size:13px;}
ul.options.inline label{display:inline;}
/* Actions (buttons and links) at the bottom of forms) */
fieldset.actions{margin:9px 0 0;padding:12px 0 13px;text-align:right;border-top:1px solid #ddd;}
fieldset.actions *{display:inline-block;}
/* Super Awesome Brand New Mega Cool Inline Labels */
label.inlined{padding-left:7px;font-weight:normal;font-size:16px;opacity:0.75;-webkit-transition:color 0.15s linear;position:relative;z-index:100;}
label.inlined + input.input-text{margin-top:-24px;background-color:transparent;}
label.inlined.focus{color:#bbb;}
label.inlined.has-text{color:#fff;-webkit-transition-duration:0.0s;}
/* @end */
/*@group ZURButtons-------------------------------------------------- */
.button{background:#222 url(/playground/images/overlay-button.png) repeat-x 0 0;display:inline-block;padding:5px 15px 6px;color:#fff !important;font-size:13px;font-weight:bold;line-height:1;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);text-shadow:0 -1px 1px rgba(0,0,0,0.25);border-bottom:1px solid rgba(0,0,0,0.25);position:relative;cursor:pointer;overflow:visible;width:auto;}
button::-moz-focus-inner{border:0;padding:0;}
.button:hover{background-color:#111;color:#fff;}
.button:active{-webkit-transform:translateY(1px);-moz-transform:translateY(1px);}
/* Small Buttons */
.small.button{font-size:11px;}
/* Large Buttons */
.large.button{font-size:14px;padding:8px 19px 9px;}
/* Colors for our beloved buttons */
.green.button{background-color:#91bd09;}
.green.button:hover{background-color:#749a02;}
.blue.button{background-color:#2daebf;}
.blue.button:hover{background-color:#007d9a;}
.red.button{background-color:#e33100;}
.red.button:hover{background-color:#872300;}
.magenta.button{background-color:#a9014b;}
.magenta.button:hover{background-color:#630030;}
.orange.button{background-color:#ff5c00;}
.orange.button:hover{background-color:#d45500;}
.orangellow.button{background-color:#ffb515;}
.orangellow.button:hover{background-color:#fc9200;}
.white.button{background-color:#fff;border:1px solid #ccc;color:#666 !important;font-weight:normal;text-shadow:0 1px 1px rgba(255,255,255,1);}
.white.button:hover{background-color:#eee;}
/*Strike button*/
.strike.button{background-color:#4ADFC1}
.strike.button:hover{background-color:#39ceb0}
/* Secondary buttons (perfect for Cancels or other secondary actions */
.secondary.button{background:#fff url(/playground/images/gradients/36px-black.png) repeat-x 0 0;color:#555 !important;text-shadow:0 1px 1px rgba(255,255,255,0.5);border:1px solid #bbb;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.secondary.button:hover{background-color:#eee;color:#444 !important;border-color:#999;}
/* Make the buttons super awesomer */
.super.button{background-image:url(/playground/images/super-button-overlay.png);font-size:13px;padding:0;border:1px solid rgba(0,0,0,.25);-webkit-border-radius:15px;-moz-border-radius:15px;}
.super.button span{display:block;padding:4px 15px 6px;-webkit-border-radius:14px;-moz-border-radius:14px;border-top:1px solid rgba(255,255,255,.2);line-height:1;}
.small.super.button{font-size:11px;-webkit-border-radius:12px;-moz-border-radius:12px;}
.small.super.button span{padding:2px 12px 6px;-webkit-border-radius:11px;-moz-border-radius:11px;}
.small.white.super.button span{padding:3px 12px 5px;}
.large.super.button{background-position:left bottom;-webkit-border-radius:18px;-moz-border-radius:18px;}
.large.super.button span{font-size:14px;padding:7px 20px 9px;-webkit-border-radius:17px;-moz-border-radius:17px;}
/*@group Structure-------------------------------------------------- */
/*Container ------------------------------------- */
div#container,div.container{position:relative;width:980px;margin:0 auto;padding:0;}
body.ie8 div#container{position:static;}
/*Header ---------------------------------------- */
div#header{position:relative;height:54px;margin:0 auto 36px;}
/* ZURB logo image */
div#header img{display:block;float:left;margin:25px 0 0;}
/* Text in the header on the top left */
div#header h3{float:left;font-size:24px;line-height:1;margin:0;position:absolute;top:21px;left:0;letter-spacing:-1px;}
div#header h3 a,div#header h3 a:visited{font-weight:bold;}
div#header h3 a:hover{color:#777;}
/* @end */
/*@group Navigation-------------------------------------------------- */
ul.tabs{float:right;margin:0;}
ul.tabs li{display:block;float:left;line-height:1;}
ul.tabs li a{display:block;font-weight:bold;width:90px;margin:9px 0 0 -1px;padding:18px 5px 11px 15px;border-left:1px solid #eee;text-decoration:none;color:#333;cursor:pointer;}
ul.tabs li a:hover,ul.tabs li.current a{background:#b8d30b;color:#fff;border:0;margin:0;padding-top:27px;text-shadow:0 -1px 1px rgba(0,0,0,.25);-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px;-moz-border-radius:0 0 3px 3px;position:relative;z-index:2;}
ul.tabs li span{display:block;font-size:16px;line-height:1;font-weight:bold;}
/* Hover colors for each main ZURB section */
ul.tabs li a.home:hover{background:#b8d30b;}
ul.tabs li a.talent:hover{background:#a9014b;}
ul.tabs li a.work:hover{background:#2daebf;}
ul.tabs li a.blog:hover{background:#ff6908;}
ul.tabs li a.contact:hover{background:#fc9200;}
/* Shortened tabs for within apps (dashboard) */
ul.tabs.short li a{padding:9px 5px 13px 15px;}
ul.tabs.short li a:hover,ul.tabs.short li.current a{padding:18px 5px 13px 15px;}
ul.tabs.short li span{font-size:14px;}
/* Pill Nav */
ul.pill-nav{list-style:none;height:26px;margin:0;float:right;}
ul.pill-nav li{display:inline;}
ul.pill-nav li a{font-weight:normal;padding:4px 10px 4px;-webkit-border-radius:12px;-moz-border-radius:12px;text-decoration:none;}
ul.pill-nav li a:hover{background-color:#eee;color:#666;}
ul.pill-nav li a.current,ul.pill-nav li.current a{background:#2daebf;color:#fff;font-weight:bold;cursor:text;}
ul.pill-nav li a.unviewed{font-weight:bold;}
/* @end */
/*@group Admin Header-------------------------------------------------- */
div#ZURBar{background:#222;height:36px;width:100%;}
div#ZURBar h6{display:inline;padding:0;font-size:18px;}
div#ZURBar h6 a{float:left;display:block;margin:0 10px;line-height:1;color:#fff;text-decoration:none;background:#a5c941;}
div#ZURBar h6 a:hover{}
/* Revamped navigation elements */
ul.nav{float:left;margin:0;padding:0;list-style:none;position:relative;}
ul.nav li{display:inline;color:#999;line-height:1;}
ul.nav li a span{display:inline;font-weight:normal;opacity:.75;line-height:.9;}
ul.nav li a,ul.nav li.faux-link{float:left;display:inline;width:auto;text-decoration:none;text-shadow:0 -1px 1px #222;line-height:1;}
ul.nav li a{padding:0 15px;height:36px;line-height:36px;font-weight:bold;color:#fff;}
ul.nav li a:hover{color:#fff;text-decoration:underline;}
ul.nav li.faux-link a:hover{text-decoration:underline;color:#fff;}
ul.nav li.faux-link{font-weight:normal;color:#777;height:36px;line-height:36px;padding:0 10px;}
ul.nav li.faux-link a{display:inline;float:none;padding:0;height:auto;line-height:1;}
ul.nav li.faux-link a:hover{background:none;}
ul.nav li.faux-link small,ul.nav li.faux-link small a{font-weight:normal;color:#999;}
ul.nav li.search{padding:0 10px;}
ul.nav li.search form{line-height:;}
ul.nav li.search form input{margin:7px 0 0;color:#777;}
ul.user.nav li.current a{background:#000;}
/* User and account links in top right */
ul.account.nav{position:absolute;top:0;right:10px;}
ul.account.nav a{font-weight:normal;}
ul.nav li.menu{position:relative;float:left;}
ul.nav li.menu a{display:block;float:none;}
ul.nav li.menu a img.arrow{vertical-align:middle;position:relative;top:-1px;opacity:.5;margin-left:3px;}
ul.nav li.menu a:hover{text-decoration:none;background:#333;}
/* Level 1 Flyouts */
ul.nav li.menu ul{background:#333;background:#333 -webkit-gradient(linear,0 0,0 100%,from(#333),to(#222));width:190px;margin:0;padding:5px 0;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 15px rgba(0,0,0,.25);-moz-box-shadow:0 5px 15px rgba(0,0,0,.25);position:absolute;top:36px;left:-999em;z-index:5000;}
ul.nav li.menu ul li{display:block;position:relative;}
ul.nav li.menu ul li.divider{margin:4px 1px;border-bottom:1px solid #222;border-bottom-color:rgba(255,255,255,.05);border-top:1px solid #000;border-top-color:rgba(0,0,0,.5);}
ul.nav li.menu ul li a{float:none;display:block;height:auto;padding:2px 15px 3px;line-height:18px;font-weight:normal;}
ul.nav li.menu ul li.secondary a{color:#999;}
ul.nav li.menu ul li a:hover{background:#b8d30b;background:#b8d30b -webkit-gradient(linear,0 0,0 100%,from(#b8d30b),to(#9ec106));font-weight:bold;color:#fff;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,.25);}
/* Level 2 Flyouts */
ul.nav li.menu ul li ul{position:absolute;top:0;left:0;margin-left:190px;display:none;-webkit-border-top-right-radius:5px;-moz-border-radius:0 5px 5px 5px;}
ul.nav li.menu ul li:hover ul{display:block;}
ul.nav li.menu:hover{background:#333;}
ul.nav li.menu:hover ul{left:auto;}
ul.nav li.menu:hover img.arrow{opacity:1;}
ul.nav li.menu ul li.zurbword{padding:2px 15px;font-weight:bold;color:#fff;line-height:18px;}
/* ZURBmenu */
ul.nav li#ZURBmenu a{padding:0 12px;}
ul.nav li#ZURBmenu strong{background-color:#b8d30b;display:block;width:42px;height:50px;position:relative;z-index:5001;}
ul.nav li#ZURBmenu ul{padding-top:9px;-webkit-border-bottom-left-radius:0;-moz-border-radius:0 0 5px 0;}
ul.nav li#ZURBmenu ul li a{padding:2px 15px;}
ul.nav li#ZURBmenu:hover strong{background:url(/playground/images/zurb-nub-shell-hover.png) no-repeat 0 0;}
ul.nav li#ZURBmenu:hover strong img{display:none;}
/* @end */
/*--------------------------------------------------Page & Section Headers-------------------------------------------------- */
/*Page headers for marketing pages ---------- */
div.page-header{width:100%;position:relative;margin:0 0 31px;padding:36px 0 27px;border-bottom:2px solid #eee;clear:both;background-position:right bottom;background-repeat:no-repeat;}
div.page-header h1{display:block;font-size:81px;line-height:1;font-weight:bold;letter-spacing:-3px;margin:0;color:#222;}
div.page-header h2{margin:6px 0 0;font-size:24px;line-height:1.25;color:#777;font-weight:normal;letter-spacing:0;}
div.page-header h2 a{text-decoration:underline;font-weight:inherit;line-height:inherit;}
div.page-header h2 a.button{display:inline-block;position:relative;top:-5px;}
div.page-header h1 span,div.page-header h2 span{display:block;}
div.page-header h1 small,div.page-header h2 small{font-size:75%;font-weight:normal;}
/*Sub headers ---------- */
div.sub-header{position:relative;margin:0 0 18px;padding:0 0 8px;border-bottom:1px solid #ddd;}
div.sub-header h3{color:#222;}
div.sub-header h3 small{color:#777;font-size:18px;}
div.sub-header ul{margin-bottom:0;position:absolute;right:0;bottom:8px;}
/*New section page headers for (for things like Talent,Work,etc) */
div#sectionHeader{}
/*New secondary page headers for marketing pages and apps */
div#pageHeader{margin:0 0 27px;}
div#pageHeader h1,div#pageHeader.single-post h3{font-size:36px;line-height:1;letter-spacing:-1px;color:#222;}
div#pageHeader h1 small,div#pageHeader.single-post h3 small{font-size:18px;font-weight:normal;letter-spacing:0;color:#999;}
div#pageHeader p{font-size:14px;color:#999;}
div#pageHeader div.sub-nav{background:#f5f5f5;height:24px;padding:8px 10px 7px;border-bottom:1px solid #eee;overflow:hidden;-moz-border-radius:3px;-webkit-border-radius:3px;}
div#pageHeader ul{height:24px;margin:0 0 0 -4px;}
div#pageHeader li{display:inline;line-height:1;}
div#pageHeader li a,div#pageHeader li.divider{float:left;width:auto;padding:6px 12px;line-height:1;}
div#pageHeader li a{margin:0 0 0 4px;text-decoration:none;-webkit-border-radius:12px;-moz-border-radius:12px;font-weight:bold;color:#333;text-shadow:0 1px 1px #fff;}
div#pageHeader li.divider{color:#ccc;width:5px;padding:7px 8px 0 10px;text-shadow:0 -1px -1px #aaa;}
div#pageHeader li a:hover,div#pageHeader li.current a{background:#a5c941;margin-top:0;padding:4px 12px 6px;color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,.25);border-top:1px solid rgba(0,0,0,.15);-webkit-box-shadow:0 1px 1px #fff;-moz-box-shadow:0 1px 1px #fff;}
div#pageHeader ul.options{float:right;margin:0;padding:6px 0 0;height:auto;}
div#pageHeader ul.options li a{font-weight:normal;padding:0;border:0;-webkit-border-radius:0;-moz-border-radius:0;}
div#pageHeader ul.options li a:hover{background:none;color:#555;}
/*Give us a search form*/
div#pageHeader li.form{padding-left:8px;float:left;display:inline;}
div#pageHeader li.form form{margin:0;}
div#pageHeader li.form form input.input-text{background:#fff url(/playground/images/icons/16px/search.gif) no-repeat 4px center;width:155px;padding:3px 12px 3px 21px;color:#777;-webkit-border-radius:12px;-moz-border-radius:12px;border-color:#ddd;border-top-color:#ccc;}
/*@group Grid-------------------------------------------------- */
.column-row,.row{margin:0 0 18px -20px;}
.column,.columns{float:left;display:inline;margin:0 0 0 20px;}
/*#contentMain{width:600px;}
#contentSec{width:300px;margin-left:40px;}
*/
.row{width:100%;max-width:980px;min-width:727px;margin:0 auto;}
.one{width:40px;}
.two{width:100px;}
.three{width:160px;}
.four{width:220px;}
.five{width:280px;}
.six{width:340px;}
.seven{width:400px;}
.eight{width:460px;}
.nine{width:520px;}
.ten{width:580px;}
.eleven{width:640px;}
.twelve{width:700px;}
.thirteen{width:760px;}
.fourteen{width:820px;}
.fifteen{width:880px;}
.sixteen{width:940px;}
.one-half{width:450px;padding-right:10px;}
.one-third{width:300px;}
.two-thirds{width:620px;}
.eleven .column-row{width:660px;}
.twelve .column-row{width:720px;}
.offset-by-one-half{margin-left:50px;}
.offset-by-one{margin-left:80px;}
.offset-by-two{margin-left:140px;}
.offset-by-three{margin-left:200px;}
.offset-by-four{margin-left:260px;}
.offset-by-five{margin-left:320px;}
.offset-by-six{margin-left:380px;}
.offset-by-seven{margin-left:440px;}
.offset-by-eight{margin-left:500px;}
.offset-by-nine{margin-left:560px;}
.offset-by-ten{margin-left:620px;}
.offset-by-eleven{margin-left:680px;}
.offset-by-twelve{margin-left:740px;}
.offset-by-thirteen{margin-left:800px;}
.offset-by-fourteen{margin-left:880px;}
.last{margin:0;}
/* Clear the columns automagically,thanks @kneath */
.column-row:after,.row:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
* html .column-row,* html .row,* html .clearfix{height:1%;}
.column-row,.row,.clearfix{display:inline-block;}
.column-row,.row,.clearfix{display:block;}
/*IE6 Problems ---------- */
body.ie .column-row{width:960px;}
body.ie .eight .column-row{width:480px;}
body.ie .nine .column-row{width:540px;}
body.ie .ten .column-row{width:600px;}
body.ie .eleven .column-row{width:660px;}
body.ie .twelve .column-row{width:720px;}
body.ie .thirteen .column-row{width:780px;}
body.ie .fourteen .column-row{width:840px;}
body.ie .fifteen .column-row{width:900px;}
body.ie .two-thirds .column-row{width:640px;}
/* @end */
/*@group Alerts & Errors---------------------------------------- */
/* Plain,Simple Alert */
p.warning,p.error,p.success,p.info{margin:0 0 18px;padding:9px 15px;-webkit-border-radius:6px;-moz-border-radius:6px;color:#fff;text-shadow:0 0 1px rgba(0,0,0,0.01);}
p.warning a,p.error a,p.success a,p.info a{color:#fff;font-weight:bold;text-decoration:underline;}
/* Warnings */
p.warning{background-color:#ffb515;}
p.warning small{color:#d17200;}
/* Errors */
p.error{background-color:#df4729;color:#fff;}
p.error strong{color:#fff;}
p.error small{color:#930;}
/* Success */
p.success{background-color:#a5c941;color:#fff;}
p.success strong{color:#fff;}
p.success small{color:#360;}
p.info{background-color:#73cacf;color:#fff;}
p.info small{color:#007d9a;}
/* @end */
/*@group Figures & Images -------------------------------------------- */
div.figure{background:#eee;margin:0 0 18px;-webkit-border-radius:3px;-moz-border-radius:3px;}
div.figure img,div.post div.figure img{display:block;margin:0;border:1px solid #ccc;}
div.figure cite{display:block;padding:8px 10px;font-size:13px;line-height:18px;color:#555;}
div.figure cite strong{color:#333;}
div.simple.figure{background:#fff;}
div.simple.figure img{border:0;}
div.simple.figure cite{padding:8px 0;color:#777;}
div.simple.figure cite strong{color:#555;}
div.clean.figure img{border:0;margin:1px;}
div.floated.figure,div.right.figure{float:right;margin:0 0 18px 18px;}
div.left.figure{float:left;margin:0 18px 18px 0;}
div.large.figure,body.ie6 div.large{width:520px;}
div.large.figure img{width:518px;}
div.medium.figure{width:340px;}
div.medium.figure img{width:338px;}
div.small.figure{width:220px;}
div.small.figure img{width:218px;}
/* @end */
/*@group Custom Labels-------------------------------------------------- */
.label{background:#999;display:inline-block;padding:3px 5px 4px;color:#fff;font-size:11px;font-weight:bold;text-decoration:none;text-transform:uppercase;line-height:1;-webkit-border-radius:3px;-moz-border-radius:3px;text-shadow:0 0 1px transparent;}
.label:hover{text-decoration:none;color:#fff;}
body.ff2 .label{-moz-border-radius:0;}
/* ZURB colors */
.green.label{background:#a5c941;text-shadow:0 0 1px #a5c941;}
.blue.label{background:#2daebf;text-shadow:0 0 1px #2daebf;}
.magenta.label{background:#a9014b;text-shadow:0 0 1px #a9014b;}
.red.label{background:#e33100;text-shadow:0 0 1px #e33100;}
.orange.label{background:#ff5c00;text-shadow:0 0 1px #ff5c00;}
.yellow.label{background:#fc9200;text-shadow:0 0 1px #fc9200;}
/* Other Basics */
.label.black{background:#333;text-shadow:0 0 1px #222;}
.label.white{background:#fff;padding:0 3px 1px;border:1px solid #ddd;color:#333;text-shadow:0 0 1px #fff;}
/* @end */
/*@group Custom Dividers-------------------------------------------------- */
div.divider{background-repeat:no-repeat;background-position:center top;width:100%;height:36px;margin:18px 0 27px;}
div.notable.divider{background-image:url(/playground/images/dividers/divider-notable.gif);}
div.odditorium.divider{background-image:url(/playground/images/dividers/divider-odditorium.gif);}
div.scrumptious.divider{background-image:url(/playground/images/dividers/divider-scrumptious.gif);}
div.zurb.divider{background-image:url(/playground/images/dividers/divider-zurb.gif);}
/*--------------------------------------------------Misc-------------------------------------------------- */
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.muted{color:#777;}
/* @group Pagination */
div.pagination{width:100%;height:36px;text-align:center;margin:0 0 36px;padding:0;font-size:12px;line-height:1;}
div.pagination a,div.pagination a:visited{padding:3px 11px 4px;font-size:12px;line-height:1;text-decoration:none;font-weight:bold;border:1px solid #ddd;text-shadow:0 1px 1px #fff;-webkit-border-radius:2px;}
div.pagination a:hover{color:#fff;text-shadow:0 -1px 1px #007d9a;background:#2daebf;border:1px solid #007d9a;}
div.pagination .disabled{color:#bbb;border:0;}
div.pagination .current{padding:4px 12px 5px;color:#777;font-weight:bold;}
.inactive{color:#777;}
div.pagination .prev_page,div.pagination .next_page{margin:0 20px 0 20px;}
ul.paginate{width:100%;height:27px;margin:0 0 18px;}
ul.paginate li{display:inline;}
ul.paginate a{background:#f7f6ed;display:inline;float:left;padding:3px 12px;-webkit-border-radius:12px;-moz-border-radius:12px;text-decoration:none;xfont-weight:bold;}
ul.paginate a:hover{background:#818076;color:#fff;}
ul.paginate li.next a{float:right;}
/* @end */
/* @group Avatars */
div.avatar{float:left;margin:-4px 12px 13px 0;}
div.avatar a{}
div.avatar img{display:block;width:36px;padding:4px;border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;}
div.avatar a:hover img{border-color:#ccc;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);}
/* @end */
/*--------------------------------------------------Wells-------------------------------------------------- */
div.well{background:#f1f1f1;padding:17px 19px;margin:0 0 18px;-webkit-border-radius:6px;-moz-border-radius:6px;border:1px solid #ddd;border-top-color:#ccc;border-bottom-color:#eee;}

CSS代码(zurb.mega-drop.css):

/* ----------------------------------------- Proxima Nova----------------------------------------- */
.light{font-weight:200 !important;}
.extra-bold{font-weight:800 !important;}
.regular{font-weight:normal !important;}
/* Regular */
@font-face{font-family:'Proxima Nova';src:url("http://www.zurb.com/assets/ProximaNova-Reg-webfont.eot");src:url("http://www.zurb.com/assets/ProximaNova-Reg-webfont.eot?iefix") format("eot"),url("http://www.zurb.com/assets/ProximaNova-Reg-webfont-ce0ed08949b6377d9d8638d70ae4cf43.woff") format("woff"),url("http://www.zurb.com/assets/ProximaNova-Reg-webfont.ttf") format("truetype"),url("http://www.zurb.com/assets/ProximaNova-Reg-webfont.svg#webfontZam02nTh") format("svg");font-weight:normal;font-style:normal;}
/* Light */
@font-face{font-family:'Proxima Nova';src:url("http://www.zurb.com/assets/ProximaNova-Light-webfont.eot");src:url("http://www.zurb.com/assets/ProximaNova-Light-webfont.eot?iefix") format("eot"),url("http://www.zurb.com/assets/ProximaNova-Light-webfont.woff") format("woff"),url("http://www.zurb.com/assets/ProximaNova-Light-webfont.ttf") format("truetype"),url("http://www.zurb.com/assets/ProximaNova-Light-webfont.svg#webfontBtAcCspH") format("svg");font-weight:200;font-style:normal;}
/* Bold */
@font-face{font-family:'Proxima Nova';src:url("http://www.zurb.com/assets/ProximaNova-Bold-webfont.eot");src:url("http://www.zurb.com/assets/ProximaNova-Bold-webfont.eot?iefix") format("eot"),url("http://www.zurb.com/assets/ProximaNova-Bold-webfont.woff") format("woff"),url("http://www.zurb.com/assets/ProximaNova-Bold-webfont.ttf") format("truetype"),url("http://www.zurb.com/assets/ProximaNova-Bold-webfont.svg#webfontZ6etP9ZY") format("svg");font-weight:bold;font-style:normal;}
/* Xtra Bold */
@font-face{font-family:'Proxima Nova';src:url("http://www.zurb.com/assets/ProximaNova-Xbold-webfont.eot");src:url("http://www.zurb.com/assets/ProximaNova-Xbold-webfont.eot?iefix") format("eot"),url("http://www.zurb.com/assets/ProximaNova-Xbold-webfont.woff") format("woff"),url("http://www.zurb.com/assets/ProximaNova-Xbold-webfont.ttf") format("truetype"),url("http://www.zurb.com/assets/ProximaNova-Xbold-webfont.svg#webfont2rpW2ohz") format("svg");font-weight:900;font-style:normal;}
@font-face{font-family:'ProximaNovaCondensedBold';src:url("http://www.zurb.com/assets/proximanovacond-bold-webfont.eot");src:url("http://www.zurb.com/assets/proximanovacond-bold-webfont.eot?#iefix") format("embedded-opentype"),url("http://www.zurb.com/assets/proximanovacond-bold-webfont.woff") format("woff"),url("http://www.zurb.com/assets/proximanovacond-bold-webfont.ttf") format("truetype"),url("http://www.zurb.com/assets/proximanovacond-bold-webfont.svg#ProximaNovaCondensedBold") format("svg");font-weight:normal;font-style:normal;}
.row.top{border-bottom:#777 1px solid;padding-bottom:10px;margin-bottom:30px !important;position:relative;}
.row.top .four.columns{position:absolute;bottom:15px;right:0;}
.row.top h4{color:#999;font-family:ProximaNovaCondensedBold;font-weight:100;}
.row.top a h4:hover img{opacity:0.5;}
.row.top h4 img{margin-left:-8px;position:relative;top:1px;}
.row .right.links{margin-top:6px;}
.row .right.links a{color:#fff;font-weight:bold !important;margin:0px 8px;}
.row .right.links a:hover{color:#999;}
#megaDrop{overflow:hidden;position:relative;width:100%;z-index:1;padding:35px 0 45px;background:rgba(0,0,0,0.85);color:white;display:none;background-color:#222;font-family:sans-serif !important;}
#megaDrop p{line-height:1.55;}
#megaDrop h4 small{text-transform:uppercase;border-top:none;margin-bottom:5px;}
#megaDrop h6{color:#999;font-weight:bold;font-size:14px;font-size:1.4rem;margin-bottom:14px;}
#megaDrop h3{color:#fff;}
#megaDrop hr{border-style:dotted;border-color:#555;}
#megaDrop a.button{color:#fff;}
#megaDrop a.button.gray{background:#888;}
#megaDrop a.button.gray:hover{background:#555;}
#megaDrop a.button.yellow{background:#E5A309;}
#megaDrop a.button.yellow:hover{background:#b78102;}
.zurb-properties{position:absolute;z-index:1000;width:650px;background:#FFF;background:rgba(255,255,255,.95);top:48px;left:-20px;display:none;}
.main-half{width:60%;float:left;border-right:1px dotted #CCC;}
.main-half ul li{background:url('icons/zurb-properties.jpg') no-repeat 15px 15px;}
.main-half ul li a{display:block;padding:12px 15px 10px 64px;border-bottom:1px dotted #CCC;}
.main-half ul li:hover{cursor:pointer;background:url('icons/zurb-properties.jpg') no-repeat 15px 15px #ccc;}
.main-half ul li a.current{border-left:3px solid #b8d30b;}
.main-half ul li:last-child a{border-bottom:none;}
.main-half ul li a p{margin-bottom:0;color:#333;}
.main-half ul{margin-bottom:0;}
.featured-half{width:39%;float:left;}
.featured-half a{margin-bottom:0;}
.featured-padding{padding:15px 15px 0 15px;}
.has-dropdown .current{color:#FFF;text-shadow:0 -1px 1px rgba(0,0,0,0.5);}
.has-dropdown .current.admin-services{background:#B8D30B;}
.has-dropdown .current.admin-products{background:#707070;}
.has-dropdown .current.admin-talent{background:#2caebe;}
.has-dropdown .current.admin-events{background:#b1005d;}
.has-dropdown .current.admin-publishing{background:#f59f1a;}
li.has-drop-down a{color:#FFF !important;}
.center-content{text-align:center;border-bottom:1px solid #555;padding-bottom:2px;margin-bottom:15px;}
.center-content p{font-size:14px;}
.center-content p a{color:#FFF !important;}
.center-content:hover{cursor:pointer;}
.center-content:hover p a{color:#AAA;}
#megaDrop h4 small{border-top:none;padding-top:0;margin-bottom:5px;}
#megaDrop .property p,#megaDrop .property .zurb-soapbox a,#megaDrop .property .zurb-events a,#megaDrop .property .zurb-expo a,#megaDrop .property .zurb-jobs a{color:#CCC;}
#megaDrop .property .zurb-soapbox a strong,#megaDrop .property .zurb-events a strong,#megaDrop .property .zurb-expo a strong,#megaDrop .property .zurb-jobs a{color:#FFF;}
.zurb-soapbox a:hover,.zurb-events a:hover,.zurb-expo a:hover,.zurb-jobs a:hover{color:#AAA !important;}
#megaDrop .property a{display:block;}
#megaDrop .property a p{color:#FFF !important;display:block;}
#megaDrop .property a h4{font-family:ProximaNovaCondensedBold;font-size:18px;font-weight:100;text-transform:uppercase;color:#ffffff;}
#megaDrop .property a h4 span.apps{text-transform:none;color:#fff}
#megaDrop .property span{clear:both;color:#137795;white-space:no-wrap;font-weight:bold;}
#megaDrop .property a:hover p,#megaDrop .property a:hover h4,#megaDrop .property a:hover h4 span.apps{color:#ddd;}
#megaDrop .property a:hover span{color:#006582;}
#megaDrop .property p a:hover{color:#AAA;}
ul.zurb-apps li{margin-bottom:5px;}
ul.zurb-apps li a{color:#FFF;padding-left:24px;}
ul.zurb-apps li a:hover{color:#AAA;}
ul.zurb-apps li.verify{background:url('mega-drop-down/verify.png') no-repeat center left;}
ul.zurb-apps li.notable{background:url('mega-drop-down/notable.png') no-repeat center left;}
ul.zurb-apps li.enroll{background:url('mega-drop-down/enroll.png') no-repeat center left;}
ul.zurb-apps li.influence{background:url('mega-drop-down/influence.png') no-repeat center left;}
ul.zurb-apps li.solidify{background:url('mega-drop-down/solidify.png') no-repeat center left;}
.drop-down-foundation{text-align:center;border-top:1px solid #555;margin-top:2px;padding-top:15px;}
.drop-down-foundation p{margin-bottom:0;}
.drop-down-foundation span{font-family:"ProximaNovaCondensedBold","Proxima Nova","Helvetica Neue","HelveticaNeue",Helvetica,Arial,"Lucida Grande",sans-serif;text-transform:uppercase;}
.drop-down-foundation p a{color:#FFF !important;}
.drop-down-foundation p a span{color:#00A5FF}
.drop-down-foundation p a:hover{color:#AAA;}
+.top-bar .attached ul .dropdown li.has-dropdown ul.dropdown{min-width:900px !important;}
.top-bar .attached ul .dropdown li.has-dropdown ul.dropdown li{width:225px !important;}
.sitemap-link a{padding:5px 10px;background:#333;color:#FFF !important;}
.top-bar ul.name{float:left;font-size:19px;padding:0px 20px;margin-bottom:0px;}
.top-bar ul.name span{display:block;height:45px;width:90px;position:relative;}
/* .top-bar ul.name span li a.logo{background:url('../images/zurb-logo.png') 0 50% no-repeat;opacity:0.5;}
*/
.top-bar ul.name span li a.logo:hover{opacity:1;}
.top-bar ul.name span li a{display:block;height:45px;width:90px;}
.top-bar ul.right li:last-child{border-right:1px solid #333;}
.mobile-main-nav-padding{padding:0 15px;}
/* Property Colors */
small.gray{color:#777;}
small.magenta{color:#B1005D;}
small.yellow{color:#E5A309;}
small.blue{color:#00B6DE;}
/* Styles for smaller screens like tablets */
/* MOBILE ADJUSTMENTS */
@media only screen and (max-width:767px){.row.top .four.columns{position:relative;bottom:5px;}
.row.top h4 img{display:block;margin-bottom:6px;}
.row .right.links a:first-child{margin:0px 8px 0px 0px;}
.top-bar ul.name span{margin-left:20px;}
.drop-down-foundation{padding:10px 20px 0 20px;}
.top-bar ul.name span{z-index:1000;}
.top-bar ul li a,.top-bar ul li span{padding-left:20px;}
.top-bar a.toggle-nav{border:none;}
.top-bar.expanded a.toggle-nav{border:none;}
.touch .top-bar{width:auto;}
.top-bar{width:auto !important;border-right:solid 0px transparent !important;}
.right{float:none !important;}
}
@media only screen and (max-width:1280px) and (min-width:1024px) and (orientation:landscape){.touch .top-bar.container{height:47px !important;}
.touch .top-bar .name span{margin-top:0px;}
}
@media only screen and (device-width:768px),(device-width:800px){.top-bar ul.name span{margin-left:20px;}
.mobile-main-nav-padding{padding:0 10px;}
}
/* QA */
body.ie7 .top-bar .attached ul li:hover a,.top-bar .attached ul li:hover span,body.ie8 .top-bar .attached ul li:hover a,.top-bar .attached ul li:hover span{background:#333;}
body.ie8 #megaDrop{background:#333333;}
/* --------------------------------------------------::Mobile Visibility Affordances---------------------------------------------------*/
.show-on-phones{display:none !important;}
.show-on-tablets{display:none !important;}
.show-on-desktops{display:block !important;}
.hide-on-phones{display:block !important;}
.hide-on-tablets{display:block !important;}
.hide-on-desktops{display:none !important;}
@media only screen and (max-device-width:800px),only screen and (device-width:1024px) and (device-height:600px),only screen and (width:1280px) and (orientation:landscape),only screen and (device-width:800px){.hide-on-phones{display:block !important;}
.hide-on-tablets{display:none !important;}
.hide-on-desktops{display:block !important;}
.show-on-phones{display:none !important;}
.show-on-tablets{display:block !important;}
.show-on-desktops{display:none !important;}
}
/* Modernizr-enabled tablet targeting */
@media only screen and (max-width:1280px) and (min-width:768px){.touch .hide-on-phones{display:block !important;}
.touch .hide-on-tablets{display:none !important;}
.touch .hide-on-desktops{display:block !important;}
.touch .show-on-phones{display:none !important;}
.touch .show-on-tablets{display:block !important;}
.touch .show-on-desktops{display:none !important;}
}
@media only screen and (max-width:767px){.hide-on-phones{display:none !important;}
.hide-on-tablets{display:block !important;}
.hide-on-desktops{display:block !important;}
.show-on-phones{display:block !important;}
.show-on-tablets{display:none !important;}
.show-on-desktops{display:none !important;}
}
/* only screen and (device-width:1280px),only screen and (max-device-width:1280px),/*/
* Keeping this in as a reminder to address support for other tablet devices like the Xoom in the future */
/* Specific overrides for elements that require something other than display:block */
table.show-on-desktops{display:table !important;}
table.hide-on-phones{display:table !important;}
table.hide-on-tablets{display:table !important;}
@media only screen and (max-device-width:800px),only screen and (device-width:1024px) and (device-height:600px),only screen and (width:1280px) and (orientation:landscape),only screen and (device-width:800px){table.hide-on-phones{display:block !important;}
table.hide-on-desktops{display:block !important;}
table.show-on-tablets{display:block !important;}
}
@media only screen and (max-width:767px){table.hide-on-tablets{display:block !important;}
table.hide-on-desktops{display:block !important;}
table.show-on-phones{display:block !important;}
}

附件:下载该文件资源,减少时间成本(增值服务)