/* IWOA stylesheet*/

/* null margins and padding to give a cross-browser baseline */
/*font: inherit;*/
body,div,p,
form,fieldset,label,
h1,h2,h3,h4,h5,h6,
ul,ol,li,
table,th,tr,td,
img {
margin:0;
padding:0;
font-size:100%;
}
body {
	line-height:1.5;
}
img,fieldset {
border:none;
}

/*  font-family:"Trebuchet MS", "Lucida Sans", sans-serif;*/
/*  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;*/
body {
  font-family:"Trebuchet MS", "Lucida Sans", Arial, sans-serif;
}

h1{
  font-size:1.75em;
}
h2{
  font-size:1.25em;
  padding-bottom:1%;
}
h3 {
  color:#009688;
}
h5 {
  padding-bottom:1%;
}
p {
  font-size:1.00em;
}

a {
  color:#0097A7;
  text-decoration:none;
}
a:visited {color:#212121;}
a:hover {color:#0097A7;}

fieldset {
  width:780px;
  padding:0.5% 0.75% 0.5% 0.75%;
  border-style:solid;
  border-color:#B6B6B6;
  border-width:1px 1px 1px 1px;
  clear:left;
}
label {
  position:absolute;
  margin-top:0.75em;
  font-size:.75em;
  font-weight:bold;
}
input {
  margin:0.25em 0em 0.25em 10em;
  height:1.4em;
}
input[type="submit"] {
  height:2.5em;
}
input[type="checkbox"] {
  margin-top:.5em;
}

select {
  margin:0.25em 0em 0.25em 10em;
  height:1.8em;
}

button {
  padding:.8%;
  font-size:1.25em;
}

input.form-numeric {
  width:7.5em;
}
input.form-text-15 {
  width:14em;
}
input.form-text-30 {
  width:25.5em;
}
input.form-text-40 {
  width:25.5em;
}
input.form-password {
  width:25.5em;
}


/* Responsive Stylesheet */
.grid-container {
  width:100%;
}
.grid-wrapper {
  overflow:hidden;
}
.grid-box {
  margin-right:2%;
  float:left;
}
.grid-header {
  width:100%;
}
.grid-footer {
  width:100%;
}
.grid-col10 {
  width:80%;
}
.grid-col20 {
  width:16%;
  margin-right:0;
}
.grid-row10-col10 {
  padding:2%;
}
.grid-row10-col20 {
  margin:2% 0% 2% 0%;
}
.grid-row10-col20 #advert {
  background:url("/images/actual/advert_background_vrt.jpg");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:100% 100%;
  width:100%;
  height:33em;
}
.grid-row10-col20 #advert img{
  padding:0.15em;
}

/****** *****/
.grid3-row20 {
  float:left;
  width:100%;
  padding-bottom:1.5%;
  margin-top:3em;
}
.grid3-row20 a {
  text-decoration:none;
}
.grid3-row20 a:link {color:#212121;}
.grid3-row20 a:visited {color:#212121;}
.grid3-row20 a:hover {color:#00BCD4;}

.grid3-row20 #text-line1 {
  float:left;
  width:100%;
  font-weight:bold;
  font-size:2em;
  color:#009688;
  text-align:center;
}
.grid3-row20 #text-line2 {
  float:left;
  width:100%;
  font-size:1.2em;
  color:#212121;
  text-align:center;
}
.grid3-row20-col10 {
  width:12%;
  float:left;
  margin:1em 0em 0em 15em;
  padding:1% 1% 1% 1%;
}
.grid3-row20-col10 img {
  border-width:8px;
  border-style:solid;
  border-color:transparent;
  padding:3%;
}
.grid3-row20-col10 img:hover {
  border-color:#B2EBF2;
}
.grid3-row20-col20 {
  width:12%;
  float:left;
  margin:1em 0em 0em 4.25em;
  padding:1% 1% 1% 1%;
}
.grid3-row20-col20 img {
  border-width:8px;
  border-style:solid;
  border-color:transparent;
  padding:3%;
}
.grid3-row20-col20 img:hover {
  border-color:#B2EBF2;
}
.grid3-row20-col30 {
  width:12%;
  float:left;
  margin:1em 0em 0em 4.25em;
  padding:1% 1% 1% 1%;
}
.grid3-row20-col30 img {
  border-width:8px;
  border-style:solid;
  border-color:transparent;
  padding:3%;
}
.grid3-row20-col30 img:hover {
  border-color:#B2EBF2;
}

.grid3-row30-col10 {
  float:left;
  height:10em;
  width:43%;
  margin:1% 1% 1% 6%;
}
.grid3-row30-col20 {
  float: left;
  width: 43%;
  padding: 1%;
}
.grid3-row40-col10 {
  width:90%;
  float: left;
  padding: 4%;
}
.grid3-row40-col10 p {
  font-size:1em;
  padding:0;
}
/****** *****/



.header {
  float:left;
  width:100%;
  background-color:#00BCD4;
  border-width:2px 0px 2px 0px;
  border-style:solid;
  border-color:#0097A7;
}
.header-center {
  float:left;
  width:56%;
  padding:0.5% 1% 0.5% 1%;
  text-align:center;
}
.header-center #title1 {
  font-size:2em;
  font-weight:bold;
  color:#FFFFF0;
}

