/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
min-height: 101%;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
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, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
min-width: 1330px;
max-width: 100%;
min-height: 800px;
font-family: 'Open Sans', sans-serif;
}
.cookie-header {
display: none;
height: 61px;
margin: 5px 0;
.cookie-content {
color: #717171;
width: 1000px;
display: block;
margin: auto;
img.cookie {
float: left;
margin: 0 5px;
}
p {
font-size: 11px;
line-height: 1.2;
margin: 8px 0 5px 30px;
float: left;
width: 800px;
text-align: justify;
a {
color: #01afb8;
text-decoration: underline;
}
}
a.close {
margin: 10px;
width: 34px;
height: 34px;
background: url(../img/cookie_close.png) no-repeat;
float: right;
}
}
}
.header {
overflow: hidden;
height: 727px;
background: url(../img/header_bg.png) repeat top center;
}
.header-small {
height: 90px;
background: url(../img/header_bg.png) repeat top center;
}
.header-content {
width: 1000px;
display: block;
margin: auto;
position: relative;
.upper {
padding-top: 29px;
a.logo {
float: left;
background: url(../img/logo.png) no-repeat;
width: 206px;
height: 31px;
}
.menu {
margin-top: 7px;
float: right;
color: #47c8cd;
a {
padding-bottom: 5px;
font-size: 15px;
color: #fff;
text-decoration: none;
margin: 0 10px;
}
a.active, a:hover {
border-bottom: 3px solid #faa804;
}
}
}
.bubble {
position: absolute;
left: 40%;
top: 200px;
width: 406px;
height: 291px;
background: url(../img/content_bg.png);
text-align: center;
p {
font-weight: 600;
color: #fff;
font-size: 30px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
padding: 10px 40px;
}
a.start-test {
border: 3px solid #fff;
color: #fff;
text-transform: uppercase;
font-size: 20px;
font-weight: 600;
text-decoration: none;
padding: 10px 25px;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
transition: 500ms ease-in-out;
-moz-transition: 500ms ease-in-out;
-webkit-transition: 500ms ease-in-out;
}
a.start-test:hover {
border: 3px solid #fff;
background: #fff;
color: #333;
text-shadow: none;
}
a.start-test.pressed {
border: 3px solid #fff;
background: #fff;
color: #333;
text-shadow: none;
}
}
}
.test-container {
display: none;
padding: 0;
min-height: 400px;
.test-content {
width: 1000px;
display: block;
margin: auto;
}
a.test-type {
padding: 20px;
margin: 15px auto;
display: block;
width: 500px;
color: #05cad3;
border: 3px solid #05cad3;
background: #ffffff;
border-radius: 5px;
text-align: center;
text-decoration: none;
}
a.test-type.active {
color: #fff;
background: #05cad3;
}
a.test-type:hover {
color: #fff;
background: #05cad3;
text-decoration: none;
}
a.answer {
display: block;
padding: 15px 50px;
margin: 15px auto;
color: #05cad3;
border: 3px solid #05cad3;
background: #ffffff;
border-radius: 6px;
text-align: center;
text-decoration: none;
max-width: 180px;
}
a.answer:hover {
background: #05cad3;
color: #ffffff;
}
a.answer.active {
background: #05cad3;
color: #ffffff;
}
.tip-container {
margin: 40px 0;
padding: 25px 0;
background: url(../img/tip_bg.png) top repeat;
display: none;
.tip-content {
position: relative;
width: 1000px;
display: block;
margin: auto;
img.bulb {
margin: 20px auto 40px;
width: 90px;
height: 100px;
display: block;
}
.tip-box {
padding: 20px 40px;
display: block;
margin: auto;
border: 3px solid #fff;
border-radius: 5px;
color: #fff;
font-size: 16px;
a {
color: #fff;
}
}
h2 {
position: absolute;
top: 85px;
left: 44px;
color: #fff;
}
}
}
#thank-you {
display: none;
}
.fb-btns-container {
width: 900px;
display: block;
margin: 0 auto 40px auto;
a.inline-btn {
display: inline-block;
padding: 15px 20px 15px 70px;
margin: 15px auto;
color: #05cad3;
border: 3px solid #05cad3;
background: #ffffff;
border-radius: 6px;
text-align: center;
text-decoration: none;
}
a#invite {
background: url(../img/invite.png) -50px no-repeat;
}
a#share-test {
background: url(../img/share.png) -50px no-repeat;
}
a#restart-test {
background: url(../img/redo.png) -50px no-repeat;
}
}
}
.dashed-border-box {
margin: 25px 0;
padding: 15px;
width: 100%;
font-size: 27px;
font-weight: 600;
color: #475057;
border: 10px solid #eee;
border-radius: 5px;
text-align: center;
}
.tips-page-container {
padding: 20px 0;
display: block;
width: 1000px;
margin: auto;
img.bulb {
width: 99px;
height: 119px;
display: block;
margin: auto;
}
.single-tip {
font-size: 16px;
width: 401px;
min-height: 140px;
border: 10px solid #eee;
border-radius: 10px;
margin-bottom: 35px;
padding: 44px 40px 44px 75px;
text-align: justify;
position: relative;
.counter {
font-family: 'Patrick Hand', cursive;
font-size: 62px;
line-height: 1.3;
position: absolute;
width: 84px;
height: 84px;
border-radius: 49px;
border: 8px solid #fff;
color: #fff;
top: 34%;
left: -56px;
text-align: center;
-webkit-box-shadow: 0px 0px 8px -2px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px -2px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px -2px rgba(50, 50, 50, 0.75);
}
}
.single-tip-left {
margin-left: 40px;
.counter {
background: #01b2b8;
}
}
.single-tip-right {
margin-left: 486px;
.counter {
background: #ffa800;
}
}
p {
display: block;
margin: auto;
width: 1000px;
}
.single-tip-sm {
font-size: 16px;
width: 401px;
min-height: 95;
border: 10px solid #eee;
border-radius: 10px;
margin-bottom: 35px;
padding: 20px 40px 20px 75px;
text-align: justify;
position: relative;
.counter {
font-family: 'Patrick Hand', cursive;
font-size: 62px;
line-height: 1.3;
position: absolute;
width: 84px;
height: 84px;
border-radius: 49px;
border: 8px solid #fff;
color: #fff;
top: 14%;
left: -56px;
text-align: center;
-webkit-box-shadow: 0px 0px 8px -2px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px -2px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px -2px rgba(50, 50, 50, 0.75);
}
}
}
.footer {
height: 60px;
border-top: 1px solid #e8e8e8;
padding-top: 30px;
.footer-content {
display: block;
margin: auto;
width: 1000px;
a.logo {
background: url(../img/footer_logo.png) no-repeat;
width: 176px;
height: 38px;
float: right;
}
a.logo-erif {
background: url(../img/logo_erif_raport.png) no-repeat;
width: 96px;
height: 38px;
float: left;
}
}
}
/* ==========================================================================
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: 150%;
}
/*
* 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.
These 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 print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* 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;
}
}