Permalink
Browse files

less files weren't working, will figure it out later

  • Loading branch information...
1 parent d2dc96f commit 487fe8b75bc98de2075c613dc7d9b37a95f8900d Alex Delegard committed Feb 2, 2014
Showing with 1,254 additions and 1 deletion.
  1. +1 −1 _layouts/default.html
  2. +1 −0 css/style.less
  3. +1,252 −0 css/style.less.css
View
2 _layouts/default.html
@@ -10,7 +10,7 @@
<link href='http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
- <link href="css/style.css" media="screen" rel="stylesheet" type="text/css">
+ <link href="css/style.less.css" media="screen" rel="stylesheet" type="text/css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
View
1 css/style.less
@@ -1068,6 +1068,7 @@ div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underl
width: 1px;
}
+
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
View
1,252 css/style.less.css
@@ -0,0 +1,1252 @@
+/*
+ * HTML5 Boilerplate
+*/
+html,
+button,
+input,
+select,
+textarea {
+ color: #222;
+}
+body {
+ font-size: 1em;
+ line-height: 1.4;
+}
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate.
+ * Customize the background color to match your design.
+ */
+::-moz-selection {
+ background: #eee;
+ text-shadow: none;
+}
+::selection {
+ background: #eee;
+ text-shadow: none;
+}
+/*
+ * A better looking default horizontal rule
+ */
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+/*
+ * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+ */
+img {
+ vertical-align: middle;
+}
+/*
+ * Remove default fieldset styles.
+ */
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+/*
+ * Allow only vertical resizing of textareas.
+ */
+textarea {
+ resize: vertical;
+}
+/* ==========================================================================
+ Chrome Frame prompt
+ ========================================================================== */
+.chromeframe {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+}
+/* ==========================================================================
+ Custom styles
+ ========================================================================== */
+/*GLOBAL
+**********************************
+**********************************/
+html {
+ -webkit-font-smoothing: antialiased;
+}
+body {
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+ overflow-x: hidden;
+}
+html,
+body {
+ width: 100%;
+ min-height: 100%;
+}
+a {
+ outline: none;
+}
+p {
+ color: #86878b;
+ font-size: .875em;
+ line-height: 20px;
+}
+img {
+ max-width: 100%;
+}
+h1 {
+ color: #333;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 2em;
+ font-weight: normal;
+ line-height: 1em;
+ margin: 0;
+ padding: 20px 0 2px;
+}
+h2 {
+ color: #333;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 30px;
+ font-weight: bold;
+ font-style: italic;
+ padding: 0;
+ margin: 45px 0 30px;
+ text-align: center;
+}
+h2:before {
+ content: '';
+ width: 31px;
+ height: 31px;
+ display: block;
+ margin: 0 auto;
+}
+#story h2:before {
+ background: url(../images/story_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #story h2:before {
+ background: url(../images/story_icon_small.png) no-repeat;
+}
+#photos h2:before {
+ background: url(../images/photos_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #photos h2:before {
+ background: url(../images/photos_icon_small.png) no-repeat;
+}
+#party h2:before {
+ background: url(../images/party_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #party h2:before {
+ background: url(../images/party_icon_small.png) no-repeat;
+}
+#info h2:before {
+ background: url(../images/info_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #info h2:before {
+ background: url(../images/info_icon_small.png) no-repeat;
+}
+#instagram h2:before {
+ background: url(../images/instagram_icon.png) no-repeat;
+ background-size: 31px 31px;
+}
+.lt-ie9 #instagram h2:before {
+ background: url(../images/instagram_icon.png) no-repeat;
+}
+h3 {
+ color: #444;
+ font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
+ font-size: 26px;
+ line-height: 1.1em;
+ font-weight: 300;
+ margin: 0;
+ padding: 0;
+}
+#fade {
+ opacity: 0;
+ filter: alpha(opacity=0);
+ -webkit-transition: opacity .6s ease;
+ -moz-transition: opacity .6s ease;
+ -ms-transition: opacity .6s ease;
+ -o-transition: opacity .6s ease;
+ transition: opacity .6s ease;
+}
+.fadeIn {
+ opacity: 1!important;
+ filter: alpha(opacity=100) !important;
+}
+.loader {
+ background-image: url(../images/loader_page.gif);
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: 50px 50px;
+ height: 50px;
+ width: 50px;
+ opacity: 1;
+ filter: alpha(opacity=100);
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ margin: -25px 0 0 -25px;
+}
+#photos .thumb img,
+#party .avatar img {
+ /* display: none;*/
+}
+.lt-ie9 #feature,
+.lt-ie9 #photos .thumb,
+.lt-ie9 #party .background {
+ height: auto;
+}
+.lt-ie9 #feature img,
+.lt-ie9 #photos .thumb img,
+.lt-ie9 #party .background img {
+ display: block;
+}
+/*ARCHITECTURE
+**********************************
+**********************************/
+section {
+ overflow: hidden;
+ clear: both;
+}
+.container {
+ overflow: visible;
+ margin: 0 auto;
+ max-width: 56.25em;
+ padding: 0 30px;
+ position: relative;
+}
+.sideline {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 9px;
+ height: 100%;
+ z-index: 10;
+}
+/*DROPDOWN
+**********************************
+**********************************/
+#dropdown {
+ background: rgba(0, 0, 0, 0.8);
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 300px;
+ margin-top: -300px;
+ z-index: 100;
+ -webkit-transition: all .7s ease;
+ -moz-transition: all .7s ease;
+ -ms-transition: all .7s ease;
+ -o-transition: all .7s ease;
+ transition: all .7s ease;
+ display: none;
+}
+.lt-ie9 #dropdown {
+ background: #222;
+}
+.peek {
+ margin-top: -255px !important;
+ -webkit-transition: margin .7s ease;
+ -moz-transition: margin .7s ease;
+ -ms-transition: margin .7s ease;
+ -o-transition: margin .7s ease;
+ transition: margin .7s ease;
+}
+.show {
+ background: rgba(0, 0, 0, 0.9) !important;
+ margin-top: 0!important;
+ -webkit-transition: all .7s ease;
+ -moz-transition: all .7s ease;
+ -ms-transition: all .7s ease;
+ -o-transition: all .7s ease;
+ transition: all .7s ease;
+}
+.lt-ie9 .show {
+ background: #111;
+}
+/*RSVP
+**********************************/
+#rsvp {
+ height: 255px;
+ text-align: center;
+ position: relative;
+}
+#rsvp .rsvp_trigger {
+ position: absolute;
+ top: 20px;
+ right: 37px;
+ opacity: .45;
+ filter: alpha(opacity=45);
+ -webkit-transition: opacity .4s ease;
+ -moz-transition: opacity .4s ease;
+ -ms-transition: opacity .4s ease;
+ -o-transition: opacity .4s ease;
+ transition: opacity .4s ease;
+}
+#rsvp .rsvp_trigger:hover {
+ opacity: .65;
+ filter: alpha(opacity=65);
+}
+#rsvp input[type="text"] {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 1.25em;
+ color: #666;
+ margin: 100px 0 25px;
+ outline: 0;
+ width: 100%;
+ height: 30px;
+ text-align: center;
+ border: 0;
+ background: transparent;
+ -webkit-transition: color .7s ease;
+ -moz-transition: color .7s ease;
+ -ms-transition: color .7s ease;
+ -o-transition: color .7s ease;
+ transition: color .7s ease;
+}
+#rsvp input[type="text"]:focus {
+ color: #999;
+}
+#rsvp .submits {
+ display: none;
+}
+#rsvp input[type="submit"] {
+ background: rgba(255, 255, 255, 0.2);
+ border: 0;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ color: #fff;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: .875em;
+ font-style: italic;
+ padding: 11px 18px;
+ -webkit-transition: background .7s ease;
+ -moz-transition: background .7s ease;
+ -ms-transition: background .7s ease;
+ -o-transition: background .7s ease;
+ transition: background .7s ease;
+}
+#rsvp .lt-ie9 #rsvp input[type="submit"] {
+ background: #454545;
+}
+#rsvp input[type="submit"]:hover {
+ background: rgba(255, 255, 255, 0.4);
+}
+#rsvp .lt-ie9 #rsvp input[type="submit"]:hover {
+ background: #747474;
+}
+#rsvp span {
+ color: #999;
+ display: inline-block;
+ margin: 0 5px;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: .875em;
+}
+#rsvp p.error {
+ font-size: 12px;
+ color: #999;
+ position: absolute;
+ font-style: italic;
+ top: 15px;
+ left: 30px;
+ display: none;
+}
+/*NAV
+**********************************/
+nav {
+ height: 45px;
+ top: 0;
+ left: 0;
+ position: relative;
+ width: 100%;
+ z-index: 5;
+ zoom: 1;
+}
+nav .container {
+ position: relative;
+}
+nav li {
+ float: left;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 15px;
+ font-style: italic;
+ font-weight: bold;
+ overflow: hidden;
+}
+nav li a {
+ background: none;
+ color: #fff;
+ display: block;
+ line-height: 45px;
+ padding: 0 10px;
+ text-decoration: none;
+ -webkit-transition: background .3s ease;
+ -moz-transition: background .3s ease;
+ -ms-transition: background .3s ease;
+ -o-transition: background .3s ease;
+ transition: background .3s ease;
+ text-shadow: 1px 1px 2px #000005;
+}
+nav li a:hover,
+nav li a.active {
+ background: #000;
+}
+a.nav_hash {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 15px;
+ font-weight: bold;
+ font-style: italic;
+ overflow: hidden;
+ float: right;
+ background: none;
+ color: #999;
+ display: block;
+ line-height: 45px;
+ text-decoration: none;
+ cursor: default;
+}
+a.top {
+ background: none;
+ border: 0;
+ -moz-border-radius: 13px;
+ border-radius: 13px;
+ display: none;
+ position: absolute;
+ top: 0;
+ left: -10px;
+ margin-top: 9px;
+ width: 26px;
+ height: 26px;
+ text-align: center;
+ -webkit-transition: background .3s ease;
+ -moz-transition: background .3s ease;
+ -ms-transition: background .3s ease;
+ -o-transition: background .3s ease;
+ transition: background .3s ease;
+}
+a.top:hover {
+ background: rgba(0, 0, 0, 0.85);
+}
+.lt-ie9 a.top:hover {
+ background: #050505;
+}
+/*HEADER
+**********************************
+**********************************/
+header {
+ background: #fff;
+ padding-top: 35px;
+ width: 100%;
+ height: 135px;
+ position: relative;
+ text-align: center;
+ z-index: 2;
+ -moz-box-shadow: 0 4px 7px 0px rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow: 0 4px 7px 0px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 4px 7px 0px rgba(0, 0, 0, 0.2);
+}
+header span {
+ color: #333;
+ display: inline-block;
+ letter-spacing: 1px;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: .75em;
+ text-transform: uppercase;
+}
+#feature {
+ background-repeat: no-repeat;
+ width: 100%;
+ position: relative;
+ height: auto;
+ -webkit-background-size: cover!important;
+ -moz-background-size: cover!important;
+ -ms-background-size: cover!important;
+ -o-background-size: cover!important;
+ background-size: cover!important;
+ background-position: center 0!important;
+}
+#feature img {
+ display: block;
+}
+/*STORY
+**********************************
+**********************************/
+#story .bride {
+ float: none;
+ position: relative;
+ width: 100%;
+ margin-right: 0;
+}
+#story .groom {
+ float: none;
+ position: relative;
+ width: 100%;
+}
+#story span {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-weight: bold;
+ font-size: 1em;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+}
+#story p {
+ margin-bottom: 40px;
+}
+/*PHOTOS
+**********************************
+**********************************/
+#photos li {
+ float: left;
+ position: relative;
+ width: 32.777778%;
+ margin: 0 .555555556% 1px 0;
+}
+#photos li:nth-child(3n+3) {
+ margin: 0 0 1px;
+}
+#photos li .thumb {
+ width: 100%;
+ height: 240px;
+ opacity: 1;
+ filter: alpha(opacity=100);
+ -webkit-transition: all 0.4s ease-in-out;
+ -moz-transition: all 0.4s ease-in-out;
+ -ms-transition: all 0.4s ease-in-out;
+ -o-transition: all 0.4s ease-in-out;
+ transition: all 0.4s ease-in-out;
+ -webkit-background-size: cover!important;
+ -moz-background-size: cover!important;
+ -ms-background-size: cover!important;
+ -o-background-size: cover!important;
+ background-size: cover!important;
+ background-position: center center!important;
+ box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
+}
+#photos li:hover .thumb {
+ opacity: .5;
+ filter: alpha(opacity=50);
+}
+#photos li div.expand {
+ width: 54px;
+ height: 54px;
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ right: 0;
+ top: 50%;
+ margin: -27px 0 0 -27px;
+ -webkit-transition: all 0.6s ease-in-out;
+ -moz-transition: all 0.6s ease-in-out;
+ -ms-transition: all 0.6s ease-in-out;
+ -o-transition: all 0.6s ease-in-out;
+ transition: all 0.6s ease-in-out;
+ -webkit-transform: rotate(-135deg) translate3d(0, 0, 0);
+ -moz-transform: rotate(-135deg) translate3d(0, 0, 0);
+ -o-transform: rotate(-135deg) translate3d(0, 0, 0);
+ -ms-transform: rotate(-135deg) translate3d(0, 0, 0);
+ opacity: 0;
+ filter: alpha(opacity=0);
+}
+#photos li:hover div.expand {
+ width: 54px;
+ height: 54px;
+ -webkit-transform: rotate(0) translate3d(0, 0, 0);
+ -moz-transform: rotate(0) translate3d(0, 0, 0);
+ -o-transform: rotate(0) translate3d(0, 0, 0);
+ -ms-transform: rotate(0) translate3d(0, 0, 0);
+ opacity: 1;
+ filter: alpha(opacity=100);
+}
+#photos li div.expand img {
+ width: 54px;
+ height: 54px;
+}
+#photos p {
+ font-size: .75em;
+}
+/*WEDDING PARTY
+**********************************
+**********************************/
+#party .bridesmaids {
+ float: none;
+ position: relative;
+ width: 100%;
+ margin-right: 0;
+}
+#party .groomsmen {
+ float: none;
+ position: relative;
+ width: 100%;
+}
+#party li {
+ clear: both;
+ display: block;
+ margin-bottom: 25px;
+ overflow: hidden;
+}
+#party span {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 1em;
+ font-weight: bold;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ display: block;
+ margin: 10px 0 20px;
+}
+#party .avatar {
+ float: left;
+ width: 25%;
+ margin-right: 6%;
+}
+#party .background {
+ background-repeat: no-repeat;
+ height: 110px;
+ width: 100%;
+ -webkit-background-size: cover!important;
+ -moz-background-size: cover!important;
+ -ms-background-size: cover!important;
+ -o-background-size: cover!important;
+ background-size: cover!important;
+ background-position: center center!important;
+ box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
+}
+#party .info {
+ float: left;
+ width: 68%;
+}
+#party dl {
+ margin: 0;
+ padding: 0;
+}
+#party dl dt {
+ color: #333;
+ font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif;
+ font-size: 26px;
+ line-height: 1.1em;
+ font-weight: 300;
+ margin: 0;
+ padding: 0;
+}
+#party dl dd {
+ color: #333;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-style: italic;
+ font-size: .875em;
+ margin: 0;
+ padding: 0;
+}
+/*INFORMATION
+**********************************
+**********************************/
+#info {
+ /* google map styles */
+}
+#info .map {
+ clear: both;
+ display: block;
+ overflow: hidden;
+}
+#info #map_canvas {
+ height: 415px;
+ z-index: 4;
+}
+#info .info {
+ position: relative;
+ width: 100%;
+}
+#info .info li {
+ float: none;
+ position: relative;
+ width: 100%;
+ margin-right: 0;
+}
+#info .info li:last-child {
+ margin-right: 0;
+}
+#info .info span {
+ display: block;
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-size: 1em;
+ font-weight: bold;
+ letter-spacing: 2px;
+ margin-top: 35px;
+ text-transform: uppercase;
+}
+#info .info a:link,
+#info .info a:visited {
+ color: #86878b;
+ text-decoration: none;
+ -webkit-transition: all .3s ease;
+ -moz-transition: all .3s ease;
+ -ms-transition: all .3s ease;
+ -o-transition: all .3s ease;
+ transition: all .3s ease;
+}
+#info .info a:link:hover,
+#info .info a:visited:hover {
+ color: #333;
+ border-bottom: 1px solid transparent;
+}
+#info .map_description {
+ font-size: .75em;
+ line-height: 1.2em;
+ text-align: center;
+}
+#info .gm-style .marker {
+ text-align: center;
+}
+#info .gm-style .marker .title {
+ font-family: 'Gentium Book Basic', Helvetica, sans-serif;
+ font-weight: bold;
+ font-style: italic;
+}
+#info .gm-style .marker .subtitle,
+#info .gm-style .marker .subtitle a {
+ font-size: 12px;
+ color: #666;
+ text-decoration: none;
+}
+#info .gm-style img {
+ max-width: inherit;
+}
+/*INSTAGRAM
+**********************************
+**********************************/
+#instagram h3 {
+ width: 100%;
+ text-align: center;
+ margin-bottom: 25px;
+}
+#instagram #instas li {
+ float: left;
+ width: 49.7%;
+ margin: 0 1px 1px 0;
+ position: relative;
+}
+#instagram #instas li img {
+ opacity: 1;
+ filter: alpha(opacity=100);
+ -webkit-transition: all 0.5s ease-in-out;
+ -moz-transition: all 0.5s ease-in-out;
+ -ms-transition: all 0.5s ease-in-out;
+ -o-transition: all 0.5s ease-in-out;
+ transition: all 0.5s ease-in-out;
+ box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.28), 0 0 0 0 transparent;
+}
+#instagram #instas li:hover img {
+ opacity: .5;
+ filter: alpha(opacity=50);
+}
+#instagram #instas li .insta_expand {
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -27px 0 0 -27px;
+ background: rgba(0, 0, 0, 0.8);
+ text-align: center;
+ color: #fff;
+ width: 54px;
+ height: 54px;
+ -moz-border-radius: 27px;
+ border-radius: 27px;
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -ms-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+ -webkit-transform: rotate(-45deg) translate3d(0, 0, 0);
+ -moz-transform: rotate(-45deg) translate3d(0, 0, 0);
+ -o-transform: rotate(-45deg) translate3d(0, 0, 0);
+ -ms-transform: rotate(-45deg) translate3d(0, 0, 0);
+ opacity: 0;
+ filter: alpha(opacity=0);
+}
+#instagram #instas li .insta_expand .likes_count {
+ margin-top: 15px;
+ display: block;
+}
+#instagram #instas li:hover .insta_expand {
+ width: 54px;
+ height: 54px;
+ -webkit-transform: rotate(0) translate3d(0, 0, 0);
+ -moz-transform: rotate(0) translate3d(0, 0, 0);
+ -o-transform: rotate(0) translate3d(0, 0, 0);
+ -ms-transform: rotate(0) translate3d(0, 0, 0);
+ opacity: 1;
+ filter: alpha(opacity=100);
+}
+#instagram button {
+ display: none;
+}
+/*FOOTER
+**********************************
+**********************************/
+footer {
+ padding: 125px 0 140px;
+ text-align: center;
+}
+footer p {
+ color: #333;
+ font-size: .75em;
+ line-height: 1em;
+ margin: 8px 0;
+}
+footer p a {
+ color: #86878b;
+ text-decoration: none;
+ -webkit-transition: all .3s ease;
+ -moz-transition: all .3s ease;
+ -ms-transition: all .3s ease;
+ -o-transition: all .3s ease;
+ transition: all .3s ease;
+}
+footer p a:hover {
+ color: #333;
+ border-bottom: 1px solid transparent;
+}
+/*SHADOWBOX
+**********************************
+**********************************/
+#sb-title-inner,
+#sb-info-inner,
+#sb-loading-inner,
+div.sb-message {
+ font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: 200;
+ color: #fff;
+}
+#sb-container {
+ position: fixed;
+ margin: 0;
+ padding: 0;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ text-align: left;
+ visibility: hidden;
+ display: none;
+}
+#sb-overlay {
+ position: relative;
+ height: 100%;
+ width: 100%;
+}
+#sb-wrapper {
+ position: absolute;
+ visibility: hidden;
+ width: 100px;
+}
+#sb-wrapper-inner {
+ position: relative;
+ overflow: hidden;
+ height: 100px;
+}
+#sb-body {
+ position: relative;
+ height: 100%;
+}
+#sb-body-inner {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
+#sb-player.html {
+ height: 100%;
+ overflow: auto;
+}
+#sb-body img {
+ border: none;
+}
+#sb-body,
+#sb-loading {
+ background-color: #060606;
+}
+#sb-loading {
+ position: relative;
+ height: 100%;
+}
+#sb-loading-inner {
+ height: 100%;
+ background-image: url(../images/loader_gallery.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 50px 50px;
+}
+#sb-loading-inner span {
+ display: none;
+}
+#sb-title,
+#sb-info {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+#sb-title,
+#sb-title-inner {
+ height: 26px;
+ line-height: 26px;
+}
+#sb-title-inner {
+ font-size: 16px;
+ margin-top: 0 !important;
+}
+#sb-info,
+#sb-info-inner {
+ height: 36px;
+ line-height: 36px;
+ margin-top: 0 !important;
+}
+#sb-info-inner {
+ font-size: 12px;
+}
+#sb-nav {
+ float: right;
+ height: 28px;
+ padding: 6px 0;
+ width: 45%;
+}
+#sb-nav a {
+ display: block;
+ float: right;
+ height: 28px;
+ width: 28px;
+ margin-left: 6px;
+ cursor: pointer;
+ background-repeat: no-repeat;
+ opacity: 1;
+ filter: alpha(opacity=100);
+ -webkit-transition: opacity .3s ease;
+ -moz-transition: opacity .3s ease;
+ -ms-transition: opacity .3s ease;
+ -o-transition: opacity .3s ease;
+ transition: opacity .3s ease;
+}
+#sb-nav a:hover {
+ opacity: .5;
+ filter: alpha(opacity=50);
+}
+#sb-nav-close {
+ background-image: url(../images/gallery_close.png);
+}
+#sb-nav-next {
+ background-image: url(../images/gallery_next.png);
+}
+#sb-nav-previous {
+ background-image: url(../images/gallery_prev.png);
+}
+#sb-counter {
+ float: left;
+ width: 45%;
+ display: none;
+}
+#sb-counter a {
+ padding: 0 4px 0 0;
+ text-decoration: none;
+ cursor: pointer;
+ color: #fff;
+}
+#sb-counter a.sb-counter-current {
+ text-decoration: underline;
+}
+div.sb-message {
+ font-size: 12px;
+ padding: 10px;
+ text-align: center;
+}
+div.sb-message a:link,
+div.sb-message a:visited {
+ color: #fff;
+ text-decoration: underline;
+}
+/*FONTS
+**********************************
+**********************************/
+/*MEDIA QUERIES
+**********************************
+**********************************/
+/*IPAD + */
+@media only screen and (min-width: 480px) {
+ body:after {
+ content: 'desktop';
+ display: none;
+ }
+ h1 {
+ color: #fff;
+ font-size: 3.25em;
+ }
+ h2 {
+ margin: 80px 0 30px;
+ }
+ header {
+ padding-top: 0;
+ height: 115px;
+ background: rgba(0, 0, 0, 0.3);
+ position: absolute;
+ bottom: 0;
+ }
+ header .container {
+ padding: 0 30px;
+ }
+ header span {
+ color: #fff;
+ font-size: .9375em;
+ letter-spacing: 2px;
+ }
+ #feature {
+ height: 450px;
+ }
+ #feature img {
+ display: none;
+ }
+ #story .bride {
+ float: left;
+ width: 47.777778%;
+ margin-right: 4.444444%;
+ }
+ #story .groom {
+ float: left;
+ width: 47.777778%;
+ }
+ #story p {
+ margin-bottom: 0;
+ }
+ #photos li {
+ width: 19.555556%;
+ margin: 0 .555555556% 5px 0;
+ }
+ #photos li:nth-child(3n+3) {
+ margin: 0 .555555556% 5px 0;
+ }
+ #photos li:nth-child(5n+5) {
+ margin: 0 0 5px;
+ }
+ #party .bridesmaids {
+ float: left;
+ width: 47.777778%;
+ margin-right: 4.444444%;
+ }
+ #party .groomsmen {
+ float: left;
+ width: 47.777778%;
+ }
+ #map_canvas {
+ height: 500px;
+ }
+ #info .info li {
+ float: left;
+ width: 31%;
+ margin-right: 3.333333%;
+ }
+ #instas li {
+ width: 32.592593%;
+ margin: 0 .555555556% .555555556% 0;
+ }
+ #instas li:nth-child(3n+3) {
+ margin-right: 0;
+ }
+}
+/*DESKTOP*/
+@media only screen and (min-width: 768px) {
+ #dropdown {
+ display: block;
+ }
+ #feature {
+ margin-top: 45px;
+ }
+ #instas li {
+ width: 19.5555556%;
+ margin: 0 .555555556% .555555556% 0;
+ }
+ #instas li:nth-child(3n+3) {
+ margin: 0 .555555556% 5px 0;
+ }
+ #instas li:nth-child(5n+5) {
+ margin-right: 0;
+ }
+ #story h2:before {
+ background: url(../images/story_icon_small.png) no-repeat;
+ }
+ #photos h2:before {
+ background: url(../images/photos_icon_small.png) no-repeat;
+ }
+ #party h2:before {
+ background: url(../images/party_icon_small.png) no-repeat;
+ }
+ #info h2:before {
+ background: url(../images/info_icon_small.png) no-repeat;
+ }
+ #instagram h2:before {
+ background: url(../images/instagram_icon_small.png) no-repeat;
+ }
+}
+/*TARGET MOBILE*/
+@media only screen and (max-width: 479px) {
+ body:after {
+ content: 'mobile';
+ display: none;
+ }
+}
+/* ==========================================================================
+ Helper classes
+ ========================================================================== */
+/*
+ * Image replacement
+ */
+.ir {
+ background-color: transparent;
+ border: 0;
+ overflow: hidden;
+ /* IE 6/7 fallback */
+ *text-indent: -9999px;
+}
+.ir:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 100%;
+}
+/*
+ * Hide from both screenreaders and browsers: h5bp.com/u
+ */
+.hidden {
+ display: none !important;
+ visibility: hidden;
+}
+/*
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v
+ */
+.visuallyhidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+/*
+ * Extends the .visuallyhidden class to allow the element to be focusable
+ * when navigated to via the keyboard: h5bp.com/p
+ */
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
+}
+/*
+ * Hide visually and from screenreaders, but maintain layout
+ */
+.invisible {
+ visibility: hidden;
+}
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+.clearfix:before,
+.clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */
+}
+.clearfix:after {
+ clear: both;
+}
+/*
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.clearfix {
+ *zoom: 1;
+}
+/* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ Theses examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+@media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
+ /* Style adjustments for high resolution devices */
+}
+/* ==========================================================================
+ Print styles.
+ Inlined to avoid required HTTP connection: h5bp.com/r
+ ========================================================================== */
+@media print {
+ * {
+ background: transparent !important;
+ color: #000 !important;
+ /* Black prints faster: h5bp.com/s */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+ /*
+ * Don't show links for images, or javascript/internal links
+ */
+ .ir a:after,
+ a[href^="javascript:"]:after,
+ a[href^="#"]:after {
+ content: "";
+ }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+ thead {
+ display: table-header-group;
+ /* h5bp.com/t */
+ }
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+ img {
+ max-width: 100% !important;
+ }
+ @page {
+ margin: 0.5cm;
+ }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+}

0 comments on commit 487fe8b

Please sign in to comment.