app/assets/stylesheets/species/all.scss
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,700);
@import './variables';
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;
}
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;
}
html { height: 100%; }
body {
margin: 0;
color: #868686;
font: 14px/18px 'Open Sans', Helvetica, Arial, sans-serif;
background: $color-gray-light;
height: 100%;
min-width: 980px;
background-image: image-url('species/background_1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}
body.inner {
background-attachment: fixed;
}
.top-level-container {
padding-bottom: 150px; /* reflects height of footer */
position:relative;
min-height: 100%;
box-sizing: border-box;
}
img { border-style: none; }
i { font-style: italic; }
a {
text-decoration: none;
color: #666;
}
a:hover { text-decoration: underline; }
a:active { background-color: transparent; }
textarea, select, input {
font: 100% 'Open Sans', Helvetica, Arial, sans-serif;
vertical-align: middle;
color: #000;
}
form, fieldset {
margin: 0;
padding: 0;
border-style: none;
}
p.browsehappy {
text-align: center;
color: black;
z-index: 1000;
width: 960px;
position: fixed;
top: 0px;
left: 50%;
margin-left: -480px;
}
p.browsehappy a {
color: darkRed;
}
#wrapper {
margin: 0 auto;
position: relative;
padding-bottom: 150px; /* reflects height of footer */
min-height: 100%;
}
.w1 {
width: 940px;
margin: 0 auto -35px;
}
#header {
width: 100%;
padding: 54px 0 0;
}
#header:after {
clear: both;
content: "";
display: block;
}
#header .logo {
margin-top: -1px;
width: 160px;
height: 43px;
float: left;
text-indent: -9999px;
overflow: hidden;
background: image-url('species/species_plus_logo_header.png') no-repeat;
background-size:100%;
}
html.lt-ie9 #header .logo{
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='species/species_plus_logo_header.png',
sizingMethod='scale');
}
#header .logo a {
display: block;
height: 100%;
}
span.beta{
font-size: 13px;
color: #f66;
font-style: italic;
margin-left: 10px;
}
#nav {
float: right;
padding: 13px 0 0;
}
#nav > li {
float: left;
font-size: 15px;
line-height: 18px;
padding: 0 25px 10px 20px;
position: relative;
}
#nav > li:first-child { background: none; }
#nav > li:last-child { padding-right: 0; }
#nav > li > a {
color: $color-navy-dark;
text-decoration: none;
}
#nav > li > a:hover {
border-bottom: 1px dotted $color-navy-dark;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#nav > li.add {
border-left: 1px solid $color-navy-dark;
border-right: 1px solid $color-navy-dark;
padding-bottom: 0;
}
#nav > li.add > a { text-decoration: none; }
#nav > li.add > a:hover {
border-bottom: none;
}
#nav > li:hover > div.popup-holder {
display: block;
z-index: 900;
}
#nav > li > div.popup-holder {
display: none;
position: absolute;
left: 6px;
top: 10px;
width: 240px;
padding: 22px 0 0;
}
#nav > li > div.popup-holder ul {
padding: 5px 15px 15px 15px;
background: #f5f5f7;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid #8fb7cf;
width: 230px;
z-index: 1000;
}
#nav > li > div.popup-holder:after {
content: "";
position: absolute;
top: 13px;
left: 10px;
width: 22px;
height: 10px;
z-index: 1001;
background: image-url('species/arrow.png') no-repeat;
background-size: 100%;
}
#nav > li > ul > li {
float: left;
width: 100%;
font-size: 13px;
margin: 5px 0 -2px;
}
#nav > li > ul > li > a {
float: left;
text-decoration: none;
border-bottom: 1px dotted $color-navy-dark;
color: $color-navy-dark;
}
#nav > li > ul > li > a:hover {
float: left;
text-decoration: none;
color: #7CA8C6;
border-bottom: 1px dotted #7CA8C6;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#main {
width: $main-container-width;
margin: 0 auto;
font-size: 13px;
text-align: center;
color: #868686;
padding: 136px 0 201px;
}
#main p {
margin: 20px 0 28px 0;
font-size: 15px;
color: $color-navy-dark;
}
#main h1 {
font-size: 50px;
font-weight: lighter;
margin: 0 0 3px;
color: $color-navy-dark;
line-height: 60px;
}
@mixin text-species {
margin-top: 10px;
width: 210px;
vertical-align: top;
height: 61px;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
background: image-url('species/species_plus_logo_text.png') no-repeat;
background-size: 100%;
}
.text-species {
@include text-species;
&--sm {
@include text-species;
width: 100px; height: 29px;
}
}
html.lt-ie9 .text-species{
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='species/species_plus_logo_text.png',
sizingMethod='scale');
}
a.learn-more {
color: $color-navy-dark;
border-bottom: 1px dotted $color-navy-dark;
}
a.learn-more:hover {
text-decoration: none;
border-bottom: 1px dotted #7CA8C6;
color: #7CA8C6;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#footer {
background: #A4C5DA;
border-top: 1px solid #6b94af;
left: 0;
bottom: 0;
position: absolute;
width: 100%;
}
#footer .logos {
margin: 25px 0 0;
height: 70px;
}
#footer .holder {
margin: 0 auto;
width: 940px;
overflow: hidden;
}
.power-by, .login-link {
float: right;
height: 40px;
}
.login-link a {
color: #648aa2;
text-decoration: none;
cursor: pointer;
}
.power-by img { display: block; }
.power-by a:hover { text-decoration: none; }
.power-by-title {
color: #648aa2;
font-weight: 700;
text-align: center;
font-family: sans-serif;
}
#footer .sponsor {
float: left;
padding: 10px 0 0;
}
#footer .sponsor li {
float: left;
margin: 0 20px 0 0;
}
#footer .sponsor li img { display: block; }
.inner #main {
width: 100%;
padding: 0;
margin: 0 0 105px;
position: relative;
z-index: 666;
}
body.inner #footer .holder{
margin: 0 auto;
width: 940px;
overflow: hidden;
}
/*body.inner #footer .holder .sponsor{
display: none;
}*/
#header .download {
float: right;
}
#main .download {
display: inline-block;
}
#header .download, #main .download {
text-decoration: none;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
margin: 18px 0 0;
padding: 0 14px;
position: relative;
background: #376382;
line-height: 31px;
-webkit-border-radius: 20px;
border-radius: 20px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.05);
}
#header .download:hover, #main .download:hover {
cursor: pointer;
background: #253848;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.inner #nav {
margin: 0 12px 0 0;
padding: 24px 0 0;
}
.inner #header { margin: 0 0 45px; }
.container {
text-align: left;
background: #f5f5f7;
padding: 1px 0 0;
border: 1px solid #e5e5e5;
}
.container .heading { padding: 8px 28px 10px; }
.container .heading .title {
color: #376380;
font-size: 15px;
font-weight: bold;
}
.container .heading .link-holder {
position: relative;
margin: 0 4px 0 6px;
display: inline-block;
vertical-align: top;
}
.container .heading .link {
float: left;
min-width: 115px;
font-size: 10px;
position: relative;
font-weight: bold;
text-transform: uppercase;
color: #fff;
padding: 0 25px 0 10px;
background: #376382;
line-height: 21px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.container .heading .link:before {
width: 6px;
height: 4px;
position: absolute;
content: "";
z-index: 1;
right: 10px;
top: 9px;
background: image-url('species/arrow01.png') no-repeat;
}
.container .heading .link-holder:hover .popup-holder { display: block; }
.container .heading .link-holder .popup-holder {
position: absolute;
display: none;
z-index: 9999;
right: -4px;
top: 17px;
padding: 10px 0 0;
}
.container .heading .popup {
width: 96px;
position: relative;
text-align: left;
padding: 8px 3px 5px 10px;
background: #f5f5f7;
-webkit-border-radius: 5px;
border-radius: 5px;
border: #6b94af solid 1px;
}
.container .heading .popup:after {
content: "";
position: absolute;
top: -7px;
right: 13px;
width: 7px;
height: 7px;
z-index: 1;
background: image-url('species/arrow03.png') no-repeat;
}
.check .row {
overflow: hidden;
margin: 0 0 3px;
}
.check input[type="checkbox"] {
float: left;
width: 15px;
height: 16px;
padding: 0;
margin: 0 5px 0 0;
}
.check label {
float: left;
line-height: 16px;
font-size: 13px;
color: #666;
}
.result-block { width: 100%; }
.result-list {
background: #cddae3;
overflow: hidden;
padding: 9px 40px;
border-top: 1px solid #e5e5e5;
}
.result-list li {
float: left;
font-size: 13px;
line-height: 20px;
font-weight: bold;
background: image-url('species/arrow04.png') no-repeat 0 50%;
padding: 0 11px;
text-transform: uppercase;
}
.result-list li:first-child {
background: none;
padding-left: 0;
}
.result-list li a { color: #253848; }
.result-block h2 {
margin: 0;
font-size: 19px;
overflow: hidden;
padding: 26px 40px;
line-height: 21px;
font-style: italic;
border-top: 1px solid #e5e5e5;
}
.result-block h2 span.match, .result-block h2 span.match.synonyms {
font-weight: bold;
}
.result-block h2 span.author-year, .result-block h2 span.synonyms {
font-size: 13px;
color: #666;
font-style: normal;
}
.result-block h2 a {
color: #373f4c;
float: left;
text-decoration: none;
border-bottom: 1px dotted #373f4c;
}
.result-block h2:hover { background: #ecf2f6; }
.result-block.add h2 { padding: 13px 28px 12px; }
.download-block {
width: 441px;
margin-left: -180px;
position: absolute;
left: 50%;
background: #f5f5f7;
-webkit-border-radius: 12px;
border-radius: 12px;
border: 1px solid #8fb7cf;
z-index: 1000;
}
.download-block .close {
width: 22px;
height: 22px;
overflow: hidden;
position: absolute;
right: -9px;
top: -6px;
text-indent: -9999px;
background: image-url('species/btn-close.png') no-repeat;
}
.download-block .title {
display: block;
font-size: 17px;
text-align: center;
padding: 29px 10px 26px;
line-height: 20px;
font-weight: bold;
text-transform: uppercase;
color: #253848;
background: #A4C5DA;
border-bottom: 1px solid #8fb7cf;
-webkit-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 0 0;
}
.download-block .tabset {
text-align: center;
padding: 21px 0 19px;
}
.download-block .tabset li {
min-width: 70px;
margin: 0 -4px 0 0;
text-align: center;
line-height: 16px;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
vertical-align: top;
cursor: pointer;
}
.download-block .tabset li a {
display: block;
text-decoration: none;
background: #376382;
color: #fff;
padding: 8px 14px 7px;
border: 1px solid #2c516c;
border-left: none;
}
.download-block .tabset li a:hover, .download-block .tabset li.active a, .download-block .tabset li a.active { background: #253848; }
.download-block .tabset li:first-child a {
-webkit-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
.download-block .tabset li.last-child a {
-webkit-border-radius: 0 20px 20px 0;
border-radius: 0 20px 20px 0;
}
.download-block .tab-content { border-top: 1px solid #d6d7d7; }
.download-block .csv_options_holder {
margin: 10px;
text-align: center;
line-height: 180%;
}
.download-block .csv_options_holder a {
cursor: pointer;
}
#csv_options{ display: none; }
.btn-holder {
border-top: 1px solid #d6d7d7;
text-align: center;
padding: 28px 10px 28px;
}
.btn-holder a {
display: block;
margin: 0 auto;
font-weight: bold;
font-size: 15px;
color: #fff;
text-transform: uppercase;
line-height: 22px;
padding: 10px 0 8px;
height: 22px;
width: 132px;
-webkit-border-radius: 25px;
border-radius: 25px;
background: #376382;
text-decoration: none;
}
.btn-holder a:hover { background: #253848; }
.doc-type {
overflow: hidden;
padding: 16px 0 13px 20px;
}
.doc-type .heading {
color: $color-navy-dark;
font-weight: bold;
display: block;
margin: 0 0 4px;
text-transform: uppercase;
}
.doc-type .heading.more { margin: 0 0 4px 11px; }
.doc-type .typy-columns { overflow: hidden; }
.doc-type .typy-columns .col {
float: left;
width: 166px;
}
.doc-type .typy-columns.add .col {
padding: 0 0 3px 11px;
width: 140px;
}
.doc-type .typy-columns .col .row { margin: 0 0 5px }
//
.process-type {
overflow: hidden;
padding: 16px 0 13px 20px;
}
.process-type .heading {
color: $color-navy-dark;
font-weight: bold;
display: block;
margin: 0 0 4px;
text-transform: uppercase;
}
.process-type .heading.more { margin: 0 0 4px 11px; }
.process-type .typy-columns { overflow: hidden; }
.process-type .typy-columns .col {
float: left;
width: 25%;
}
.process-type .typy-columns .col-wide {
float: left;
width: 50%;
}
.info-columns {
width: 100%;
padding: 20px 0 16px;
border-top: 1px solid #d6d7d7;
}
.info-columns:after {
display: block;
clear: both;
content: "";
}
.info-columns .col {
float: left;
width: 145px;
padding: 0 0 0 17px;
}
.info-columns .col:first-child {
width: 145px;
padding: 0 0 0 50px;
border-right: 1px solid #e8e8e9;
}
.info-columns .col .tab-link { width: 100%; }
.info-columns .col .tab-link li {
margin: 0 -4px 0 0;
text-align: center;
line-height: 30px;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
}
.info-columns .col .tab-link li a {
float: left;
padding: 0 10px;
text-decoration: none;
background: #376382;
color: #fff;
border: 1px solid #253848;
border-left: none;
}
.info-columns .col .tab-link li a:hover, .info-columns .col .tab-link li a.active { background: #253848; }
.info-columns .col .tab-link li:first-child a {
-webkit-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
.info-columns .col .tab-link li.last-child a {
-webkit-border-radius: 0 20px 20px 0;
border-radius: 0 20px 20px 0;
}
.info-columns .col .link {
float: left;
min-width: 68px;
font-size: 13px;
position: relative;
font-weight: bold;
text-transform: uppercase;
color: #fff;
padding: 8px 19px 7px 10px;
background: #376382;
line-height: 16px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-decoration: none;
}
.info-columns .col .link:hover { background: #253848; }
.info-columns .col .link:before {
width: 6px;
height: 4px;
position: absolute;
content: "";
z-index: 1;
right: 10px;
top: 14px;
background: image-url('species/arrow01.png') no-repeat;
}
.three-columns {
padding: 20px 25px;
}
.three-columns:after {
display: block;
content: "";
clear: both;
}
.three-columns .col {
float: left;
padding: 0 6px;
border-left: 1px solid #e8e8e9;
}
.three-columns .col:first-child {
border-left: none;
}
.three-columns .col .link {
float: left;
min-width: 85px;
font-size: 13px;
position: relative;
font-weight: bold;
text-transform: uppercase;
color: #fff;
padding: 8px 19px 7px 13px;
background: #376382;
line-height: 16px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-decoration: none;
}
.three-columns .col .link:hover { background: #253848; }
.three-columns .col .link:before {
width: 6px;
height: 4px;
position: absolute;
content: "";
z-index: 1;
right: 13px;
top: 14px;
background: image-url('species/arrow01.png') no-repeat;
}
.tab-link01 {
padding: 20px 0 13px 49px;
border-top: 1px solid #d6d7d7;
}
.tab-link01 li {
margin: 0 -4px 0 0;
line-height: 30px;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
vertical-align: top;
}
.tab-link01 li a {
float: left;
padding: 0 10px;
text-decoration: none;
background: #376382;
color: #fff;
border: 1px solid #2c516c;
border-left: none;
}
.tab-link01 li a:hover, .tab-link01 li.active a { background: #253848; }
.tab-link01 li:first-child a {
-webkit-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
.tab-link01 li.last-child a {
-webkit-border-radius: 0 20px 20px 0;
border-radius: 0 20px 20px 0;
}
.heading-holder {
padding: 30px 60px 75px;
min-height: 139px;
background: #A4C5DA;
border: 1px solid #8fb7cf;
border-bottom: none;
border-top: none;
word-spacing: -3px;
text-align: left;
}
.heading-holder .authors {
line-height: 30px;
}
.heading-holder .species-name {
word-spacing: 0;
}
#main .heading-holder h1 {
font-size: 41px;
font-weight: bold;
font-style: italic;
margin: 0;
line-height: 60px;
}
#main .heading-holder h2 {
color: $color-navy-dark;
font-size: 24px;
padding: 5px 0 15px 0;
font-weight: normal;
font-style: normal;
}
#main .heading-holder .list {
overflow: hidden;
padding: 0;
}
#main .heading-holder .list li {
float: left;
font-size: 17px;
line-height: 20px;
background: image-url('species/arrow06.png') no-repeat 0 50%;
padding: 0 6px 0 13px;
}
#main .heading-holder .list li:first-child {
background: none;
padding-left: 0;
}
#main .heading-holder .list li a { color: #2a425a; }
#main .tabset {
margin: -40px 0 0;
position: relative;
}
#main .tabset:after {
display: block;
clear: both;
content: "";
}
#main .tabset > li {
float: left;
width: 184px;
font-size: 19px;
text-align: center;
text-transform: uppercase;
}
#main .tabset > li > a {
text-align: center;
display: block;
color: #2a425a;
text-decoration: none;
border-top: solid 1px #8fb7cf;
border-left: solid 1px #8fb7cf;
padding: 15px 0;
margin-top: -9px;
font-weight: bold;
}
#main .tabset > li:first-child > a {
-webkit-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
}
#main .tabset > li.last-child > a {
-webkit-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
border-right: solid 1px #8fb7cf;
}
#main .tabset > li > a.active, #main .tabset > li:hover > a.active {
background: #f5f5f7;
color: #25475F;
border-top: solid 1px #ACC7DF;
border-left: solid 1px #ACC7DF;
border-right: solid 1px #ACC7DF;
}
#main .tabset > li:hover > a {
background: #9DC0DA;
}
#main .tabset > li > a.active + ul { display: block; }
#main .tabset > li > ul {
position: absolute;
display: none;
left: 0;
top: 40px;
background: #f5f5f7;
border-top: none;
width: 838px;
border-left: solid 1px #adc7de;
border-right: solid 1px #adc7de;
border-bottom: solid 1px #D5E0E8;
padding: 0 40px 0 60px;
}
#main .tabset > li > ul >li {
float: left;
line-height: 38px;
font-size: 15px;
font-weight: bold;
text-align: center;
text-transform: none;
padding: 5px 81px 0 0;
}
#main .tabset > li > ul >li.last {
padding-right: 0;
}
#main .tabset > li.documents-tab > ul > li {
padding: 5px 25px 0 0
}
#main .tabset > li > ul >li > a {
color: #7CA8C6;
float: left;
}
#main .tabset > li > ul >li.active > a, #main .tabset > li > ul >li > a:hover {
color: #2a425a;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#main .tabset > li > ul > li.has-dropdown:hover > a {
padding: 0 0 1px;
margin: 0 0 -1px;
background: image-url('species/arrow07.png') no-repeat 50% 100%;
}
#main .tabset > li > ul > li.has-dropdown:hover ul, #main .tabset > li > ul > li.has-dropdown ul:hover {
display: block;
}
.has-dropdown ul {
display: none;
position: absolute;
left: -1px;
top: 45px;
background: #ecf2f6;
border: solid 1px #adc7de;
border-top: none;
width: 752px;
padding: 0 0 0 186px;
}
.has-dropdown ul li {
line-height: 27px;
float: left;
font-size: 13px;
padding: 0;
min-width: 81px;
}
.has-dropdown ul li.active a, .has-dropdown ul li a:hover {
font-weight: bold;
text-decoration: none;
}
#main .tab-content {
background: #f5f5f7;
border: 1px solid #d5dadd;
border-top: none;
padding: 50px 0 60px 0;
}
#main .block {
text-align: left;
padding: 38px 60px 0 60px;
margin: 0 -1px 12px;
}
#main .show_more {
border-bottom: 1px solid #ddd;
}
#main .show_more:hover, #main .show_more.active {
border-bottom: 1px solid #376382;
}
#main .block .title {
display: block;
font-size: 15px;
color: $color-navy-dark;
font-weight: bold;
padding: 0;
margin: 0 0 12px;
text-transform: uppercase;
}
#main .block .empty {
padding: 0;
font-size: 13px;
}
#main .block02 .empty{
padding: 0;
}
#main .block .title.more { text-transform: none; }
#main .block table {
border-collapse: collapse;
margin: 0;
color: #666;
border: 0;
width: 100%;
}
#main .block th, #main .block td {
padding: 0;
vertical-align: middle;
}
#main .block th {
color: #999;
text-align: left;
vertical-align: bottom;
text-transform: uppercase;
border-bottom: 1px solid #ccc;
padding: 0 0 7px;
}
#main .block th.col1 {
width: 29px;
border: 0;
}
#main .block th.col2 {
width: 120px;
padding-right: 20px;
}
#main .block th.col3 {
width: 180px;
padding-right: 20px;
}
#main .block th.col4 {
width: 300px;
padding-right: 20px;
}
#main .block th.col5 { width: 433px; }
#main .block th.col6 {
width: 360px;
padding-right: 20px;
}
#main .block th.col7 { width: 192px; }
#main .block th.col8 { width: 82px; }
#main .block th.col9 { width: 157px; }
#main .block th.col10 { width: 252px; }
#main .block th.col11 { width: 212px; }
#main .block th.col12 { width: 670px; }
#main .block th.col13 { width: 145px; }
#main .block th.col14 {
width: 96px;
padding-right: 20px;
}
#main .block th.col15 {
width: 240px;
padding-right: 20px;
}
#main #cms_listings.block th.col3{ width: 314px; }
#main #cms_listings.block th.col4{ width: 458px; }
#main #cites_suspensions.block th.col4{ width: 115px; }
#main #cites_suspensions.block th.col5{ width: 418px; }
#main #cms_instruments.block th.col2{ width: 120px; }
#main #cms_instruments.block th.col3{ width: 418px; }
#main .block a { color: #666; }
#main .block a:hover { color: #7CA8C6; }
#main .block td {
border-top: 1px solid #DFE1E2;
padding: 12px 0;
font-size: 14px;
line-height: 20px;
}
#main .block.add { margin: 0 -px -1px; }
#main .block.add td { padding: 20px 20px 20px 0; }
#main .block.add td.last {
padding-right: 0;
}
#main .block.block01 {
border: none;
padding: 38px 1px 34px;
}
#main .block.block01 td { vertical-align: top; }
#main .block tr.current td {
padding: 20px 20px 20px 0;
line-height: 20px;
font-size: 14px;
}
#main .block tr.current td.last {
padding-right: 0;
}
#main .block .historic.hidden {
display: none;
}
#main .block .historic thead{
line-height: 0;
}
#main .block tr.add td { padding: 16px 0 12px; }
#main .block tr { background: #eef2f7; }
#main .block tr.current {
background: #f5f5f7;
}
#main .block thead tr { background: #f5f5f7; }
#main .block.show_more .btn-hloder {
margin: 0;
text-align: center;
display: block;
}
.inner-table-container.show_more .btn-hloder {
margin: -10px 0 -2px 0;
}
.show_more .btn-hloder {
margin: 0;
text-align: center;
display: block;
}
.inner-table-container.show_more .btn-hloder {
margin: -10px 0 -2px 0;
}
.show_more:hover .btn-hloder {
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.block .btn-hloder:after {
display: block;
clear: both;
content: "";
}
.block .btn-hloder .link {
cursor: pointer;
text-decoration: none;
display: inline-block;
min-width: 71px;
font-size: 10px;
position: relative;
font-weight: bold;
text-transform: uppercase;
color: #ccc;
padding: 1px 20px 0 10px;
background: #F4F5F6;
border: 1px solid #D6D7D7;
line-height: 20px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 0 -10px;
margin-top: 20px;
vertical-align: top;
}
.block .btn-hloder .link.languages {
padding-right: 23px;
}
.show_more .btn-hloder .link:hover, .show_more:hover .btn-hloder .link,
#main .show_more .btn-hloder .link:hover, #main .show_more:hover .btn-hloder .link {
color: #fff;
background: #376382;
border: 1px solid #376382;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.block .btn-hloder .link:before {
width: 6px;
height: 4px;
position: absolute;
content: "";
z-index: 1;
right: 8px;
top: 9px;
background: image-url('species/arrow01_grey.png') no-repeat;
}
.block .btn-hloder .link.languages:before {
margin-top: -2px;
right: 10px;
background: image-url('species/arrow01_grey.png') no-repeat;
}
.block .btn-hloder .link:hover:before {
background: image-url('species/arrow01.png') no-repeat;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.block .btn-hloder .link.active {
color: #fff;
background: #376382;
border: 1px solid #376382;
}
.block .btn-hloder .link.active:before {
top: 8px;
width: 6px;
height: 6px;
background: image-url('species/ico.png') no-repeat;
}
.block .btn-hloder .link.languages.active:before {
top: 8px;
width: 6px;
height: 6px;
background: image-url('species/ico.png') no-repeat;
}
#main .block h2 {
font-size: 30px;
color: #2c3237;
margin: 0 0 27px;
line-height: 40px;
padding: 0;
}
#main .block h2.cites-title {
margin-top: 20px;
}
#main .block.block02 {
padding: 30px 60px 0 60px;
margin: 0 -1px 46px;
font-size: 14px;
line-height: 20px;
}
#main .block.block02 td:first-child {
border-bottom: none;
}
#main .block.block02 tr { background: #f5f5f7; }
#main .block.block02 .title {
padding: 0;
margin: 0 0 11px;
}
#main .block.block02 .first td { padding: 27px 0 12px; }
#main .block.block02 td {
padding: 30px 0;
}
#main .block02 .btn-hloder {
padding: 14px 29px 0;
background: #f5f5f7;
}
#main .block02 .btn-hloder .link:before {
right: 7px;
top: 10px;
background: image-url('species/arrow01.png') no-repeat;
}
#main .block02 .btn-hloder .link { padding: 0 16px 0 9px; }
#main .block04 {
padding: 0 60px 30px 60px;
text-align: left;
margin: 0 0 46px;
}
#main .block04.block05 {
background: none;
margin: 0 0 51px;
}
#main .block04 .title {
color: $color-navy-dark;
display: block;
font-size: 15px;
margin: 0 0 8px;
font-weight: bold;
text-transform: uppercase;
}
.columns-holder { overflow: hidden; }
.columns-holder .col {
float: left;
width: 370px;
margin: 0 0 0 46px;
}
.columns-holder .col li {
font-size: 14px;
line-height: 20px;
padding: 14px 0 15px;
color: #666;
border-top: 1px solid #dfe1e2;
}
.columns-holder .col li:first-child { border: none; }
.columns-holder .col:first-child {
margin: 0;
width: 402px;
}
#main .block04.block05 .columns-holder .col li { padding: 11px 0 12px; }
#main .block04.block05 .title { margin: 0 0 13px; }
#tab1 { display: block; }
#tab2 { display: block; }
#tab3 { display: block; }
#main .tabset > li.active.add > ul > li { line-height: 10px; }
.block06 {
/*padding: 0 10px 24px 29px;*/
padding: 30px 60px 30px 60px;
text-align: left;
margin: 0 0 18px;
}
#main .block06 .title {
color: $color-navy-dark;
display: block;
font-size: 15px;
font-weight: bold;
margin: 0 0 12px;
text-transform: uppercase;
}
#main .block06 .three-columns { padding: 0; }
#main .block06 .three-columns .col {
float: left;
width: 212px;
margin: 0 0 0 80px;
border: none;
padding: 0;
}
#main .block06 .three-columns .col li {
font-size: 14px;
line-height: 20px;
padding: 10px 0 13px;
color: #666;
border-top: 1px solid #dfe1e2;
}
#main .block06 .three-columns .col li a {
color: #253848;
text-decoration: none;
float: left;
}
#main .block06 .three-columns .col li a:hover { font-weight: bold; }
#main .block06 .three-columns .col.last-child { margin: 0 0 0 94px; }
#main .block06 .three-columns .col li:first-child { border: none; }
#main .block06 .three-columns .col:first-child {
margin: 0;
}
#main .block06 .three-columns .col li:after {
display: block;
content: "";
clear: both;
}
.distribution-with-tags {
text-align:right;
}
.distribution {
float:left;
text-align: left;
}
#main .block06 .three-columns .col li .tage {
float: right;
padding: 0 5px;
margin: 3px 0 0 5px;
line-height: 15px;
background: #d2dae3;
font-size: 11px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#main .block06 .three-columns .col li .popup a {
padding: 0;
float: none;
color: #253848;
display: inline-block;
vertical-align: top;
background: image-url('species/sep01.png') repeat-x 0 100%;
}
#main .block06 .three-columns .col li .link-holder:hover .popup a { font-weight: normal; }
.skip {
position: absolute;
left: -9999px;
top: -9999px;
}
#main .block02 .btn-hloder .link.hide { display: none; }
.col.more-add label {
font-size: 15px;
margin: 0 -20px 0 0;
}
.spinner {
visibility: hidden;
position: absolute;
background-color: #fff;
opacity: 0.5;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 999;
position: fixed;
}
.spinner img {
position: fixed;
top: 50%;
left: 50%;
margin: 0 auto;
}
div#banner {
background: #376382;
width: 820px;
opacity: 0.8;
padding: 10px 20px;
}
div#banner p {
color: #fff;
opacity: 1;
text-align: left;
margin: 0;
padding: 0;
display: inline-block;
width: 780px;
}
div#banner p strong {
font-weight: 600;
font-size: 16px;
letter-spacing: 0.0075em;
}
div#banner button#remove {
float: right;
padding: 0;
border: none;
background: none;
outline: none;
}
.tooltip[data-descr] {
position: relative;
cursor: help;
width: 10px;
}
.tooltip[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
float: left;
text-transform: none;
font-weight: normal;
color: #666;
padding: 5px 15px 15px 15px;
background: #f5f5f7;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid #8fb7cf;
width: 260px;
z-index: 1000;
left: 0;
top: 24px;
}
div.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border: 1px solid #fbeed5;
border-radius: 4px;
}
div.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
}
div.alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
}
div.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: 20px;
float: right;
font-size: 20px;
font-weight: bold;
color: black;
text-shadow: 0 1px 0 white;
text-decoration: none;
opacity: 0.2;
}
.m-0 {
margin: 0 !important;
}
.mt-0,
.my-0 {
margin-top: 0 !important;
}
.mr-0,
.mx-0 {
margin-right: 0 !important;
}
.mb-0,
.my-0 {
margin-bottom: 0 !important;
}
.ml-0,
.mx-0 {
margin-left: 0 !important;
}
.m-1 {
margin: 0.25rem !important;
}
.mt-1,
.my-1 {
margin-top: 0.25rem !important;
}
.mr-1,
.mx-1 {
margin-right: 0.25rem !important;
}
.mb-1,
.my-1 {
margin-bottom: 0.25rem !important;
}
.ml-1,
.mx-1 {
margin-left: 0.25rem !important;
}
.m-2 {
margin: 0.5rem !important;
}
.mt-2,
.my-2 {
margin-top: 0.5rem !important;
}
.mr-2,
.mx-2 {
margin-right: 0.5rem !important;
}
.mb-2,
.my-2 {
margin-bottom: 0.5rem !important;
}
.ml-2,
.mx-2 {
margin-left: 0.5rem !important;
}
.m-3 {
margin: 1rem !important;
}
.mt-3,
.my-3 {
margin-top: 1rem !important;
}
.mr-3,
.mx-3 {
margin-right: 1rem !important;
}
.mb-3,
.my-3 {
margin-bottom: 1rem !important;
}
.ml-3,
.mx-3 {
margin-left: 1rem !important;
}
.m-4 {
margin: 1.5rem !important;
}
.mt-4,
.my-4 {
margin-top: 1.5rem !important;
}
.mr-4,
.mx-4 {
margin-right: 1.5rem !important;
}
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important;
}
.ml-4,
.mx-4 {
margin-left: 1.5rem !important;
}
.m-5 {
margin: 3rem !important;
}
.mt-5,
.my-5 {
margin-top: 3rem !important;
}
.mr-5,
.mx-5 {
margin-right: 3rem !important;
}
.mb-5,
.my-5 {
margin-bottom: 3rem !important;
}
.ml-5,
.mx-5 {
margin-left: 3rem !important;
}
.p-0 {
padding: 0 !important;
}
.pt-0,
.py-0 {
padding-top: 0 !important;
}
.pr-0,
.px-0 {
padding-right: 0 !important;
}
.pb-0,
.py-0 {
padding-bottom: 0 !important;
}
.pl-0,
.px-0 {
padding-left: 0 !important;
}
.p-1 {
padding: 0.25rem !important;
}
.pt-1,
.py-1 {
padding-top: 0.25rem !important;
}
.pr-1,
.px-1 {
padding-right: 0.25rem !important;
}
.pb-1,
.py-1 {
padding-bottom: 0.25rem !important;
}
.pl-1,
.px-1 {
padding-left: 0.25rem !important;
}
.p-2 {
padding: 0.5rem !important;
}
.pt-2,
.py-2 {
padding-top: 0.5rem !important;
}
.pr-2,
.px-2 {
padding-right: 0.5rem !important;
}
.pb-2,
.py-2 {
padding-bottom: 0.5rem !important;
}
.pl-2,
.px-2 {
padding-left: 0.5rem !important;
}
.p-3 {
padding: 1rem !important;
}
.pt-3,
.py-3 {
padding-top: 1rem !important;
}
.pr-3,
.px-3 {
padding-right: 1rem !important;
}
.pb-3,
.py-3 {
padding-bottom: 1rem !important;
}
.pl-3,
.px-3 {
padding-left: 1rem !important;
}
.p-4 {
padding: 1.5rem !important;
}
.pt-4,
.py-4 {
padding-top: 1.5rem !important;
}
.pr-4,
.px-4 {
padding-right: 1.5rem !important;
}
.pb-4,
.py-4 {
padding-bottom: 1.5rem !important;
}
.pl-4,
.px-4 {
padding-left: 1.5rem !important;
}
.p-5 {
padding: 3rem !important;
}
.pt-5,
.py-5 {
padding-top: 3rem !important;
}
.pr-5,
.px-5 {
padding-right: 3rem !important;
}
.pb-5,
.py-5 {
padding-bottom: 3rem !important;
}
.pl-5,
.px-5 {
padding-left: 3rem !important;
}
.bs-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.bs-container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.bs-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.bs-col-1, .bs-col-2, .bs-col-3, .bs-col-4, .bs-col-5, .bs-col-6, .bs-col-7, .bs-col-8, .bs-col-9, .bs-col-10, .bs-col-11, .bs-col-12, .bs-col, .bs-col-sm-1, .bs-col-sm-2, .bs-col-sm-3, .bs-col-sm-4, .bs-col-sm-5, .bs-col-sm-6, .bs-col-sm-7, .bs-col-sm-8, .bs-col-sm-9, .bs-col-sm-10, .bs-col-sm-11, .bs-col-sm-12, .bs-col-sm, .bs-col-md-1, .bs-col-md-2, .bs-col-md-3, .bs-col-md-4, .bs-col-md-5, .bs-col-md-6, .bs-col-md-7, .bs-col-md-8, .bs-col-md-9, .bs-col-md-10, .bs-col-md-11, .bs-col-md-12, .bs-col-md, .bs-col-lg-1, .bs-col-lg-2, .bs-col-lg-3, .bs-col-lg-4, .bs-col-lg-5, .bs-col-lg-6, .bs-col-lg-7, .bs-col-lg-8, .bs-col-lg-9, .bs-col-lg-10, .bs-col-lg-11, .bs-col-lg-12, .bs-col-lg, .bs-col-xl-1, .bs-col-xl-2, .bs-col-xl-3, .bs-col-xl-4, .bs-col-xl-5, .bs-col-xl-6, .bs-col-xl-7, .bs-col-xl-8, .bs-col-xl-9, .bs-col-xl-10, .bs-col-xl-11, .bs-col-xl-12, .bs-col-xl {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.bs-col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
max-width: 100%;
}
.bs-col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.bs-col-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.bs-col-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.bs-col-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.bs-col-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.bs-col-5 {
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.bs-col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.bs-col-7 {
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.bs-col-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.bs-col-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.bs-col-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.bs-col-11 {
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.bs-col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.bs-border {
border: 1px solid #dee2e6 !important;
}
.bs-border-top {
border-top: 1px solid #dee2e6 !important;
}
.bs-border-right {
border-right: 1px solid #dee2e6 !important;
}
.bs-border-bottom {
border-bottom: 1px solid #dee2e6 !important;
}
.bs-border-left {
border-left: 1px solid #dee2e6 !important;
}
.bs-border-0 {
border: 0 !important;
}
.bs-border-top-0 {
border-top: 0 !important;
}
.bs-border-right-0 {
border-right: 0 !important;
}
.bs-border-bottom-0 {
border-bottom: 0 !important;
}
.bs-border-left-0 {
border-left: 0 !important;
}
.bs-border-primary {
border-color: #007bff !important;
}
.bs-border-secondary {
border-color: #6c757d !important;
}
.bs-border-success {
border-color: #28a745 !important;
}
.bs-border-info {
border-color: #17a2b8 !important;
}
.bs-border-warning {
border-color: #ffc107 !important;
}
.bs-border-danger {
border-color: #dc3545 !important;
}
.bs-border-light {
border-color: #f8f9fa !important;
}
.bs-border-dark {
border-color: #343a40 !important;
}
.bs-border-white {
border-color: #fff !important;
}