app/assets/stylesheets/application.css
/*
* 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_self
*= require registration
*= require survey
*= require summary
*/
@import url('https://fonts.googleapis.com/css?family=Droid+Sans:400,500,600,700');
html {
height: 100%;
}
/*rgba(0, 0, 0, 0.8) = #333333
rgba(0, 0, 0, 0.6) = #666666
rgba(0, 0, 0, 0.4) = #999999
rgba(0, 0, 0, 0.2) = #CCCCCC
rgba(0, 0, 0, 0.1) = #E5E5E5
rgba(0, 0, 0, 0.05) = #F2F2F2*/
body {
position: absolute;
height: 100%;
font-family: 'droid sans', helvetica neue, helvetica, arial, sans-serif;
font-style: normal;
line-height: 1.5;
font-size: 14px;
color: #333333;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
overflow-x: hidden;
background-color: #FAFAFA;
margin: 0;
top: 0;
width: 100%;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.overflow--hidden {
overflow: hidden;
}
img {
object-fit: cover;
display: block;
}
.img--wh {
width: 100%;
height: 100%;
}
.img--h {
height: 100%;
}
.img--w {
width: 100%;
}
a {
color: inherit;
text-decoration: none;
margin: 0;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
}
input:focus {
outline: none;
}
.clearfix::after {
clear: both;
display: block;
content: '';
}
.transition--subtle {
-webkit-transition:linear .2s;
-moz-transition:linear .2s;
-o-transition:linear .2s;
transition:linear .2s;
}
.transition--elastic {
-webkit-transition:cubic-bezier(.68,-.55,.265,1.55) 1s;
-moz-transition:cubic-bezier(.68,-.55,.265,1.55) 1s;
-o-transition:cubic-bezier(.68,-.55,.265,1.55) 1s;
transition:cubic-bezier(.68,-.55,.265,1.55) 1s;
}
.transition--friction {
-webkit-transition:cubic-bezier(.77,0,.175,1) .5s;
-moz-transition:cubic-bezier(.77,0,.175,1) .5s;
-o-transition:cubic-bezier(.77,0,.175,1) .5s;
transition:cubic-bezier(.77,0,.175,1) .5s;
}
.transition--whoosh {
-webkit-transition:cubic-bezier(.19,1,.22,1) 1s;
-moz-transition:cubic-bezier(.19,1,.22,1) 1s;
-o-transition:cubic-bezier(.19,1,.22,1) 1s;
transition:cubic-bezier(.19,1,.22,1) 1s;
}
.transition--smooth {
-webkit-transition:cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
-moz-transition:cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
-o-transition:cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
transition:cubic-bezier(0.25, 0.46, 0.45, 0.94) .8s;
}
.button {
display: inline-block;
position: relative;
color: #FFFFFF;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 0;
border-radius: 3px;
white-space: nowrap;
font-size: 14px;
font-weight: 600;
font-style: normal;
background-color: #52bdec;
padding: 8px 16px;
line-height: 1.5;
font-family: 'droid sans';
margin-right: 8px;
}
.logo {
width: 125px;
height: 57px;
background-size: 100%;
cursor: pointer;
background-image: url('logo.png');
background-size: 125px 57px;
background-repeat: no-repeat;
position: relative;
float: left;
top: 8px;
}
.radio-button {
width: 20px;
height: 20px;
}
h2 {
font-size: 36px;
font-weight: 500;
margin-bottom: 20px;
color: #333333;
margin-top: 0;
}
h3 {
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
color: #333333;
margin-top: 0;
}
h4 {
font-size: 18px;
font-weight: 500;
margin-bottom: 10px;
color: #333333;
margin-top: 0;
}
p {
font-size: 18px;
font-weight: 500;
margin: 0;
color: #666666;
}
hr {
display: block;
height: 0;
width: 100px;
margin: 30px auto;
border: 0;
border-top: 1px solid #E5E5E5;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
ol {
padding-left: 30px;
margin-bottom: 30px;
list-style-type: decimal;
}
ul {
list-style-type: disc;
padding-left: 0;
margin: 0;
}
li {
font-size: 18px;
font-weight: 500;
margin: 0;
color: #333333;
list-style: none;
}
blockquote {
font-size: 18px;
line-height: 32px;
}
.notice {
position: fixed;
width: 100%;
top: 0;
z-index: 20;
margin: 0;
background-color: #52bdec;
color: #FFFFFF;
height: 40px;
padding: 5px 20px;
}
.alert {
position: fixed;
width: 100%;
top: 0;
z-index: 20;
margin: 0;
background-color: #F15C22;
color: #FFFFFF;
height: 40px;
padding: 5px 20px;
}
.nav {
background-color: #FFFFFF;
height: 100px;
box-shadow: 0 0 1px #CCCCCC;
padding: 10px 20px;
width: 100%;
z-index: 10;
position: fixed;
opacity: 1;
-webkit-transition:cubic-bezier(.19,1,.22,1) 2s;
-moz-transition:cubic-bezier(.19,1,.22,1) 2s;
-o-transition:cubic-bezier(.19,1,.22,1) 2s;
transition:cubic-bezier(.19,1,.22,1) 2s;
}
.nav-active {
opacity: 1;
}
.nav-link {
float: right;
margin: 0;
top: calc(50% - 18px);
position: absolute;
right: 20px;
}
.nav-link-item {
float: left;
text-transform: uppercase;
color: #52bdec;
font-size: 14px;
margin-right: 5px;
font-weight: 700;
padding: 5px 15px;
border-radius: 5px;
cursor: pointer;
}
.nav-link-home, .nav-link-about {
border-color: transparent;
}
.nav-link-item-dropdown {
display: none;
position: absolute;
right: 20px;
top: 40px;
background-color: #FFFFFF;
color: #52bdec;
padding: 10px 15px 5px 15px;
border: 1px solid #F2F2F2;
box-shadow: 0 1px 2px 0 #E5E5E5;
}
.nav-link-login-admin, .nav-link-login-expert {
position: relative;
margin-bottom: 10px;
display: block;
}
.nav-link-login-admin:hover, .nav-link-login-expert:hover {
color: #999999;
}
.nav-link-item:hover {
color: #999999;
}
.nav-link-logout-expert {
background:none!important;
border:none;
padding:0!important;
font: inherit;
color: inherit;
cursor: pointer;
}