﻿/* Main area set-up 
/* Main area set-up 
--------------------------------------------------------*/
/* Sizing styles
-----------------------------------------------------------*/
.full-width {
  width: 100%;
}
.full-height {
  height: 100%;
}
.full-page {
  height: 100%;
  width: 100%;
}
/* Basic items
------------------------------------------------------------*/
template {
  visibility: collapse;
  display: none;
}
.button-look {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
}
.button-press-look {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
}
.button-stylings {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
}
.button-stylings:hover {
  background-color: lightgray;
}
.button-stylings:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.button-stylings:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.icon-link-as-button {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
}
.icon-link-as-button:hover {
  background-color: lightgray;
}
.icon-link-as-button:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.icon-link-as-button:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.icon-link-as-button-small {
  width: 100%;
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  /* icon link as button */
  height: 100%;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
}
.icon-link-as-button-small:hover {
  background-color: lightgray;
}
.icon-link-as-button-small:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.icon-link-as-button-small:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.center_button {
  text-align: center;
}
.image-button {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px 25px !important;
  background-position: 5px center !important;
  padding-left: 34px !important;
  padding-right: 5px !important;
}
.image-button:hover {
  background-color: lightgray;
}
.image-button:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.image-button:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.image-button:active {
  padding-left: 35px !important;
  padding-right: 4px !important;
  background-position: 6px center !important;
}
.image-button-small {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px 25px !important;
  background-position: 5px center !important;
  padding-left: 34px !important;
  padding-right: 5px !important;
  background-size: 18px 18px !important;
  padding-left: 27px !important;
  padding-right: 1px !important;
}
.image-button-small:hover {
  background-color: lightgray;
}
.image-button-small:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.image-button-small:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.image-button-small:active {
  padding-left: 35px !important;
  padding-right: 4px !important;
  background-position: 6px center !important;
}
.image-button-small:active {
  padding-left: 28px !important;
  padding-right: 0px !important;
}
.download-button-small {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px 25px !important;
  background-position: 5px center !important;
  padding-left: 34px !important;
  padding-right: 5px !important;
  background-size: 18px 18px !important;
  padding-left: 27px !important;
  padding-right: 1px !important;
  background-image: url("/Content/images/download-icon-small.png");
}
.download-button-small:hover {
  background-color: lightgray;
}
.download-button-small:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.download-button-small:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.download-button-small:active {
  padding-left: 35px !important;
  padding-right: 4px !important;
  background-position: 6px center !important;
}
.download-button-small:active {
  padding-left: 28px !important;
  padding-right: 0px !important;
}
.download-button-small-disabled {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px 25px !important;
  background-position: 5px center !important;
  padding-left: 34px !important;
  padding-right: 5px !important;
  background-size: 18px 18px !important;
  padding-left: 27px !important;
  padding-right: 1px !important;
  background-image: url("/Content/images/download-icon-small-grey.png");
}
.download-button-small-disabled:hover {
  background-color: lightgray;
}
.download-button-small-disabled:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.download-button-small-disabled:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.download-button-small-disabled:active {
  padding-left: 35px !important;
  padding-right: 4px !important;
  background-position: 6px center !important;
}
.download-button-small-disabled:active {
  padding-left: 28px !important;
  padding-right: 0px !important;
}
.email-button-small {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px 25px !important;
  background-position: 5px center !important;
  padding-left: 34px !important;
  padding-right: 5px !important;
  background-size: 18px 18px !important;
  padding-left: 27px !important;
  padding-right: 1px !important;
  background-image: url("/Content/images/email-icon.png");
}
.email-button-small:hover {
  background-color: lightgray;
}
.email-button-small:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.email-button-small:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.email-button-small:active {
  padding-left: 35px !important;
  padding-right: 4px !important;
  background-position: 6px center !important;
}
.email-button-small:active {
  padding-left: 28px !important;
  padding-right: 0px !important;
}
.email-button-small-disabled {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px 25px !important;
  background-position: 5px center !important;
  padding-left: 34px !important;
  padding-right: 5px !important;
  background-size: 18px 18px !important;
  padding-left: 27px !important;
  padding-right: 1px !important;
  background-image: url("/Content/images/email-icon-grey.png");
}
.email-button-small-disabled:hover {
  background-color: lightgray;
}
.email-button-small-disabled:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.email-button-small-disabled:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.email-button-small-disabled:active {
  padding-left: 35px !important;
  padding-right: 4px !important;
  background-position: 6px center !important;
}
.email-button-small-disabled:active {
  padding-left: 28px !important;
  padding-right: 0px !important;
}
.download-button {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px 25px !important;
  background-position: 5px center !important;
  padding-left: 34px !important;
  padding-right: 5px !important;
  background-image: url("/Content/images/download-icon.png");
}
.download-button:hover {
  background-color: lightgray;
}
.download-button:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.download-button:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.download-button:active {
  padding-left: 35px !important;
  padding-right: 4px !important;
  background-position: 6px center !important;
}
.email-button {
  background-color: #EEEEEE;
  color: #333333;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  text-decoration: none;
  /* get rid of the underline */
  border-radius: 4px;
  background-size: 100vw 100vh;
  vertical-align: bottom;
  padding-right: 5px;
  padding-left: 4px;
  padding-top: 7px;
  /* icon link as button */
  padding-bottom: 3px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 25px 25px !important;
  background-position: 5px center !important;
  padding-left: 34px !important;
  padding-right: 5px !important;
  background-image: url("/Content/images/email-icon.png");
}
.email-button:hover {
  background-color: lightgray;
}
.email-button:active {
  background-color: lightgray;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  border-right: 1px solid #CCCCCC;
  padding-right: 4px;
  padding-left: 5px;
}
.email-button:disabled {
  color: #CCC;
  background-color: white;
  border-color: #CCC;
}
.email-button:active {
  padding-left: 35px !important;
  padding-right: 4px !important;
  background-position: 6px center !important;
}
.warning-button {
  color: red !important;
}
/***********************************/
/*  Specialised buttons            */
/***********************************/
#paypal-button-container {
  width: 300px;
  display: inline-block;
}