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(http://fonts.googleapis.com/css?family=Great+Vibes|Cardo|Monsieur+La+Doulaise);

/* #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; }
/* Hackety Hack - position needs to be abolute for Skrollr to work right */
.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; }

/* Fonts ================================================== */


h1.monsieur {
	font-family: 'Monsieur La Doulaise', cursive;
	font-size:85px;
	text-shadow: 0px 1px 0px #999;
}
h4.cardo {
	font-family: 'Cardo', serif;
	text-transform:uppercase;
	font-size:18px;
}
h4.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:38px;
}
p.vibes {
	font-family: 'Great Vibes', cursive;
	font-size:28px;
	line-height:30px;
}


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

#skrollr-body {height: 100%;width: 100%;}
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:9px;background:#fff;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;}
.easing {
	width:100%;
	height:100%;
}
#intro {
	width:80%;
	top:80px;
	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;
}
#story_wrap {
	width:100%;
	height:100%;
}
#story {
	width:100%;
	height:100%;
}
	.story {
		width:60%;
		height:100%;
		text-align:center;
	}
	
#trip_wrap {
	width:100%;
	height:100%;
}
#trip {
	width:100%;
	height:100%;
}
#vows {
	width:100%;
	height:100%;
}
#wish {
	width:100%;
	height:100%;
}
#transform {
	width:70%;
	left:50%;
	top:20%;
	margin-left:-35%;
	text-align:center;
	font-size:150%;
	.transform-origin(50%, 50%);
}
#credits {
	width:100%;
	height:100%;
}

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

#bml { width: 450px; height: 55px; margin:0;}

#bmlcount {
	font-family: 'Great Vibes', cursive;
	font-size:31px;
}

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 20px;
    top: 0;
    width: 20px;
    height: 35px;
    background: red;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}


/* #Form ================================================== */

#gform {
	width:600px;
	margin: 0 auto;
}
#gform label {
	font-family: 'Great Vibes', cursive;
	font-size:17px;
}

ul.gfield_checkbox li {float:left;}

#gform_submit_button_1 {
	font-family: 'Great Vibes', cursive;
	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;
}

/* Media Queries ========================================= */

@media screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
	h1.monsieur {
		font-family: 'Monsieur La Doulaise', cursive;
		font-size:33px;
	}
	h4.vibes {
		font-family: 'Great Vibes', cursive;
		font-size:21px;
	}
	h4.cardo {
		font-family: 'Cardo', serif;
		text-transform:uppercase;
		font-size:14px;
	}
	h4.beanie {
		font-family: Reenie Beanie;
		font-size:21px;
	}
	#gform {
		width:400px;
		margin: 0 auto;
	}
}