/* Dibbble HTML5 Infographic // CSS coding by; Jamie Brightmore // 4muladesign.com // (c)2010 */

/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted #000;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}

/* LAYOUT */
html body {font-size:14px; line-height:23px; background:#575759 url(../img/bkg.jpg) top repeat;	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;	color:white;}
#wrapper {margin:0 auto; width:960px; text-align:center;}
#tweet {float:right; margin:10px 0 0;}
#logo {background:url("../img/sprite.png?v=001") 0 -109px no-repeat; height:75px; left:337px; margin:0 0 52px; position:relative; width:288px;}
header h1 {color:#cccccc; font-size:15px; letter-spacing:2px; margin:0 auto 38px; padding-top:12px; text-shadow:0 2px 2px #4e3050; width:510px;}
section h1 {border-bottom:1px solid #aeaeae; color:#ec8ab6; font-size:18px; letter-spacing:1px; padding:0 0 9px 3px; text-shadow:0 2px 2px #470048; text-rendering:optimizeLegibility;}
h1,h2 {font-weight:normal;}
html h2 {color:#ec8ab6; font-size:20px; font-weight:normal; margin:0 0 20px; text-shadow:0 1px 2px #972488;}
a#ribbon {background:url("../img/sprite.png?v=001") 0 0 no-repeat; color:#6F237B;	float:left;	height:100px; line-height:20px;	margin:0; padding-top:8px;
text-decoration:none; text-shadow:0 1px 1px #DFB5C7; width:83px;}
#ie {margin:50px 0 0;}
.strike {text-decoration:line-through; }
#thecssawards {position:absolute; top:92px; right:0px; z-index:555;}
#thecssawards a {width:69px; height:105px; text-indent:-8000px; display:block; background:url(../img/award_day_white.png) no-repeat;}

/* SECTION 1 */
#diagram {background:url(../img/diagram.png?v=001) no-repeat; height:688px; margin:70px auto 15px; width:798px;}
ul#points {margin:0 0 0 398px; padding:46px 0 0;}
ul#points li {cursor:pointer; display:block; position:relative;}
ul#points li#s1Trig0 {height:7px; left:149px; top:27px; width:6px;}
ul#points li#s1Trig9 {height:7px; left:144px; top:26px; width:7px;}
ul#points li#s1Trig8 {height:6px; left:139px; top:24px; width:7px;}
ul#points li#s1Trig7 {height:8px; left:134px; top:23px; width:8px;}
ul#points li#s1Trig6 {height:10px; left:126px; top:21px; width:10px;}
ul#points li#s1Trig5 {height:10px; left:117px; top:20px; width:10px;}
ul#points li#s1Trig4 {height:25px; left:94px; top:22px; width:25px;}
ul#points li#s1Trig3 {height:32px; left:69px; top:15px; width:32px;}
ul#points li#s1Trig2 {height:32px; left:43px; top:8px; width:32px;}
ul#points li#s1Trig1 {height:45px; width:50px;}
ul#points li span {background:rgba(255,255,255,0); -webkit-border-radius:50px; -moz-border-radius:50px;	border-radius:50px;	display:block;
height:6px; position:relative; width:6px; -webkit-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out;}
ul#points li#s1Trig1 span {left:24px; top:17px;}
ul#points li#s1Trig2 span {left:12px; top:11px;}
ul#points li#s1Trig3 span {left:11px; top:11px;}
ul#points li#s1Trig4 span {left:9px; top:7px;}
ul#points li#s1Trig5 span {left:1px; top:3px;}
ul#points li#s1Trig6 span {left:2px; top:3px;}
ul#points li#s1Trig7 span {left:1px; top:2px;}
ul#points li#s1Trig8 span {left:1px; top:1px;}
ul#points li#s1Trig9 span {left:1px; top:1px;}
ul#points li#s1Trig0 span {left:0; top:2px;}
ul#points li span.marker.active {-webkit-transform:scale(2,2); -moz-transform:scale(2,2); background:rgba(255,255,255,0.8);}
ul#circles {height:77px; list-style:none; margin:0 0 5px 42px;}
ul#circles li {float:left; cursor:pointer; height:77px; margin:0 12px 0 0; width:77px;}
span.outer {background:rgba(0,0,0,0.2); -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; display: block; height:77px; width:77px;
-webkit-transition:all 400ms ease-in-out; -moz-transition:all 400ms ease-in-out; transition:all 400ms ease-in-out;}
.outer.active {opacity:0.2;}
span.inner {-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; display: block; position:relative;}
li#circle1 span.inner {background:#F08DB8; height:20px; left:28px; top:-48px; width:20px;}
li#circle2 span.inner {border:6px solid #EC6FA6; height:21px; left:23px; top:-54px; width:21px;}
li#circle3 span.inner {border:6px solid #EB62A0; height:33px; left:16px; top:-61px; width:33px;}
li#circle4 span.inner {border:5px solid #D85FA0; height:45px; left:12px; top:-66px; width:45px;}
li#circle5 span.inner {border:3px solid #C358A2; height:54px; left:9px; top:-68px; width:54px;}
li#circle6 span.inner {border:3px solid #B3489B; height:58px; left:7px; top:-70px; width:58px;}
li#circle7 span.inner {border:2px solid #B41D8D; height:60px; left:7px; top:-70px; width:60px;}
li#circle8 span.inner {border:2px solid #A9218E; height:63px; left:5px; top:-72px; width:63px;}
li#circle9 span.inner {border:2px solid #9A258F; height:66px; left:4px; top:-73px; width:66px;}
li#circle0 span.inner {border:2px solid #88288F; height:69px; left:2px; top:-75px; width:69px;}
ul#labels {list-style:none; margin:0 0 150px 42px;}
ul#labels li {float:left; font-size:13px; margin:0 13px 0 0; text-align:center; width:76px; -webkit-transition:all 400ms ease-in-out; -moz-transition:all 400ms ease-in-out;}
ul#labels li.active {background:rgba(0,0,0,0.2); -webkit-transform:translate(0, 10px); -moz-transform:translate(0, 10px); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

/* SECTION 2 */
section#who {clear:both;}
section#who ul {float:left; list-style:none; margin:85px 0 0; text-align:left; width:196px; }
section#who ul li {background:rgba(0,0,0,0.2); -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; cursor:pointer; display:inline; float:left;
font-size:16px; margin:0 0 7px; padding:5px 14px 6px 8px; text-shadow:0 2px 2px #4e3050;}
section#who ul li span {display:block; float:left; height:22px; margin:1px 14px 0 0; width:22px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
#s2Trig1 span {background:#ec8ab6;}
#s2Trig2 span {background:#e8609d;}
#s2Trig3 span {background:#d65e9d;}
#s2Trig4 span {background:#c2579f;}
#s2Trig5 span {background:#b34698;}
#s2Trig6 span {background:#b01e8d;}
#s2Trig7 span {background:#9c258d;}
#s2Trig8 span {background:#812a8b;}
#graph {background: url("../img/icon1.png") no-repeat 109px 59px, url("../img/icon2.png") no-repeat 203px 59px, url("../img/icon3.png") no-repeat 278px 120px, url("../img/icon4.png") no-repeat 270px 185px, url("../img/icon5.png") no-repeat 208px 239px, url("../img/icon6.png") no-repeat 108px 238px, url("../img/icon7.png") no-repeat 50px 185px, url("../img/icon8.png") no-repeat 57px 121px;
float:left; height:352px; margin:78px 75px 90px 155px; width:352px;}
#graph div {float:left;	position:relative; -webkit-transition:all 400ms ease-in-out; -moz-transition:all 400ms ease-in-out; transition:all 400ms ease-in-out;}
#tl1,#tl2,#tr1,#tr2 {height:168px; width:176px;} 
#bl1,#bl2,#br1,#br2 {height:183px; width:176px;}
#graph div#tl1 {background: url(../img/tl1.png) no-repeat; left:0;}
#graph div#tl2 {background: url(../img/tl2.png) no-repeat; left:-176px;}
#graph div#tr1 {background: url(../img/tr1.png) no-repeat; left:176px; top:-168px;}
#graph div#tr2 {background: url(../img/tr2.png) no-repeat; top:-168px;}
#graph div#bl1 {background: url(../img/bl1.png) no-repeat; left:3px; top:-168px;}
#graph div#bl2 {background: url(../img/bl2.png) no-repeat; left:-174px; top:-168px;}
#graph div#br1 {background: url(../img/br1.png) no-repeat; left:176px; top:-351px;}
#graph div#br2 {background: url(../img/br2.png) no-repeat; top:-351px;}
#tl2.active,#tr2.active,#bl1.active,#bl2.active, #tl1.active, #tr1.active,#br1.active,#br2.active {opacity:0.2;}

/* SECTION 3 */
section#lingo {clear:left;}
section#lingo ul {float:left; list-style:none; margin:70px 0 70px; padding:0 0 0 16px;}
section#lingo ul li {background:rgba(0,0,0,0.2); -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; float:left; height:206px; margin:0 25px 45px; width:260px;}
section#lingo.safari ul li {background:none;}
#flipingEck, #flipingEck a {color:#C5C5C5; margin:20px 0 -20px;}
section#lingo.safari #flipingEck {display:none;}
.face {font-size:16px; text-shadow:0 1px 1px #470048;}
.face.back {display:none;}
.flipcard {-webkit-transform-style:preserve-3d; -webkit-transition:all 600ms linear; height:100%; width:100%;}
#lingo.safari li.flipcard_container {-webkit-perspective:1000;}
#lingo.safari li.flipcard_container:hover .flipcard {-webkit-transform:rotateY(180deg);}
#lingo.safari .face {background:rgba(0,0,0,0.2) url(../img/i.png) 240px 182px no-repeat; -webkit-border-radius:7px;	-moz-border-radius:7px;	border-radius:7px; position: absolute;
width:100%; height:100%; -webkit-backface-visibility:hidden;}
#lingo.safari .face.back {background:rgba(0,0,0,0.5); display:block; -webkit-transform:rotateY(180deg); -webkit-box-sizing:border-box; padding:40px 10px 10px; text-align:center;}
#lingo.safari .face.back p {padding: 0 12px;}
#iconLingo1,#iconLingo2,#iconLingo3,#iconLingo4,#iconLingo5,#iconLingo6 {background:url(../img/sprite.png?v=001) no-repeat; display:block; min-height:60px;}
#iconLingo1 {background-position: -85px 0; height:51px; margin:56px auto 8px; width:85px;}
#iconLingo2 {background-position: -173px 0; height:58px; margin:52px auto 12px; width:67px;}
#iconLingo3 {background-position: -243px 0; height:60px; margin:54px auto 10px; width:60px;}
#iconLingo4 {background-position: -306px 0; height:59px; margin:54px auto 10px; width:79px;}
#iconLingo5 {background-position: -388px 0; height:59px; margin:54px auto 10px; width:59px;}
#iconLingo6 {background-position: -305px -110px; height:56px; margin:57px auto 7px; width:81px;}

/* ASIDE */
.author.left {margin-left:46px;}
.author {float:left; margin:0 20px 10px; width:420px;}
#wrapper aside {background:rgba(255,255,255,0.2); float:left; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; margin:0 0 40px; padding:25px 0; text-align:left; width:960px;}
#qmark {background:url("../img/sprite.png?v=001") -388px -63px no-repeat; float:left; height:50px; margin:5px 20px 0 0; width:50px;
-webkit-box-shadow:0px 0px 5px #575757; -moz-box-shadow:0px 0px 5px #575757; box-shadow:0px 0px 5px #575757;}
aside img {float:left; -webkit-box-shadow:0px 0px 5px #575757; -moz-box-shadow:0px 0px 5px #575757; box-shadow:0px 0px 5px #575757; margin:5px 20px 0 0;}
aside p {font-size:13px; line-height:20px;}
aside p.footnote {clear:both; color:#C5C5C5; font-size:12px; line-height:20px; margin:5px 0 0; text-align:center;}
aside a, footer a {color:#ec8ab6; text-decoration:none; -webkit-transition:color 200ms ease-in; -moz-transition:color 200ms ease-in;}
aside a:hover, footer a:hover {color:white;}

/* FOOTER */
#wrapper footer {clear:both;}
footer p {margin:1px 0 25px; text-shadow:0 2px 1px #503452;}
a#up, a#rss {background: url(../img/sprite.png?v=001) no-repeat; display:block; position:relative;}
a#up {background-position:-344px -63px; height:9px; left:940px; top:16px; width:17px; -webkit-transition:background-image 200ms ease-in; -moz-transition:background-image 200ms ease-in;}
a:hover#up {background-position:-364px -63px;}
a#rss {background-position:-344px -76px; height:16px; left:0; top:30px; width:16px;}
a:hover#rss {background-position:-364px -76px;}
aside #fbook {margin:20px 0 0; text-align:center;}