etc
- Not an general enclosing HTML element such as ,, etc
- Not a form
Is one or all of the following:
- The design for an interactive element e.g a button, slider etc
- The graphical styling of a text based element e.g a page notice, quote, aside etc
- The design for an interstitial
Is always used across multiple domains.
*/
/* COLOUR PALLETE */
.black {
color:#000000;
}
.white {
color:#ffffff;
}
.light-tone {
color:#7C7C7C;
}
.mid-tone {
color:#525252;
}
.highlight-tone {
color:#E951B8;
}
.primary-tone {
color:#F71F50;
fill:#F71F50;
}
.important-tone {
color: #cf0254 !important;
}
.confirm-tone {
color: #00b41e !important;
}
a:hover {
color:#000000;
}
a:hover.highlight-tone {
color: #000000;
}
/* NOTICE */
.notice {
border-width: 1px;
border-color: #ab69a9;
border-style: dotted;
line-height: 22px;
vertical-align: middle;
font-weight: bold;
color: #251A31;
background-color: #F3F3F3;
float: left;
height: 22px;
margin-left: 4px;
padding-left: 5px;
padding-right: 5px;
box-sizing: border-box;
}
.notice_container {
clear: both;
margin-top: 6px;
margin-bottom: 10px;
height: 22px;
}
.notice_container img {
float: left;
}
@media (max-width: 604px) {
.notice_container img{
width: 6%;
}
.notice{
margin-left: 1%;
width: 93%;
}
}
/* ACCESS POINT */
.access_point{
font-size:15px;
line-height:24px;
margin:16px 4px 16px 0px;
padding:12px;
border:double 4px #C4C4C4;
border-radius: 4px;
background-image: linear-gradient(bottom, #F8F8F8 100%, #FFFFFF 0%);
}
.access_point a{
background-image:url(http://www.inzu.net/lib/images/buttons/link_bkg_02.png);
background-repeat:no-repeat;
background-position:right;
padding-right:11px;
text-decoration:none;
height:14px;
display:inline-block;
line-height:12px;
margin-top:4px;
}
.access_point a:hover{
color:#646464;
}
.access_point p{
margin-top:0px;
margin-bottom:8px;
}
/* FEEDBACK */
.feedback_accepted{
margin-top:5px;
margin-bottom:5px;
height:22px;
font-size:12px;
}
.feedback_accepted img{
vertical-align:middle;
margin-top:-4px;
}
/* COPY THIS */
.copyThisHd {
margin-top:12px;
font-size:16px;
color:#171717;
}
.copyThis {
border-width:1px;
border-color:#ab69a9;
border-style:dotted;
line-height:22px;
vertical-align:middle;
font-weight:bold;
font-size: 11px;
color: #251A31;
background-color: #FDFCED;
margin: 8px;
padding: 8px;
box-sizing: border-box;
width: calc(100% - 8px);
}
.copyThis.center {
text-align: center;
}
.copyThis.large {
font-size: 14px;
}
/* SMALL PRINT */
.small_print{
color: #8e8e8e;
font-size: 10px;
}
/* HELP */
.help_button {
width: 31px;
height: auto;
margin-left: 6px;
margin-bottom: 1px;
vertical-align: bottom;
}
.help_context {
position: absolute;
z-index: 999999;
max-width: 50%;
background-color: #FFFFFF;
display: inline-block;
padding: 8px;
border-radius: 3px;
border-width: 1px;
border-color: #ab69a9;
border-style: solid;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
color:#666666;
}
@media (max-width: 940px) {
.help_context {
max-width: 60%;
}
}
/* PAGE DIVIDER */
.page_divider{
height: 4px;
background-image: url(/img/layout/page_divider_01.svg);
background-size: 4px 2px;
background-repeat: repeat-x;
margin: 12px 0;
}
/* PAGE NAV */
.page_select{
margin-top: 16px;
margin-bottom: 16px;
}
.page_select a {
text-decoration: none;
color: #FFFFFF;
}
.page_select span {
background-color: #B5B5B5;
padding: 2px 4px 2px 4px;
box-sizing: border-box;
margin-bottom: 4px;
border-radius: 3px;
display: inline-block;
}
.page_select a:hover span {
background-color: #8E3175;
}
.page_select .selected {
background-color: #8E3175;
}
/* CODE */
.code {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
border: 1px solid #e1dfdb;
background-color: #fcfce4;
padding: 5px 8px;
border-style: dashed;
border-color: #A6A6A6;
margin: 2px;
word-wrap: break-word;
}
/* PAYMENT LOGOS */
.payment_logos img{
height: 19px;
width: auto;
margin-right: 2px;
}
/* LINKS & BUTTONS */
.do {
cursor: pointer;
}
.do.text,.do.text-brand {
line-height: 22px;
font-size: 12px;
display: inline-block;
text-decoration: none;
}
.do.text-brand {
line-height: 21px;
font-size: 13px;
font-family: FreewayLight, Verdana, Arial, Helvetica, sans-serif;
}
.do.x-large {
font-size:15px;
line-height: 23px;
}
.do.pointer{
padding-right: 18px;
height: 13px;
line-height: 13px;
background: url(https://common.inzu.net/img/actions/btn_arrow.svg);
background-repeat: no-repeat;
background-position:right bottom;
display: inline-block;
white-space: nowrap;
}
.do.pointer.inline{
margin-top: 0px;
}
.do.pointer:hover {
background-position: right top;
text-decoration: none;
}
.Button_A0{
display: flex;
justify-content: center;
align-items: center;
margin-top:16px;
padding-bottom: 2px;
width:114px;
height:32px;
cursor: pointer;
border-radius: 7px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
color:#FFFFFF;
text-decoration: none;
background: #4e8ded;
background: linear-gradient(to bottom, #4e8ded 0%,#1d6de8 100%);
box-shadow: 1px 1px 2px 0px rgba(171, 171, 171, 1);
}
.Button_A0:hover{
color:#FFFFFF;
text-decoration: none;
background: #4e8ded;
background: linear-gradient(#5d9be8, #1c65d6);
}
.Button_A0 a, .Button_A0 a:hover{
color: #FFF;
text-decoration: none;
}
.blockButton {
font-family: sans-serif;
color: #f9fcff;
padding: 11px;
font-size: 13px;
background-color: #f88d44;
display: inline-block;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.30s ease-in-out;
}
.blockButton:hover {
color: #f9fcff;
background-color: #f87f3b;
}
/* TABLES */
table.entry_list {
width: 100%;
margin-top: 12px;
border-collapse: collapse;
}
table.entry_list thead tr {
color: #363636;
background-color: #f3f3f3;
background: linear-gradient(to bottom, #f7f7f7 0%, #f3f3f3 100%);
border-bottom: 1px solid #d1d1d1;
}
table.entry_list thead th:first-child {
border-top-left-radius: 3px;
}
table.entry_list thead th:last-child {
border-top-right-radius: 3px;
}
table.entry_list th, table.entry_list td {
padding: 6px 6px 6px 6px;
vertical-align: middle;
height: 16px;
}
table.entry_list tbody tr:nth-child(even) td {
background-color: #f9f9f9;
}
table.entry_list tbody tr:hover td {
background-color: #f1f1f1;
cursor: pointer;
}
table.entry_list tfoot tr:first-child td {
padding-top: 8px;
}
table.entry_list .action:hover svg *, table.entry_list .action .Activate svg * {
fill: #ca69d4;
}
/* FEEDBACK */
#user-feedback {
position: fixed;
top: 12px;
right: 20px;
padding-top: 4px;
border-radius: 6px;
padding: 8px 10px 8px 10px;
display: table-cell;
vertical-align: middle;
text-align:right;
opacity: 0;
}
#user-feedback span {
text-align: center;
}
#user-feedback a span {
color: #fff;
}
/* WINDOW */
#inzu-shell-tag {
display: none;
position: fixed;
bottom: 0px;
right: 0;
height: 26px;
width: 100%;
text-align: center;
border-left: solid 2px;
background-image: url(https://common.inzu.net/img/branding/inzu_shell_tag_mob_bkg.gif);
transition: bottom 1s;
}
#inzu-shell-tag .inzu {
display: inline-block;
height: 26px;
margin: 0 auto;
padding-left: 18px;
font-family: 'FreewayLight';
font-size: 14px;
line-height: 28px;
background-image: url(https://common.inzu.net/img/branding/inzu_shell_tag_mob.gif);
background-repeat: no-repeat;
}
/* Modal */
#modal {
position: fixed;
z-index: 1000000;
height: 100%;
width: 100%;
display: none;
}
#modal .bkg {
height: 100%;
background-color: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
transition: background 1.3s ease-out;
}
#modal .inner {
position: relative;
display: flex;
align-items: center;
width: 35%;
margin: 0 auto;
background-color: #fff;
padding: 17px;
border-radius: 4px;
}
#modal iframe {
width: 100%;
transition: height 0.4s ease-in-out;
border: none;
}
@media (max-width: 940px) {
#modal .inner {
width: 85%;
}
}