bml/style.css

/*
Theme Name: bml
Theme URI: http://cantbuymelove.org
Author: windhamdavid
Author URI: http://davidawindham.com

/* Thanks! 
	https://github.com/dhg Dave Gamache
	https://github.com/Automattic/_s - Team Automattic
	https://github.com/Prinzhorn/skrollr - Alexander Prinzhorn
	https://plus.google.com/104610899646415406748/about - James Grieshaber
*/

@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
@import url(http://fonts.googleapis.com/css?family=Great+Vibes);
@import url(css/fancy.css);

/* #Reset  ================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
html {font-size: 62.5%;overflow-y: scroll;-webkit-text-size-adjust: 100%;-ms-text-size-adjust:100%;}
body { background: #fff; }
article,aside,details,figcaption,figure,footer,header,main,nav,section {display: block;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q { quotes: "" ""; }
a:focus {outline: thin dotted;}
a:hover, a:active {outline: 0;}
a img {border: 0;}

/* #Clearing  ================================================== */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before,.clearfix:after,.row:before,.row:after {content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 0;height: 0; }
.row:after,.clearfix:after {clear: both; }.row,.clearfix {zoom: 1; }
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.clear:before,.clear:after,.entry-content:before,.entry-content:after,.comment-content:before,.comment-content:after,.site-header:before,.site-header:after,.site-content:before,.site-content:after,.site-footer:before,.site-footer:after {content: '';display: table;}
.clear:after,.entry-content:after,.comment-content:after,.site-header:after,.site-content:after,.site-footer:after {clear: both;}

/* #Base 960 Grid ================================================== */
.container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row                                        { margin-bottom: 20px; }
.column.alpha, .columns.alpha               { margin-left: 0; }
.column.omega, .columns.omega               { margin-right: 0; }
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }
.container .one-third.column                { width: 300px; }
.container .two-thirds.column               { width: 620px; }
.container .offset-by-one                   { padding-left: 60px;  }
.container .offset-by-two                   { padding-left: 120px; }
.container .offset-by-three                 { padding-left: 180px; }
.container .offset-by-four                  { padding-left: 240px; }
.container .offset-by-five                  { padding-left: 300px; }
.container .offset-by-six                   { padding-left: 360px; }
.container .offset-by-seven                 { padding-left: 420px; }
.container .offset-by-eight                 { padding-left: 480px; }
.container .offset-by-nine                  { padding-left: 540px; }
.container .offset-by-ten                   { padding-left: 600px; }
.container .offset-by-eleven                { padding-left: 660px; }
.container .offset-by-twelve                { padding-left: 720px; }
.container .offset-by-thirteen              { padding-left: 780px; }
.container .offset-by-fourteen              { padding-left: 840px; }
.container .offset-by-fifteen               { padding-left: 900px; }

