/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Reset & Basics #Basic Styles #Site Styles #Typography #Links #Lists #Images #Buttons #Forms #Misc */ /* #Reset & Basics (Inspired by E. Meyers) ================================================== */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* #Basic Styles ================================================== */ body { background:url('../images/hair-flow.gif') no-repeat fixed; background-size: 100%; font-family:'Didact Gothic', sans-serif; font-size: 21px; color: #444; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; } @media (max-width: 900px) { body {font-size: 15px;} #dance-sing{ width:100%;} } @media (max-width: 400px) { body {font-size: 14px;} } /* #Typography ================================================== */ h1, h2, h3, h4, h5, h6 { color: #444; font-family: 'Didact Gothic', sans-serif; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 2.15em; line-height: 50px; margin-bottom: 14px; font-weight: 700;} h2 { font-size: 1.9em; line-height: 40px; margin-bottom: 10px; font-weight: 600; } h3 { font-size: 1.5em; line-height: 34px; margin-bottom: 8px; font-weight: 300; } h4 { font-size: 1.2em; line-height: 30px; margin-bottom: 4px; font-weight: 600; } p { font-size:1.5em; margin: 0 0 20px 0; color:#555; font-weight:600; text-align: center; width: 100%; } p img { margin: 0; } em { font-style: italic; } strong { font-weight: 800; color: #333; } small { font-size: 80%; } .main { text-align: center; } /* #Links ================================================== */ a, a:visited { color: #ed1278; text-decoration: underline; outline: 0; } a:hover, a:focus { color: #ed1278; } p a, p a:visited { line-height: inherit; } /* #Lists ================================================== */ ul, ol { margin-bottom: 20px; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; } li { line-height: 24px; margin-bottom: 12px; } ul.large li { line-height: 21px; } li p { line-height: 21px; } /* #Images ================================================== */ img.scale-with-grid { width: 100%; height: auto; } img.scale-with-grid2 { max-width: 100%; height: auto; } button{ border: none; margin: 0 auto; padding: 0; outline: none; width:100%; height: auto; background: rgba(255,255,255,0); border:none; background-size: contain; } button#beachwoodqueen1 { background: url(../images/silhouette.gif) no-repeat; background-size: contain;} button#beachwoodqueen2 { background: url(../images/pose.gif) no-repeat; background-size: 100%; } button#beachwoodqueen3 { background: url(../images/diving-britt.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen4 { background: url(../images/crystalthoughts.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen5 { background: url(../images/crystalwash.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen6 { background: url(../images/orbrollincolorpulse.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen7 { background: url(../images/black-out-britt.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen8 { background: url(../images/middle-piano.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen9 { background: url(../images/gently-rocking.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen10 { background: url(../images/knowingglance.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen11 { background: url(../images/flash.gif) no-repeat; background-size: 100% auto; } button#beachwoodqueen12 { background: url(../images/britt-looking-up.gif) no-repeat; background-size: contain; background-attachment: center; } /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .add-bottom { margin-bottom: 20px !important; } #footer { margin:0 auto; padding-top: 150px; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 53%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(53%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 53%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 53%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 53%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 53%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ } #welcome { font-size: 15px; overflow: hidden; width: 600px; height:600px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; background:rgba(255,255,255,0.75); position:absolute; top:10%; left:50%; -webkit-animation: glow 3s ease-in-out infinite; animation: glow 3s ease-in-out infinite; } #circle-text { margin-top:160px; } #top {height:100%; width:100%;} @-webkit-keyframes glow { 0% { box-shadow: 0 0 0 0 white;} 50% { box-shadow: 0 0 20px 20px white; } 100% { box-shadow: 0 0 0 0 white;} } @keyframes glow { 0% { box-shadow: 0 0 0 0 white;} 50% { box-shadow: 0 0 20px white; } 100% { box-shadow: 0 0 0 0 white;} }