.header-left {
  float:left;
  width:15%;
  padding:.5em 1.5em .5em 1.5em;
}
.header-left img {
  float:left;
  width:45px;
}
.header-right {
  float:left;
}
.header-right #title {
  padding:1%;
  font-size:1.5em;
  font-weight:bold;
  color:#212121;
  margin-top:.25em;
  margin-left:1.25em;
  text-align:left;
}

#page-title {
  font-weight:bold;
  margin:0px 0px 15px 0px;
  padding:0px;
  line-height:1em;
  color:#212121;
}

.footer {
  padding:0.75%;
  background-color:#00BCD4;
  border-width:1px 0px 1px 0px;
  border-style:solid;
  border-color:#0097A7;
  text-align:center;
  font-size:0.7em;
  color:#212121;
}
.footer a {
  color:#212121;
  text-decoration:none;
  font-size:1.1em;
}
.footer a:hover {color:#FFFFF0;}

.menu-option-navigate {
  float:left;
  clear:left;
  margin:0em 0em 0.75em 0em;
  padding:0px;
  font-size:1.1em;
  line-height:1em;
  color:#B6B6B6;
}
.menu-option-navigate a {
  font-size:1.1em;
  color:#B6B6B6;
}
.menu-option-navigate a:link {color:#212121;}
.menu-option-navigate a:hover {color:#009688;}

.menu-option-path {
  float:left;
  padding-top:0.5em;
  margin-left:0.25em;
}
.menu-option-event {
  float:left;
  margin-top:.3em;
  margin-left:.5em;
}
.menu-option-description {
  float:left;
  clear:left;
  font-size:1.25em;
  font-weight:bold;
  color:#009688;
  margin-bottom:0.25em;
}
.menu-option-elements {
  float:left;
  clear:left;
  width:100%;
  margin:0em 0em 0.25em 0em;
}
.menu-option-element-1 {
  float:left;
  width:24.5%;
}
.menu-option-element-2 {
  float:left;
  width:37%;
}
.menu-option-element-text {
  float:left;
  font-size:.95em;
  font-weight:bold;
  margin:0em .1em 0em 0em;
  padding:.45em .5em .45em .5em;
  border-radius:.25em;
  width:6.5em;
  background-color:#00BCD4;
  color:#212121;
}
.menu-option-element-data {
  float:left;
  font-size:.95em;
  text-align:right;
  margin:0em 0.1em 0em 0em;
  padding:.45em .5em .45em .5em;
  border-radius:.25em;
  width:7em;
  background-color:rgba(0, 150, 136, 0.5);
  color:#FFFFF0;
}

.page-navigate {
  float:left;
  width:100%;
  height:1.4em;
  text-align:center;
  font-size:1em;
  color:#212121;
  padding:0% 0% 4% 0%;
  margin-top:1.1em;
}
.page-options{
    display:inline-block;
}
.page-left {
  float:left;
  text-align:right;
  padding-top:.1em;
}
.page-select {
  float:left;
  font-size:1.1em;
  padding:0em 0.25em 0em 0.25em;
}
.page-right {
  float:left;
  text-align:left;
  padding-top:.1em;
}
.page-select a {
  font-size:1em;
}
.page-select a:hover {
  color:#212121;
  font-size:1em;
}

/*** position column on page ***/
/*  margin-left: auto; */
/*  margin-right: auto; */
/*  float: left; */
/*  background-color:#00BCD4; */
.tableContainer {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0em;
  margin-bottom: 0px;
  font-size: .75em;
  padding: .25em;
  border-radius: .25em;
  clear: left;
}
.tableContainer1020 {
  max-width:1020px;
}
.tableContainer940 {
  max-width:940px;
}
.tableContainer905 {
  max-width:905px;
}
.tableContainer890 {
  max-width:890px;
}
.tableContainer850 {
  max-width:850px;
}
.tableContainer840 {
  max-width:840px;
}
.tableContainer770 {
  max-width:770px;
}
.tableContainer640 {
  max-width:640px;
}
.tableContainer620 {
  max-width:620px;
}
.tableContainer580 {
  max-width:580px;
}
.tableContainer510 {
  max-width:510px;
}
.tableContainer395 {
  max-width:395px;
}

table {
  table-layout:fixed;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  color:#212121;
}
table thead tr {
  font-size: 1em;
}

/*** table header section: row style ***/
table thead tr td {
  background-color:#FFFFF0;
  vertical-align: middle;
  padding: 0.25em;
  font-size: 1.4em;
  word-wrap: break-word;
}

/*** table header section: column style ***/
table thead tr th {
  padding: 0.5em;
  background-color:#00BCD4;
  color:#212121;
  text-align: left;
  font-weight: bold;
}

/*** table header section: column style - specifics ***/
.col-head-wallet-description {
  width:25%;
}
.col-head-diary-description {
  width:25%;
}
.col-head-product-description {
  width:25%;
}
.col-head-product-number{
  width:5%;
}
.col-head-product-name{
  width:15%;
}
.col-head-value{
  width:10%;
  text-align:right;
}
.col-head-text{
  width:7%;
  text-align:left;
}
.col-head-date{
  width:8%;
}
.col-head-event{
  width:6.5%;
}
.col-head-action{
  width:14%;
}
.col-head-element{
  width:40%;
}
.col-head-content{
  width:60%;
}
.col-head-investment-description {
  width:7%;
}


.data-display {
  margin:0 auto;
  font-size:0.8em;
  border-width:.25em;
  border-radius:.25em;
  border-style:solid;
  border-color:#00BCD4;
  clear:left;
}
.view-product {
  max-width:580px;
}
.view-wallet {
  max-width:390px;
}
.view-diary-event-detail {
  max-width:580px;
}
.view-product-price-detail {
  max-width:460px;
}
.view-actioned-event-detail {
  max-width:580px;
}
.data-display .data-record {
  border-bottom:1px solid #B6B6B6;
}
.view-position-event-detail {
  max-width:580px;
}
.move-user-product {
  max-width:320px;
}
.view-user {
  max-width:600px;
}
.data-display.move-user-product #data-element {
  width:15em;
}
.data-display.move-user-product #data-content {
  width:7em;
  margin-left:65%;
  text-align:center;
}
.data-display #data-element {
  clear:left;
  float:left;
  text-align:left;
  font-weight:bold;
  width:10em;
  padding:0.75%;
  color:#212121;
}
.data-display #data-content {
  text-align:left;
  word-wrap:break-word;
  width:30em;
  padding:0.75% 2%;
  color:#212121;
  margin-left:25%;
  border-left:1px solid #B6B6B6;
}
.data-display.view-wallet #data-content {
  width:15em;
  margin-left:35%;
}
.data-display.user-view #data-element {
  width:14em;
}
.data-display.user-view #data-content {
  margin-left:32%;
}

