/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the top of the * compiled file, but it's generally better to create a new file per style scope. * */ /* * jQuery FlexSlider v1.8 * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active { outline: none; } .slides, .flexslider li .slides li, .flexslider li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } /* FlexSlider Necessary Styles *********************************/ .flexslider { position: relative; } .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; height:auto; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* Pre-onload event || no-js fallback */ .slides.notloaded > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative;} /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;} /* Caption style */ /* IE rgba() hack */ .flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;} .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: -20px; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;} /* Direction Nav */ .flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: none no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;} .flex-direction-nav li .next {background-position: -52px 0; right: -21px;} .flex-direction-nav li .prev {left: -20px;} .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;} /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: 5px; right: 5px; text-align: right;} .flex-control-nav li {margin: 2px; display: inline-block; zoom: 1; *display: inline;} .flex-control-nav li a {width: 23px; height: 13px; display: block; background: none no-repeat 0 -392px; cursor: pointer; text-align: left; text-indent: -9999px; -webkit-transition: none; -moz-transition: none; -o-transition: all 0 ease; transition: none; } .flex-control-nav li a:hover {background-position: 0 -405px;} .flex-control-nav li a.active {background-position: 0 -418px; cursor: default;} /* #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; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } .ie7 img { -ms-interpolation-mode: bicubic; } /* #Basic Styles ================================================== */ body { background: #eee; font: 16px/20px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4c4c4c; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; } /* #Typography ================================================== */ h1, h2, h3, h4, h5, h6 { color: #404040; font-family: 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; text-shadow: 0px 1px 0px #fff; } .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #efefef; text-shadow: 0px 2px #000; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } h2 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } h3 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } h4 { font-size: 17px; line-height: 24px; } h5 { font-size: 14px; line-height: 21px; } h6 { font-size: 13px; line-height: 19px; } .subheader { color: #777; } .dark .subheader { color: #ccc; text-shadow: none; } p { margin: 0 0 20px 0; } p img { margin: 0; } p.lead { font-size: 21px; line-height: 27px; color: #777; } em {font-style: italic;} strong {font-weight: bold; color: #333;} .dark strong {color: #dbdbdb;} small {font-size: 80%;} /* Blockquotes */ blockquote, blockquote p { font-size: 15px; line-height: 24px; color: #777; font-style: italic; } blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } blockquote cite { display: block; font-size: 14px; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } hr { border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #fff; clear: both; margin: 10px 0; height: 0; } .dark hr { border-top: 1px solid #000; border-bottom: 1px solid #2c2c2c; } ::selection { color: #fff; -webkit-text-fill-color: #fff; background: rgba(34, 34, 34, .99); text-shadow: none; } .dark ::selection { color: #111; -webkit-text-fill-color: #111; background: rgba(255, 255, 255, .99); text-shadow: none; } img::selection { background: rgba(0, 0, 0, .3); } .dark img::selection { background: rgba(0, 0, 0, .3); } ::-moz-selection { color: #fff; -webkit-text-fill-color: #fff; background: rgba(34, 34, 34, .99); text-shadow: none; } .dark ::-moz-selection { color: #111; -webkit-text-fill-color: #111; background: rgba(255, 255, 255, .99); text-shadow: none; } img::-moz-selection { background: rgba(0, 0, 0, .3); } .dark img::-moz-selection { background: rgba(0, 0, 0, .3); } /* #Links ================================================== */ a, a:visited, button { color: #555; text-decoration: underline; outline: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition:all 1s ease; } a:hover, a:focus, button:hover { color: #000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } p a, p a:visited { line-height: inherit; } .dark a, .dark a:visited {color:#999;} .dark a:hover, .dark a:focus { color: #fff; } a img { opacity: 1; -webkit-transition:opacity 1s ease; -moz-transition:opacity 1s ease; -o-transition:opacity 1s ease; transition:opacity 1s ease; } a:hover img { zoom: 1; opacity: 0.7; filter: alpha(opacity=70); -webkit-transition:opacity 0.3s ease; -moz-transition:opacity 0.3s ease; -o-transition:opacity 0.3s ease; transition:opacity 0.3s ease; } .no-transition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: all 0 ease !important; transition: none !important; } /* #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: 18px; margin-bottom: 12px; } ul.large li { line-height: 21px; } li p { line-height: 21px; } /* #Images ================================================== */ img.scale-with-grid { max-width: 100%; height: auto; } /* #Buttons (default color: grey) ================================================== */ a.button, a.button:visited, button, input[type="submit"], input[type="reset"], input[type="button"] { /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.09) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.09))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* IE10+ */ background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#17000000',GradientType=0 ); /* IE6-8 */ background-color: #fff; color: #555; text-shadow: 1px 1px rgba(255, 255, 255, 1); border: 1px solid #eee; border-top: 1px solid #ccc; -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3), 0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3), 0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset; box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3), 0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; cursor: pointer; padding: 4px 12px; margin-bottom: 20px; line-height: 21px; font-family: 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } a.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background-color: #f1f1f1; border-bottom: 1px solid #e7e7e7; text-shadow: 1px 1px rgba(255, 255, 255, 0.6); -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset; -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset; box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset; } a.button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { background-color: #ddd; border: 1px solid #999; border-bottom: 1px solid #888; -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 10px -3px #000 inset; -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 10px -3px #000 inset; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 10px -3px #000 inset; text-shadow: 1px 1px rgba(255, 255, 255, 0.3); } .ie7 a.button, .ie7 a.button:visited, .ie7 button, .ie7 input[type="submit"], .ie7 input[type="reset"], .ie7 input[type="button"], .ie8 a.button, .ie8 a.button:visited, .ie8 button, .ie8 input[type="submit"], .ie8 input[type="reset"], .ie8 input[type="button"] { border: 1px solid #ccc; border-bottom: 1px solid #acacac; } /* === Buttons in dark context === */ .dark a.button, .dark a.button:visited, .dark button, .dark input[type="submit"], .dark input[type="reset"], .dark input[type="button"] { /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjA5Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.09)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(top, rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */ background-color: #202020; border: none; color: #ccc; text-shadow: 1px 1px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1), 0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset; -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1), 0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: 0px 1px 5px 0px rgba(0,0,0,1), 0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset; } .dark a.button:hover, .dark button:hover, .dark input[type="submit"]:hover, .dark input[type="reset"]:hover, .dark input[type="button"]:hover { background-color: #2b2b2b; color: #fff; -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,1), 0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,1), 0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: 0px 2px 5px 0px rgba(0,0,0,1), 0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset; } .dark a.button:active, .dark button:active, .dark input[type="submit"]:active, .dark input[type="reset"]:active, .dark input[type="button"]:active { background-color: #222; color: #999; -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset; -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset; box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset; } .ie7 .dark a.button, .ie7 .dark a.button:visited, .ie7 .dark button, .ie7 .dark input[type="submit"], .ie7 .dark input[type="reset"], .ie7 .dark input[type="button"], .ie8 .dark a.button, .ie8 .dark a.button:visited, .ie8 .dark button, .ie8 .dark input[type="submit"], .ie8 .dark input[type="reset"], .ie8 .dark input[type="button"] { border: 1px solid #313131; border-top: 1px solid #414141; } /* On-the-fly classes to change button's color (experimental) .blue { background-color: #5891b5; color: #033b5e; text-shadow: 0 1px rgba(255, 255, 255, .35); border: 1px solid #5891b5; } */ /* ie9 fails to render rounded-corners + gradient made with filter */ .ie9 a.button, .ie9 a.button:visited, .ie9 button, .ie9 input[type="submit"], .ie9 input[type="reset"], .ie9 input[type="button"] { filter: none; } .button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } textarea.full-width { width: 98%; } a.button.featured, a.button.featured:visited, button.featured, .button.featured, .button.call-to-action, .button.call-to-action:visited { display: block; width: 60%; text-align: center; margin: 10px auto 10px auto; font-size: 14px; line-height: auto; padding: 7px 20px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } /* #Tabs ================================================== */ ul.tabs { display: block; margin: 0; padding: 0; border-bottom: solid 1px #ddd; } .dark ul.tabs { border-color: #262626; } ul.tabs li { display: block; width: auto; height: 30px; padding: 0; float: left; margin-bottom: 0; } ul.tabs li a { display: block; text-decoration: none; width: auto; height: 29px; padding: 0px 20px; line-height: 30px; border: solid 1px #ddd; border-width: 1px 1px 0 0; margin: 0; background: #f5f5f5; font-size: 13px; -webkit-transition: background 1s ease, color 1s ease; -moz-transition: background 1s ease, color 1s ease; -o-transition: background 1s ease, color 1s ease; transition: background 1s ease, color 1s ease; } ul.tabs li a:hover { background: #f0f0f0; color: #111; -webkit-transition: background 0.3s ease, color 0.3s ease; -moz-transition: background 0.3s ease, color 0.3s ease; -o-transition: background 0.3s ease, color 0.3s ease; transition: background 0.3s ease, color 0.3s ease; } ul.tabs li a.active { background: #f6f6f6; height: 30px; position: relative; top: -4px; padding-top: 4px; border-left-width: 1px; margin: 0 0 0 -1px; color: #111; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } ul.tabs li:first-child a.active { margin-left: 0; } ul.tabs li:first-child a { border-width: 1px 1px 0 1px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; } ul.tabs li:last-child a { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; } ul.tabs-content { background: #f6f6f6; color: #4c4c4c; margin: 0; padding: 20px 10px 10px 10px; display: block; border: solid 1px #ddd; border-width: 0 1px 1px 1px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } /* Tabs in black context */ .dark ul.tabs li a { background: #0e0e0e; border-color: #262626; } .dark ul.tabs li a:hover { background: #090909; color: #fff; } .dark ul.tabs li a.active { background: #171717; border-color: #2C2C2C; color: #fff; } .dark ul.tabs-content { background: #171717; color: #ccc; border-color: #262626; } ul.tabs-content > li { display:none; } ul.tabs-content > li.active { display: block; } /* Clearfixing tabs for beautiful stacking */ ul.tabs:before, ul.tabs:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } ul.tabs:after { clear: both; } ul.tabs { zoom: 1; } /* #Forms ================================================== */ form { margin-bottom: 20px; } fieldset { margin-bottom: 20px; } input[type="text"], input[type="password"], input[type="email"], textarea, select { border: 1px solid #ccc; padding: 0 5px; margin: 0; height: 25px; outline: none; font: 13px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #777; width: 100%; max-width: 100%; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* "all" isn't used because then height is also transitioned and interfers with user's action on textarea height */ -webkit-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease; -moz-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease; -o-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease; transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease; /* Act as display:block; see http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not ie7 isn't supported here, see static fix bellow */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ie7 input[type="text"], .ie7 input[type="password"], .ie7 input[type="email"], .ie7 textarea, .ie7 select { width: 378px; /* 378px + 10px_padding_x2 + 1px_border_x2 = 400px (seven columns full width) */ /* note: ie7 doesn't support media-queries so this fix is enough for desktop uses */ } .dark input[type="text"], .dark input[type="password"], .dark input[type="email"], .dark textarea, .dark select { border: 1px dashed #333; color: #a1a1a1; background: #191919; -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4); } select { padding: 0; } input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, textarea:hover { background: #f2f2f2; } .dark input[type="text"]:hover, .dark input[type="password"]:hover, .dark input[type="email"]:hover, .dark textarea:hover { background: #161616; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #aaa; color: #444; background: #f2f2f2; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } .dark input[type="text"]:focus, .dark input[type="password"]:focus, .dark input[type="email"]:focus, .dark textarea:focus { border: 1px solid #282828; color: #fff; background: #191919; /* if the outer shadow isn't specified, transition doesn't occur */ -webkit-box-shadow: 0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset; -moz-box-shadow: 0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset; box-shadow:0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset; } textarea { min-height: 130px; overflow: auto; } label, legend { display: block; font-weight: bold; font-size: 0.9em; line-height: 1.4em; /* text-align: right;*/ padding-right: 20px; } input[type="checkbox"] { display: inline; } label span, legend span { font-weight: normal; font-size: 13px; color: #444; display: block; } .ajax-response { margin: 6px 0 0 5px; } .form-error-msg { margin: 6px 0 0 5px; color: #d82f2f; } .form-error { -moz-box-shadow: 0 0px 15px -5px #FF0000 !important; -webkit-box-shadow: 0 0px 15px -5px #FF0000 !important; box-shadow: 0 0px 15px -5px #FF0000 !important; border: 1px solid rgba(255, 0, 0, 0.5) !important; } .dark input[type="text"].form-error:focus, .dark input[type="password"].form-error:focus, .dark input[type="email"].form-error:focus, .dark textarea.form-error:focus { -moz-box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important; -webkit-box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important; box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important; } /*form li { float: left; padding: 3px; margin: 3px 0; background: #111; background: none; } form li label { width: 150px; float: left; text-align: right; padding-right: 15px; } form li label span { color: #999; display: block; }*/ form button { float: right; margin: 0 10px 0 0; } /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .add-bottom { margin-bottom: 20px !important; } .add-more-bottom { margin-bottom: 40px !important; } .add-top { margin-top: 10px !important; } .add-more-top { margin-top: 20px !important; } /* Spark Layout */ body, html { overflow: auto; } html.mobile, html.mobile body { overflow: auto; } #main { } .mobile #main { position: static; overflow: hidden; } header { background: #eee; border-top: 6px solid #000; border-bottom: 1px solid #fafafa; } .mobile header { position: relative; border-bottom: none; } header h1.logo { margin-top: 0; margin-bottom: 0; } header h1 a { display:block; max-height: 80px; } nav ul { float: right; height: 61px; } nav li { list-style: none; display: block; float: left; margin-top: -6px; margin-bottom: 0; } /* Blurr effect (experimentation) */ /* nav:hover a { color: #9a9ca6; color: rgba(0,0,0, 0.01); text-shadow: 0 0 4px #9a9ca6 !important; } nav a:hover { color: #fff; color: rgba(255,255,255, 1.0); text-shadow: none !important; } */ nav a, nav a:visited, nav a:focus { display: block; height: 63px; padding: 20px 20px 0 20px; text-decoration: none; color:#666; font-weight : 600; border-top: 3px solid #000; margin-top: 1px; } nav a:hover { color: red; border-top-color: #c1c1c1; } nav a.active, nav a.active:focus { color: #37b1ff; border-top-color: #37b1ff; -webkit-transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; -moz-transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; -o-transition:color 0.3s ease, border-top-color 0.3s ease, background-color 0.3s ease; transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; } nav a.active:hover { color: #000; border-top-color: #37b1ff; } nav a span { color: #c1c1c1; font-size: 12px; font-weight : normal; } article { padding: 40px 0; } #main article:first-of-type { padding-top: 20px; } article .row:last-of-type { margin-bottom: 0; } .mobile-only { display: none; /* display:block; in the Media-Queries */ } .dark { background: #212121 none repeat; color: #dbdbdb; } /* Box styling */ .box { background: #fff; display: block; padding: 5px; -webkit-box-shadow: 0 0 5px #d5d5d5; -moz-box-shadow: 0 0 5px #d5d5d5; box-shadow: 0 0 5px #d5d5d5; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .container .column.box, .container .columns.box { margin-left: 0; margin-right: 0; } .container .row.box { padding: 10px 0; } .dark .container .column.box, .dark .container .columns.box, .dark .box, .dark .box.dark { background: #000; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #2c2c2c; margin-left: -1px; /* Compensate the 1px border */ margin-right: -1px; } .box.dark { background: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 1px 1px 3px 0px #fff; background: #212121 none repeat; } .box.light { background: rgba(255,255,255,0.5); } .dark .container .column.box.light, .dark .container .columns.box.light, .dark .box.light, .dark .box.light { background: rgba(0,0,0,0.3); } .box.scale-with-grid { max-width: 90%; } .featured { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7); box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7); } .dark .featured { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .box.featured { margin-top: -15px; padding-top: 15px; } img.featured { -webkit-box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1); box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1); } .dark img.featured { -webkit-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1); -moz-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1); box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1); } /* blockquote, .blockquote { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:0 0 3px rgba(0,0,0,0.3); -moz-box-shadow:0 0 3px rgba(0,0,0,0.3); box-shadow:0 0 3px rgba(0,0,0,0.3); background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.1); } */ a.imglink { text-decoration: none; } /* Apply .headset to any container that should have a floating img */ .headset img { float:left; margin: 0 10px 5px 0; } .headset p, .headset h2, .headset h3, .headset h4, .headset h5 { margin-left: 70px; } .headset.price p, .headset.price h2, .headset.price h3, .headset.price h4, .headset.price h5 { float: left; margin: 10px 0 0 5px; } .headset span { float: right; font-size: 30px; padding: 15px 0px 2px 0; } .headset span sup { font-size: 18px; } .headset span sub { bottom: 0; font-size: 18px; } .titleset { margin-bottom: 30px; } /* gradients */ .bottom-gradient { position:relative; height:0; border-top:1px solid #ddd; border-bottom:1px solid #fff; z-index:-99; clear:both; margin:0; } .bottom-gradient.between-rows { margin: -15px 0 15px 0; } .bottom-gradient .container { height: 0; } .bottom-gradient span { border: medium none; display: block; height: 80px; margin: 0; padding: 0; position: absolute; top: -80px; z-index: -100; } .bottom-gradient .left { background:no-repeat none 0 0; background:-webkit-radial-gradient(bottom right,circle,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px); background:-moz-radial-gradient(bottom right,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px); width:80px; left:0; } .bottom-gradient .center { background:no-repeat none -114px 0; background:-webkit-radial-gradient(bottom left,circle,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px); background:-moz-radial-gradient(bottom left,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px); width:80px; right:0; } .bottom-gradient .right { position:relative; margin-left:80px; margin-right:80px; top:-80px; background:none; background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px); background:-moz-linear-gradient(bottom,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px); } .dark .bottom-gradient { border-top: 1px solid #000; border-bottom: 1px solid #2c2c2c; z-index: 0; } .dark .bottom-gradient span { display: none; } /* content-specific containers */ .welcome-container { padding: 10px 20px; } /* Shadows effect (experimental. not yet ported on .dark sections) */ .enjoliver { position: relative; line-height: 0px; float: left; width: auto; height: auto; max-width: 100%; padding: 7px; border-radius: 1px; border: 1px solid #f9f9f9; background: #fff; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset; -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset; } .enjoliver img { -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1); -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1); box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1); } .enjoliver:before, .enjoliver:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 12px; width: 70%; max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */ max-height: 100px; height: 55%; -webkit-box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); -ms-transform: skew(-15deg) rotate(-6deg); -o-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); } .enjoliver:after { left: auto; right: 10px; -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); -ms-transform: skew(15deg) rotate(6deg); -o-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); } /* End of file to load in last */ header, body { background: #eee url(data:image/png;base64,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); } /* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column { 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 .one-half.column { width: 460px; } /* Offsets */ .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; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .container .one.column { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 508px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 348px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { width: 300px; } .columns, .column { margin: 0; } .container .one.column, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .columns, .column { margin: 0; } .container .one.column, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 420px; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .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; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* CSS sprites made using spritegen.website-performance.org */ .large-icon { width:48px; height:48px; } .large-icons { background: none no-repeat top left; } .medium-icon { width:32px; height:32px; } .medium-icons { background: none no-repeat top left; } /* large icons */ .icon-menu {background-position: -98px -294px;} .dark .icon-menu {background-position: -98px -196px;} .icon-layers {background-position: -98px -490px;} .dark .icon-layers {background-position: -98px -392px;} .icon-font {background-position: 0 -1919px;} .dark .icon-font {background-position: 0 -1821px;} .icon-resize {background-position: 0 -294px;} .dark .icon-resize {background-position: 0 -196px;} .icon-dashboard {background-position: 0 -1559px;} .dark .icon-dashboard {background-position: 0 -1461px;} .icon-globe {background-position: -98px -98px;} .dark .icon-globe {background-position: -98px 0;} .icon-link {background-position: -98px -686px;} .dark .icon-link {background-position: -98px -588px;} .icon-grid {background-position: 0 -98px;} .dark .icon-grid {background-position: 0 0;} .icon-pin {background-position: -98px -1210px;} .dark .icon-pin {background-position: -98px -1112px;} .icon-cloud {background-position: 0 -1363px;} .dark .icon-cloud {background-position: 0 -1265px;} .icon-cert {background-position: 0 -1167px;} .dark .icon-cert {background-position: 0 -1069px;} .icon-bookmark {background-position: 0 -579px;} .dark .icon-bookmark {background-position: 0 -481px;} .icon-shopcart {background-position: -98px -1586px;} .dark .icon-shopcart {background-position: -98px -1488px;} .icon-burst {background-position: 0 -971px;} .dark .icon-burst {background-position: 0 -873px;} /* medium icons */ .icon-facebook {background-position: 0 -1739px;} .dark .icon-facebook {background-position: 0 -1657px;} .icon-twitter {background-position: -98px -1766px;} .dark .icon-twitter {background-position: -98px -1684px;} /* Optional file for easily change colors. Color scheme: Blue */ /* ==== Background motifs ==== */ /* If you want to change header's background header {background: #111 none repeat;} .dark header {background: #111 none repeat;} */ /* If you want to change main body's background body {background: #eee none repeat;} */ /* If you want to change .dark sections background .dark {background: #212121 none repeat; color: #fff;} */ /* ==== Top navigation ==== */ header, nav a, nav a:visited, nav a:focus { border-top-color: #4a4a4a; color: #333; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); } nav a:hover { color: #000; border-top-color: #c1c1c1; } header.dark, .dark nav a, .dark nav a:visited, .dark nav a:focus { color: #ccc; text-shadow: none; } .dark nav a:hover { color: #fff; border-top-color: #c1c1c1; } /* Active page link */ nav a.active, nav a.active:focus, .dark nav a.active, .dark nav a.active:focus { color: #2f96d8; } nav a.active:hover { color: #000; } .dark nav a.active:hover { color: #fff; } nav a span { color: #888; font-size: 12px; font-weight : normal; } /* Content links */ a, a:visited {color: #0b81be;} a:hover, a:focus {color: #000;} /* Content links in dark context */ .dark a, .dark a:visited {color:#37b1ff;} .dark a:hover, .dark a:focus {color: #fff;} /* Media Queries */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { nav ul { height: 40px; } nav li a, nav li a:visited, nav li a:focus { display: inline-block; height: 40px; width: auto; padding: 23px 15px 0 15px; } nav li a span { display: none; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { header h1, header h1 a, header h1 a img { max-height: 60px; } .hide-for-mobile { display: none; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .container .column.box, .container .columns.box, .container .box .column, .container .box .columns { width: 280px; } .box.featured { margin-top: 10px; margin-bottom: 10px; } .container .row.box { padding: 10px; } header h1.logo.one-third.column { width: 50px; } header nav.menu.two-thirds.column { width: 370px; } header h1.logo img { display: none; } header h1.logo img.mobile-only { display: block; } label, legend { text-align: left; padding: 0 0 5px 5px; } label span, legend span { display: inline; margin-left: 10px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { nav li a, nav li a:visited, nav li a:focus { padding: 23px 10px 0 10px; } .container .column.box, .container .columns.box, .container .box .column, .container .box .columns { width: 400px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { #main { top: 57px; /* header height */ } nav li a, nav li a:visited, nav li a:focus { padding: 17px 3px 0 3px; font-size: 13px; } nav ul { height: 30px; } header h1.logo.one-third.column { width: 30px; margin-top: 6px; } header nav.menu.two-thirds.column { width: 270px; } } .alert { padding: 8px 35px 8px 14px; margin-bottom: 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #c09853; } .alert-heading { color: inherit; } .alert .close { position: relative; top: -2px; right: -21px; line-height: 18px; } .alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; } .alert-danger, .alert-error { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; } .alert-info { background-color: #d9edf7; border-color: #bce8f1; color: #3a87ad; } .alert-block { padding-top: 14px; padding-bottom: 14px; } .alert-block > p, .alert-block > ul { margin-bottom: 0; } .alert-block p + p { margin-top: 5px; } .error > label, .error .help-block, .error .help-inline, .field_with_error > label, .field_with_error .help-block, .field_with_error .help-inline, .field_with_errors > label, .field_with_errors .help-block, .field_with_errors .help-inline { color: #b94a48; } .error input, .error select, .error textarea, .field_with_error input, .field_with_error select, .field_with_error textarea, .field_with_errors input, .field_with_errors select, .field_with_errors textarea { color: #b94a48; border-color: #b94a48; } .error input:focus, .error select:focus, .error textarea:focus, .field_with_error input:focus, .field_with_error select:focus, .field_with_error textarea:focus, .field_with_errors input:focus, .field_with_errors select:focus, .field_with_errors textarea:focus { border-color: #953b39; -webkit-box-shadow: 0 0 6px #d59392; -moz-box-shadow: 0 0 6px #d59392; box-shadow: 0 0 6px #d59392; } .error .input-prepend .add-on, .error .input-append .add-on, .field_with_error .input-prepend .add-on, .field_with_error .input-append .add-on, .field_with_errors .input-prepend .add-on, .field_with_errors .input-append .add-on { color: #b94a48; background-color: #f2dede; border-color: #b94a48; } h1, h2, h3 { font-family: "museo", "inconsolata", "menlo", serif; font-weight: 500; } .welcome-container h1 { margin-bottom: 30px; } .welcome-container .button { margin-top: 20px; } .icon-server { background: none no-repeat top left; } .dark .icon-server { background: none no-repeat top left; } .icon-vault { background: none no-repeat top left; } .dark .icon-vault { background: none no-repeat top left; } .icon-shopping { background: none no-repeat top left; } .dark .icon-shopping { background: none no-repeat top left; } .icon-case { background: none no-repeat top left; } .dark .icon-case { background: none no-repeat top left; } .icon-calc { background: none no-repeat top left; } .dark .icon-calc { background: none no-repeat top left; } .user-session-nav { background: #4a4a4a; font-size: 12px; height: 33px; } .user-session-nav .user-session-nav-links { float: right; } .user-session-nav a { text-decoration: none; margin: 0; color: white; margin-left: 10px; } .user-session-nav a:hover { text-decoration: underline; } .dark a.btn-large { color: #333333; text-decoration: none; font-family: "museo", "inconsolata", "menlo", serif; font-size: 24px; } form { margin-bottom: 40px; margin-top: 10px; } form .control-group { margin: 10px 0; } form ul { margin: 20px; } form .button { font-size: 24px; padding: 10px 15px; float: right; } select { width: 150px; margin: 4px 8px 4px 0; } .side-content { margin-top: 30px; } #enroll_side_content { height: 700px; overflow: scroll; padding: 20px; -webkit-box-shadow: inset 0 1px 2px #cccccc; -moz-box-shadow: inset 0 1px 2px #cccccc; box-shadow: inset 0 1px 2px #cccccc; border: 2px solid #cccccc; } .sign-in { width: 360px; margin: 0 auto; } #welcome_side_content { height: 700px; overflow: scroll; overflow-x: hidden; border: 1px solid #dddddd; padding: 10px; background: #fafafa; } #welcome_side_content blockquote { border: none; } #how_it_works_side_content { border-left: 1px solid #dddddd; padding-left: 5px; } .one-third.left > div { border-right: 1px solid #dddddd; padding-right: 5px; } .social { height: 20px; position: relative; } .social iframe { height: 20px; position: absolute; top: 0; } .social .fb-like iframe { left: 120px; }