/* #_S main  ================================================== */
body,button,input,select,textarea {color: #404040;font-size: 18px;font-size: 1.6rem;line-height: 1.5;}
h1, h2, h3, h4, h5, h6 {clear: both;}
hr {background-color: #ccc;border: 0;height: 1px;margin-bottom: 1.5em;}
p {margin-bottom: 1.5em;}
ul, ol {margin: 0 0 1.5em 3em;}
ul {list-style: disc;}
ol {list-style: decimal;}
li > ul,li > ol {margin-bottom: 0;margin-left: 1.5em;}
dt {font-weight: bold;}
dd {margin: 0 1.5em 1.5em;}
b, strong {font-weight: bold;}
dfn, cite, em, i {font-style: italic;}
blockquote {margin: 0 1.5em;}
address {margin: 0 0 1.5em;}
pre {background: #eee;font-family: "Courier 10 Pitch", Courier, monospace;font-size: 15px;font-size: 1.5rem;line-height: 1.6;margin-bottom: 1.6em;max-width: 100%;overflow: auto;padding: 1.6em;}
code, kbd, tt, var {font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}
abbr, acronym {border-bottom: 1px dotted #666;cursor: help;}
mark, ins {background: #fff9c0;text-decoration: none;}
sup,sub {font-size: 75%;height: 0;line-height: 0;position: relative;vertical-align: baseline;}
sup {bottom: 1ex;}
sub {top: .5ex;}
small {font-size: 75%;}
big {font-size: 125%;}
figure {margin: 0;}
table {margin: 0 0 1.5em;width: 100%;}
th {font-weight: bold;}
img {height: auto;max-width: 100%; }
textarea {overflow: auto;padding-left: 3px;vertical-align: top;width: 98%;}
.alignleft {display: inline;float: left;margin-right: 1.5em;}
.alignright {display: inline;float: right;margin-left: 1.5em;}
.aligncenter {clear: both;display: block;margin: 0 auto;}
a {color: royalblue;}
a:visited {color: purple;}
a:hover,a:focus,a:active {color: midnightblue;}

/* #Skrollr  ================================================== */

html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
.skrollable {position:fixed;z-index:100;}
.skrollr-mobile .skrollable {position:absolute;}
.skrollable .skrollable {position:absolute;}
.skrollable .skrollable .skrollable {position:static;}

#bg1, #bg2, #bg3 {
	z-index:50;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(img/bg.png) repeat 0 0;
}
#bg2 {z-index:49;background-image:url(img/bg2.png);}
#bg3 {z-index:48;background-image:url(img/bg3.png);}

#progress {
	height:17px;
	background:#444;
	bottom:0;
	z-index:200;
}

#scrollbar {
	position:fixed;
	right:2px;
	height:50px;
	width:6px;
	background:#444;
	background:rgba(0,0,0,0.6);
	border:1px solid rgba(255,255,255,0.6);
	z-index:300;
	border-radius:3px;
}
.skrollr-desktop #scrollbar {display:none;}



#intro {
	width:80%;
	top:120px;
	margin-left:-70%;
	padding:2em;
	text-align:center;
}
.intro_ease {
	width:100%;
	height:100%;
	background:#fff;
}
#intro2 {
	width:80%;
	top:120px;
	margin-left:-70%;
	padding:2em;
	text-align:center;
}

h1.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:65px;
}
h2.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:55px;
}
h3.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:45px;
}
h4.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:38px;
}
p.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:28px;
	line-height:30px;
}


#story {
	top:2em;
	padding:2em;
	width:80%;
	z-index:101;
}
#story_ease {
	width:100%;
	height:100%;
}

#transform {
	width:70%;
	left:50%;
	top:20%;
	margin-left:-35%;
	text-align:center;
	font-size:150%;
	.transform-origin(50%, 50%);
}

#properties {
	width:100%;
	height:100%;
	padding-top:10%;
	text-align:center;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}









/* #BML  ================================================== */

#bml { width: 400px; height: 45px; margin: 90px 20px 5px;}

.hasCountdown {
	background-color: #fff;
}
.countdown_rtl {
	direction: rtl;
}
.countdown_holding span {
	color: #000;
}
.countdown_row {
	clear: both;
	width: 100%;
	padding: 0px 2px;
	text-align: center;
}
.countdown_show1 .countdown_section {
	width: 98%;
}
.countdown_show2 .countdown_section {
	width: 48%;
}
.countdown_show3 .countdown_section {
	width: 32.5%;
}
.countdown_show4 .countdown_section {
	width: 24.5%;
}
.countdown_show5 .countdown_section {
	width: 19.5%;
}
.countdown_show6 .countdown_section {
	width: 16.25%;
}
.countdown_show7 .countdown_section {
	width: 14%;
}
.countdown_section {
	display: block;
	float: left;
	font-size: 120%;
	font-family:Reenie Beanie;
	text-align: left;
}
.countdown_amount {
	font-size: 300%;
	font-family:Reenie Beanie;
}
.countdown_descr {
	display: block;
	width: 100%;
}

#inline button {
	font-family: Reenie Beanie;
	text-decoration: none !important;
	position:relative;
	margin:10px;
	padding: 8px 15px;
	font-weight: bold;
	font-size: 18px;
	background: #1275FF;
	border: 1px solid #155FB0;
	color: white;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#77B7FF), to(#017AFF));
	background-image: -moz-linear-gradient(top, #77B7FF, #017AFF);
	background-image: -o-linear-gradient(top, #77B7FF, #017AFF);
	-webkit-box-shadow: inset 0 1px 0 #98c9ff;
	-moz-box-shadow: inset 0 1px 0 #98c9ff;
	box-shadow: inset 0 1px 0 #98c9ff;
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer; cursor: hand;
}
#inline a button {
	text-decoration: none !important;
}