/* users_register.php */
.form-register {
  position:relative;
  width:450px;
}
.form-register input {
  margin-left:11em;
}
.form-register select {
  margin-left:11em;
}
.form-register p.text {
  font-size:0.75em;
  margin-left:12.25em;
}
#dob{
  margin-left:1em;
}

/* user forms */
.form-user {
  width:510px;
}
.form-user input {
  margin-top:.4em;
  margin-left:12em;
  line-height:1.4em;
}
.form-user select {
  margin-left:12em;
}

/* users_delete.php */
.action-user {
  width:310px;
  margin:2% auto;
  text-align:center;
}
.action-user.display-data {
  font-size:1.1em;
}
.action-user .prompt {
  padding:3% 0%;
}
.action-user select {
  margin-left:2em;
}
.action-user input {
  margin:0.25em 0em 0.25em 9em;
}
.action-user label {
  margin-top:0em;
  font-size:1em;
  width:21em;
  position:relative;
}



.data-display.view-user #data-element {
  width:14em;
}
.data-display.view-user #data-content {
  width:30em;
  margin-left:32%;
}

/*** table body section: odd row style ***/
.data-display .data-record:nth-child(odd) {
  background-color:#FFFFF0;
}
/*** table body section: even row style ***/
.data-display .data-record:nth-child(even) {
  background-color:#B2EBF2;
}
.data-display .data-record:first-child{
  border-radius:.25em .25em 0 0;
}
.data-display .data-record:last-child{
  border-bottom:none;
  border-radius:0 0 .25em .25em;
}
.data-display a {
  color:#212121;
  text-decoration:none;
  font-size:1em;
}
.data-display a:link {color:#212121;}
.data-display a:visited {color:#212121;}
.data-display a:hover {color:#00BCD4;}


/*** table header section: column style - right ***/
table thead tr th.col-head-right {
  text-align:right;
}

/*** table body section: odd row style ***/
table tbody tr:nth-child(odd) {
  background-color:#FFFFF0;
}

/*** table body section: odd row style - hover ***/
table tbody tr:nth-child(odd):hover {
  cursor:text;
  background-color:rgba(178, 235, 242, 0.5);
  color:#FFFFF0;
}

/*** table body section: even row style ***/
table tbody tr:nth-child(even) {
  background-color:#B2EBF2;
}

/*** table body section: even row style - hover ***/
table tbody tr:nth-child(even):hover {
  cursor:text;
  background-color:rgba(178, 235, 242, 0.5);
  color:#FFFFF0;
}

/*** table td element: all section ***/
table td {
  vertical-align:middle;
  padding:0.5em;
}

/*******************************************/
/*** table td element: label data column ***/
table tbody tr td.col-label {
  text-align:left;
  font-weight:bold;
}

/*** table td element: action column ***/
table tbody tr td.col-action {
  text-align:left;
  padding-left:0.5em;
}

/*** table td element: general data column ***/
table tbody tr td.col-data-element {
  text-align:left;
  font-weight:bold;
}
table tbody tr td.col-data-content {
  text-align:left;
  word-wrap:break-word;
}
table tbody tr td.col-data-wallet-description {
  text-align:left;
  word-wrap:break-word;
}
table tbody tr td.col-data-diary-description {
  text-align:left;
  word-wrap:break-word;
}
table tbody tr td.col-data-product-description {
  text-align:left;
  word-wrap:break-word;
}
table tbody tr td.col-data-product-name {
  text-align:left;
  word-wrap:break-word;
}
table tbody tr td.col-data-event {
  text-align:center;
}
table tbody tr td.col-data-event-description {
  text-align:left;
  word-wrap:break-word;
}
table tbody tr td.col-data-reference {
  text-align:left;
}
table tbody tr td.col-data-date {
  text-align:right;
}

/*** table td element: value data column ***/
table tbody tr td.col-data-value {
  text-align:right;
}
/*******************************************/


/*** table td element: value data column ***/
table tfoot tr td.col-data-value {
  text-align:right;
}
table tbody a {
  font-size:1em;
}
table tbody a:hover {color:#FFFFF0;}

/*** table footer section ***/
table tfoot {
  background-color:rgba(0, 150, 136, 0.5);
  vertical-align:middle;
  text-align:left;
  color:#FFFFF0;
  font-size:1em;
}

/*#menu a {
  text-decoration: none;
  color:#00BCD4;
  display: block;
  z-index:1; must have this entry in an appropriate section
}*/

#radio-confirm {
}
#radio-confirm input[type="radio"] {
  margin-left:-2%;
  margin-right:1%;
  height:1em;
}
#radio-confirm input+input[type="radio"] {
  margin-left:3%;
}
.form-input{
  font-size:1em;
}
.button {
  float:left;
  padding:2% 0% 2% 0%;
}

.confirm {
  color:#00BCD4;
  font-size:1em;
  padding:0px 0px 15px 0px;
  margin:2em 0em -1em 0em;
}
.error {
  color:#C20000;
  font-size:1em;
  padding:0px 0px 15px 0px;
  margin:2em 0em -1em 0em;
}

.page-message {
  float: left;
  clear: left;
  width: 100%;
  margin-bottom:1%;
  font-size:.9em;
}
.page-message #exception {
  color:#C20000;
  font-size:1.25em;
}
.page-message #error {
  color:#C20000;
  font-size:.9em;
}
.page-message #confirm {
  color:#00BCD4;
  font-size:1.25em;
}

.date-input #date-mth-yr {
  margin-left:0.1em;
}

/* PAGE SPECIFIC STYLES */
/* users_termsandconditions.php */
#termsandconditions a {
  color:#212121;
  font-size:15px;
  text-decoration:none;
  font-weight:600;
}
#termsandconditions a:link {color:#212121;}
#termsandconditions a:visited {color:#727272;}
#termsandconditions a:hover {color:#009688;}

/* users_signin.php */
.signin-para1 {
  font-size:1em;
  padding-bottom: 2%;
}
.signin-para1 h4 {
}
.signin-para1 p {
  font-size:.9em;
  line-height:1.25em;
}
.signin-para1 button {
  margin-top:2%;
}
.signin-para1 #headline {
  background:rgba(0, 150, 136, 0.25);
  color:#212121;
  width: 60%;
  font-size:1.1em;
  padding:10px;
  border-radius:5px;
  border-color:#0097A7;
  border-style:solid;
  border-width:2px;
  margin:1% 0% 1% 0%;
}

.signin-para1 #title {
  float:left;
  color:#009688;
  padding-right: 1%;
}

.signin-para1 #text {
  animation-name: stretch;
  animation-duration: 3.5s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

@keyframes stretch {
  0% {
    transform: scale(.98);
    color:rgba(0, 150, 136, 0.25);
  }
  100% {
    transform: scale(1);
  }
}

#signin {
  background:#B2EBF2;
  width:360px;
}
#signin input {
  margin-top:.5em;
  margin-left:6em;
}

/* users_password_reset.php */
#password-reset {
  width:330px;
  background:#0097A7;
  color:#FFFFF0;
}
#password-reset input {
  margin-top:.5em;
  margin-left:6em;
}

/* users_password_change.php */
#password-change {
  width:460px;
  background:#0097A7;
  color:#FFFFF0;
}
#password-change input {
  margin-left:12em;
}
#password-change p#text {
  margin-left:13.25em;
  font-size:0.75em;
}

/* message_us.php */
#message-us {
  background:#B2EBF2;
  width:700px;
}
#message-us p {
  margin-bottom: 1em;
}
#message-us label {
  position: inherit;
}
#message-us textarea {
  resize:none;
  margin-top:-1.5em;
  margin-left:10em;
  line-height:1.4em;
  height:13em;
  width:43em;
}

/* contact_us.php */
#contact-us {
  background:#B2EBF2;
  width:700px;
}
#contact-us textarea {
  resize:none;
  margin-top:.5em;
  margin-left:10em;
  line-height:1.4em;
  height:13em;
  width:43em;
}

/* iwoa forms */
.form-add {
  background:rgba(178, 235, 242, 0.5);
}
.form-edit {
  background:rgba(195, 235, 178, 0.5);
}
.form-delete {
  background:rgba(255, 50, 50, 0.25);
}


.form-remove {
  width:310px;
  margin:2% auto;
  text-align: center;
}
.form-remove .prompt {
  padding:3% 0%;
}
.form-remove select {
  margin-left:8em;
}
.form-remove input {
  margin: 0.25em 0em 0.25em 9em;
}

.form-move {
  width:310px;
  margin:2% auto;
  text-align:center;
}
.form-move .display-data {
  font-size:1.1em;
}
.form-move .prompt {
  padding:3% 0%;
}
.form-move select {
  margin-top:1em;
  margin-left:1.5em;
}
.form-move input {
  margin:0.25em 0em 0.25em 9em;
}
.form-move label {
  margin-top:0em;
  font-size:1em;
  width:21em;
  position:relative;
}

.form-position {
  width:310px;
}
.form-position input {
  margin-left:8em;
}
.form-position select {
  margin-left:8em;
}

.form-actioned {
  width:360px;
}
.form-actioned #data-element {
  clear:left;
  float:left;
  font-size:0.75em;
  font-weight:bold;
  margin:0.5em 6em 0em 0em;
  color:#212121;
}
.form-actioned #data-content {
  font-size:0.85em;
  margin:.25em 0em .25em 0em;
  color:#212121;
}

.form-diary {
  width:350px;
}
.form-diary input {
  margin-left:8em;
}
.form-diary select {
  margin-left:8em;
}

.form-wallet {
  width:390px;
}
.form-wallet input {
  margin-left:8em;
}

.form-product {
  width:490px;
}

.form-product-price {
  width:430px;
}
.form-product-price label.price-text {
  font-weight:normal;
  margin-top:0.5em;
  margin-left:1.5em;
}

.form-product-price-all {
  width:630px;
}
.form-product-price-all input {
  margin-left:22em;
}
.form-product-price-all label.price-text {
  font-weight:normal;
  margin-left:1em;
  width:17em;
  text-align:right
}



.filter-graph {
  float: left;
  width:535px;
  background:#00BCD4;
  border-color:#0097A7;
  margin-left:0;
  margin-bottom:5px;
  z-index:-1;
}
.filter-options {
  float:left;
}
.filter-options label {
  padding-left:1.25em;
  position: relative;
}
.filter-options #graph-value {
  margin-left:1em;
}
.filter-options #graph-display {
  margin-left:1em;
}
.filter-options input {
  height:2em;
}
.filter-button{
  float:left;
  margin-top:-.25em;
  margin-left:2em;
  margin-bottom:-.5em;
}

/* ############################# */
/* # Tabe - Expandable         # */
/* ############################# */
.box-expandable {
  padding: 0.5em 0em 0.5em 0.5em;
  border: 2px solid #212121;
  background-color:#FFFFF0;
  margin: 0.5em 0em 0em 0em;
  width: auto;
}
.box-expandable:hover {
  border: 2px solid #FFFFF0;
  background-color:#00BCD4;
}

.box-expand {
  display: none;
}
.box-collapse:target + .box-expand {
  display: inline;
}
.box-collapse:target {
  display: none;
}
.box-collapse:target ~ .box-elements {
  display:inline;
}

#box-title {
  display:inline;
  vertical-align:middle;
  color:#212121;
  font-size:120%;
  font-weight:bold;
  padding:0em 0em 0em .75em;
}

.box-collapse, .box-expand {
  float: left;
}

.box-elements {
  display:none;
  height:auto;
  margin:0.25em 0em 0em 0em;
  width:auto;
  overflow: hidden;
  transition: all 1s;
}

.box-head{
  padding:0.5em 0em 1.75em .25em;
  margin:0.5em 1em 0em 0em;
  color:#212121;
  background-color:#00BCD4;
  font-weight:bold;
}
#box-head-date{
  clear:left;
  float:left;
  width:5.5em;
  margin-right:1em;
}
#box-head-product-name{
  float:left;
  width: 22em;
  margin-right:1em;
}
#box-head-action{
  float:left;
  width:3.5em;
  margin-right:1em;
}
#box-head-diary-description{
  float:left;
  width: 18em;
  margin-right:1em;
}
#box-head-value{
  float:left;
  width: 8em;
  margin-right:1em;
  text-align: right;
}
#box-head-quantity{
  float:left;
  width:8em;
  margin-right:1em;
  text-align: right;
}
#box-head-options{
  float:left;
  width:0em;
}

.box-data{
  padding:0.5em 0em 2em .25em;
  margin: 0em 1em 0em 0em;
  vertical-align:middle;
  color:#212121;
  background-color:#FFFFF0;
}
#box-data-date{
  clear:left;
  float:left;
  width:5.5em;
  margin-right:1em;
  text-align:right;
}
#box-data-product-name{
  float:left;
  width:22em;
  margin-right:1em;
  text-align: left;
  word-wrap: break-word;
}
#box-data-action{
  float:left;
  width:3.5em;
  margin-right:1em;
  text-align:center;
}
#box-data-diary-description{
  float:left;
  width:18em;
  margin-right:1em;
  text-align: left;
  word-wrap: break-word;
}
#box-data-value{
  float:left;
  width:8em;
  margin-right:1em;
  text-align: right;
}
#box-data-quantity{
  float:left;
  width:8em;
  margin-right:1em;
  text-align: right;
}
.box-data:hover{
  background-color:#00BCD4;
  color:#FFFFFF;
}
.box-data-options{
  float:left;
  width: 3.5em;
  margin-top:-0.1em;
}

/*** table body section: odd row style ***/
.box-data:nth-child(even) {
  background-color:#FFFFF0;
}

/*** table body section: odd row style - hover ***/
.box-data:nth-child(even):hover {
  cursor:text;
  background-color:rgba(178, 235, 242, 0.5);
  color:#FFFFF0;
}

/*** table body section: even row style ***/
.box-data:nth-child(odd) {
  background-color:#B2EBF2;
}

/*** table body section: even row style - hover ***/
.box-data:nth-child(odd):hover {
  cursor:text;
  background-color:rgba(178, 235, 242, 0.5);
  color:#FFFFF0;
}

/* ########## */

.section-head{
  padding:0.5em 0em 2em 0.5em;
  color:#212121;
  background-color:#00BCD4;
  font-weight:bold;
}
.section-headx2{
  padding:0.5em 0em 3.5em 0.5em;
}
.section-head-date{
  float:left;
  width: 5.5em;
  margin-right:1.25em;
}
.section-head-update-date{
  float:left;
  width:13em;
  margin-right:1.25em;
}
.section-head-month{
  float:left;
  width: 5em;
  margin-right:1.25em;
}
.section-head-action{
  float:left;
  width: 3.5em;
  margin-right:1.25em;
}
.section-head-reference{
  float:left;
  width: 8em;
  margin-right:1.25em;
}
.section-head-value{
  float:left;
  width: 8em;
  margin-right:1.25em;
  text-align: right;
}
.section-head-quantity{
  float:left;
  width: 8em;
  margin-right:1.25em;
  text-align: right;
}
.section-head-description{
  float:left;
  width:18em;
  margin-right:1.25em;
}
.section-head-description-1250{
  float:left;
  width:12.5em;
  margin-right:1.25em;
}
.section-head-description-2200{
  float:left;
  width:22em;
  margin-right:1.25em;
}
.section-head-diary-description{
  float:left;
  width:19em;
  margin-right:1.25em;
}
.section-head-number{
  float:left;
  width:6em;
  margin-right:1.25em;
  text-align: right;
}
.section-head-product-number{
  float:left;
  width:6em;
  margin-right:1.25em;
  text-align: right;
}
.section-head-options{
  float:left;
  width: 0em;
}


/*** table body section: even row style ***/
.section-data:nth-child(even) {
  background-color:#FFFFF0;
}
/*** table body section: even row style - hover ***/
.section-data:nth-child(even):hover {
  cursor:text;
  background-color:rgba(178, 235, 242, 0.5);
  color:#FFFFF0;
}

/*** table body section: odd row style ***/
.section-data:nth-child(odd) {
  background-color:#B2EBF2;
}
/*** table body section: odd row style - hover ***/
.section-data:nth-child(odd):hover {
  cursor:text;
  background-color:rgba(178, 235, 242, 0.5);
  color:#FFFFF0;
}


.section-data{
  padding:0.85em 0em 2em 0.5em;
  vertical-align:middle;
  color:#212121;
  background-color:#FFFFF0;
}
.section-datax2{
  padding:0.85em 0em 3.5em 0.5em;
}
.section-data-date{
  float:left;
  width:5.5em;
  margin-right:1.25em;
  text-align:right;
}
.section-data-update-date{
  float:left;
  width:13em;
  margin-right:1.25em;
  text-align:right;
}
.section-data-month{
  float:left;
  width:5em;
  margin-right:1.25em;
  text-align:left;
}
.section-data-action{
  float:left;
  width: 3.5em;
  margin-right:1.25em;
  text-align:center;
}
.section-data-reference{
  float:left;
  width:8em;
  margin-right:1.25em;
  text-align: left;
}
.section-data-value{
  float:left;
  width:8em;
  margin-right:1.25em;
  text-align: right;
}
.section-data-quantity{
  float:left;
  width:8em;
  margin-right:1.25em;
  text-align: right;
}
.section-data-description{
  float:left;
  width:18em;
  margin-right:1.25em;
  text-align: left;
  word-wrap: break-word;
}
.section-data-description-1250{
  float:left;
  width:12.5em;
  margin-right:1.25em;
  text-align: left;
  word-wrap: break-word;
}
.section-data-description-2200{
  float:left;
  width:22em;
  margin-right:1.25em;
  text-align: left;
  word-wrap: break-word;
}
.section-data-diary-description{
  float:left;
  width:19em;
  margin-right:1.25em;
  text-align: left;
  word-wrap: break-word;
}
.section-data-number{
  float:left;
  width:6em;
  margin-right:1.25em;
  text-align: right;
}
.section-data-product-number{
  float:left;
  width:6em;
  margin-right:1.25em;
  text-align: right;
}
.section-data-padding{
  float:left;
  width:0;
  visibility:hidden;
}
.section-data-options{
  float:left;
  margin-top:-0.1em;
}
.section-data-options6{
  width: 11em;
}
.section-data-options5{
  width: 9em;
}
.section-data-options4{
  width: 7em;
}
.section-data-options3{
  width: 5.5em;
}
.section-data-options2{
  width: 3.5em;
}
.section-data-options1{
  width: 1.5em;
}
.section-data:hover{
  background-color:#00BCD4;
  color:#FFFFFF;
}


/* ############################# */
/* # Menus                     # */
/* ############################# */
ul{
  margin:0 auto;
  padding:0;
  list-style:none;
  z-index:1;
}

/* ############################# */
/* # Header Menu               # */
/* ############################# */
.header-menu{
  float:right;
  margin:-50px 30px auto;
  background:#FFFFF0;
  border-radius:5px;
  border-color:#212121;
  border-style:solid;
  border-width:3px;
  width:85px;
}

.header-menu img{
  float:left;
  margin:0.25em 0.25em 0em 0em;
}

ul.header-options{
  margin:0 auto;
  padding:0;
  list-style:none;
  position:relative;
  text-align:center;
}

ul.header-options li{
  margin:0;
  padding:5px 10px;
}

ul.header-options li a{
  text-decoration:none;
  color:#212121;
  display:block;
  text-align:left;
}

ul.header-options li ul{
  display:none;
}

ul.header-options li:hover ul{
  display:block;
  background:#FFFFF0;
  top:30px;
  position:absolute;
  border-radius:.25em 0em .25em .25em;
  width:180px;
  border-color:#212121;
  border-style:solid;
  border-width:0em .2em .2em .2em;
  margin-left: -6.75em;
}

ul.header-options li ul li{
  padding:0px;
  display:block;
  padding-left:10px;
  border-bottom:1px solid #B6B6B6;
  border-top:1px solid #FFFFF0;
}

ul.header-options li ul li:first-child{
  border-top:3px solid #212121;
}

ul.header-options li ul li:last-child{
  border-bottom:none;
}

ul.header-options li ul li a{
  display:block;
  width:100%;
  font-size:12px;
  padding:5px 0;
}

ul.header-options li ul li a:hover{
  color:#009688;
}

/* ############################# */
/* # App Menu               # */
/* ############################# */
.app-menu{
  float:left;
  background:#FFFFF0;
  border-radius:5px;
  border-color:#212121;
  border-style:solid;
  border-width:3px;
  width:98px;
}

.app-menu img{
  float:left;
  margin-right:0.25em;
}

ul.app-options{
  margin:0 auto;
  padding:0;
  list-style:none;
  position:relative;
  text-align:center;
  z-index:1;
}

ul.app-options li{
  margin:0;
  padding:5px 10px;
}

ul.app-options li a{
  text-decoration:none;
  color:#212121;
  display:block;
  text-align:left;
}

ul.app-options li ul{
  display:none;
}

ul.app-options li:hover ul{
  display:block;
  background:#FFFFF0;
  top:1.5em;
  position:absolute;
  border-radius:0em .25em .25em .25em;
  width:120px;
  border-color:#212121;
  border-style:solid;
  border-width:0em .2em .2em .2em;
  margin-left: -.74em;
}

ul.app-options li ul li img{
  float:left;
  margin:0.25em 0.25em 0em 0em;
}

ul.app-options li ul li{
  padding:0px;
  display:block;
  padding-left:10px;
  border-bottom:1px solid #B6B6B6;
  border-top:1px solid #FFFFF0;
}

ul.app-options li ul li:first-child{
  border-top:3px solid #212121;
}

ul.app-options li ul li:last-child{
  border-bottom:none;
}

ul.app-options li ul li a{
  display:block;
  width:100%;
  font-size:.75em;
  padding:5px 0;
}

ul.app-options li ul li a:hover{
  color:#009688;
}

/****************************************/
/* Verification                         */
  /*background: url("../images/verify_background.jpg");
  background-repeat:repeat-x;*/
/****************************************/
article{
  display: block;
  position: absolute;
  z-index: 9999;
  left: 15%;
  top: 100%;
  width:1%;
  height:6%;
  background-color:#FFFFFF;
  border: 3px solid #0097A7;
  overflow: hidden;
  line-height:1em;
  transition: all 1s;
}

article:target {
  visibility: visible !important;
  left:23em !important;
  top:25em !important;
  width:7.75em !important;
  height:2.5em !important;
  opacity: 1 !important;
}

[data-transition="verify-fade"]{
  left:38%;
  top:75%;
  opacity: 0;
  visibility: hidden;
}


article [data-button="close"]{
  display: block;
  float: right;
  background:#00BCD4;
  color:#212121;
  border: 2px solid #0097A7;
  padding: 0.25em;
  text-decoration: none;
  font-size:.75em;
  font-weight:bold;
  margin-top:-2.85em;
  margin-left:9em;
}
article [data-button="close"]:hover{
  background:#0097A7;
  color:#FFFFFF;
  border: 2px solid #00BCD4;
}


/****************************************/
/* Screen size definitions              */
/****************************************/

@media screen and (max-width:319px) {
  .tableContainer {
    padding: 0em;
  }
  .grid-col20 {
    width: 76%;
    margin: 0 2% 2% 2%;
    height: 8em;
    padding-bottom: 2%
  }
  .grid-row10-col20 #advert {
    background:url("/images/actual/advert_background_hrz.jpg");
    height:8.35em;
  }

  .grid3-row20-col10 {
    width:90%;
    height: auto;
    padding-top:1%;
    padding-left:18%;
  }
  .grid3-row20-col20 {
    width:90%;
    height: auto;
    padding-top:0%;
    padding-left:18%;
  }
  .grid3-row20-col30 {
    width:90%;
    height: auto;
    padding-top:0%;
    padding-left:18%;
  }
  .grid3-row20-col10 img {
    padding:1%;
  }
  .grid3-row20-col20 img {
    padding:1%;
  }
  .grid3-row20-col30 img {
    padding:1%;
  }

.menu-option-element-1 {
  width:100%;
  margin-top:0.25em;
}
.menu-option-element-2 {
  width:100%;
  margin-top:0.25em;
}

.data-display #data-content {
  border-left:none;
}

}
@media screen and (min-width:320px) and (max-width:479px) {
  .tableContainer {
    padding: 0em;
  }
  .grid-col20 {
    width: 76%;
    margin: 0 2% 2% 2%;
    height: 8em;
    padding-bottom: 2%
  }
  .grid-row10-col20 #advert {
    background:url("/images/actual/advert_background_hrz.jpg");
    height:8.35em;
  }

  .grid3-row20-col10 {
    width:90%;
    height: auto;
    padding-top:1%;
    padding-left:18%;
    margin-left:4.25em;
  }
  .grid3-row20-col20 {
    width:90%;
    height: auto;
    padding-top:0%;
    padding-left:18%;
  }
  .grid3-row20-col30 {
    width:90%;
    height: auto;
    padding-top:0%;
    padding-left:18%;
  }
  .grid3-row20-col10 img {
    padding:1%;
  }
  .grid3-row20-col20 img {
    padding:1%;
  }
  .grid3-row20-col30 img {
    padding:1%;
  }

.menu-option-element-1 {
  width:100%;
  margin-top:0.25em;
}
.menu-option-element-2 {
  width:100%;
  margin-top:0.25em;
}

.data-display #data-content {
  border-left:none;
}

}
@media screen and (min-width:480px) and (max-width:767px) {
  .tableContainer {
    padding: 0em;
  }
  .grid-col20 {
    width: 76%;
    margin: 0 2% 2% 2%;
    height: 8em;
    padding-bottom: 2%
  }
  .grid-row10-col20 #advert {
    background:url("/images/actual/advert_background_hrz.jpg");
    height:8.35em;
  }

  .grid3-row20-col10 {
    width:90%;
    height: auto;
    padding-top:1%;
    padding-left:18%;
    margin-left:4.25em;
  }
  .grid3-row20-col20 {
    width:90%;
    height: auto;
    padding-top:0%;
    padding-left:18%;
  }
  .grid3-row20-col30 {
    width:90%;
    height: auto;
    padding-top:0%;
    padding-left:18%;
  }
  .grid3-row20-col10 img {
    padding:1%;
  }
  .grid3-row20-col20 img {
    padding:1%;
  }
  .grid3-row20-col30 img {
    padding:1%;
  }

.menu-option-element-1 {
  width:100%;
  margin-top:0.25em;
}
.menu-option-element-2 {
  width:100%;
  margin-top:0.25em;
}

.data-display #data-content {
  border-left:none;
}

}
@media screen and (min-width:768px) and (max-width:991px) {
  .tableContainer {
    padding: 0em;
  }
  .grid-col10 {
    width: 100%;
  }
  .grid-col20 {
    width: 100%;
    margin: 0 2% 2% 2%;
    height: 8em;
    padding-bottom: 2%
  }
  .grid-row10-col20 {
    margin:0% 4% 2% 0%;
  }
  .grid-row10-col20 #advert {
    background:url("/images/actual/advert_background_hrz.jpg");
    height:8.5em;
  }

  .grid3-row20-col10 {
    margin-left:8.25em;
  }

  .menu-option-element-1 {
    width:50%;
    margin-top:0.25em;
  }
  .menu-option-element-2 {
    width:50%;
    margin-top:0.25em;
  }

  .section-head{
    padding-bottom:4em;
  }
  .section-head-description{
    width:12em;
  }
  .section-head-diary-description{
    width:12em;
  }
  .section-data{
    padding-bottom:6em;
  }
  .section-data-line2{
    padding-bottom:4em;
  }
  .section-data-product-number{
    width:19em;
  }
  .section-data-description{
    width:100%;
  }
  .section-data-diary-description{
    width:12em;
  }
  .section-data-padding13{
    width:13em;
  }
  .section-data-options{
    width:100%;
    margin-top:0.5em;
  }

}
@media screen and (min-width:992px) and (max-width:1199px) {
  .grid-col20 {
    width: 76%;
    margin: 0 2% 2% 2%;
    height: 8em;
    padding-bottom: 2%
  }
  .grid-row10-col20 #advert {
    background:url("/images/actual/advert_background_hrz.jpg");
    height:8.35em;
  }

  .menu-option-element-1 {
    width:35%;
    margin-top:0.25em;
  }
  .menu-option-element-2 {
    width:100%;
    margin-top:0.25em;
  }

  .section-data{
    padding-bottom:4em;
  }
  .section-data-options{
    width:100%;
    margin-top:0.5em;
  }

  .grid3-row20-col10 {
    margin-left:8.25em;
  }

}

@media screen and (min-width:1200px) {
}