/* vars */
:root {
  --bodybgcolor: #FFF7E6;
  --bordercolorpanels: #FFF7E6;
  --bgcolorpanels: #FFF7E6;
  --fontcolor: #000;
  --hfontcolor: #0066cc;
  --hfontcolor2: #0033cc;
  --afontcolor: #0066cc;
  --titlecolor: #FFF7E6;
  --bodyfontfam: Calibri;
  --titlefontfam: Garamond;
  --navfontfam: Tahoma, Geneva;
  --hfontfam: Calibri;  
  --listitemcolor: green;
  --unicodelistchar: "\2713";
}

/* panels */
#wrapper {
    float: inherit;
    width: 904px;
    position: relative;
    margin: 0 auto 0 auto;
	border: 1px solid var(--bordercolorpanels);
    background-color: var(--bgcolorpanels);
}

#header {
	float: left;
    width: 850px;
    height: 100px;
    border: 1px solid var(--bordercolorpanels);
    padding: 50px 0 5px 50px;
    background-color: var(--bgcolorpanels);
	background-image: url("hout.png");
	background-size: cover;
	font-family: var(--titlefontfam);
	font-size: 50px;
    font-weight: 300;
	letter-spacing: 2px;
    color: var(--titlecolor);
    text-shadow: 1px 1px #ccc;
}

nav {
    float: left;
    width: 904px;
    height: 15px;
    border: 1px solid var(--bordercolorpanels);
    padding: 0px 0 3px 0px;
    background-color: var(--bgcolorpanels);
}

#article_left {
    float: left;
    width: 650px;
    padding: 12px 25px 25px 25px;
	border: 1px solid var(--bordercolorpanels);
	min-height: 500px;
    background-color: var(--bgcolorpanels);
}

#article_right {
    float: right;
    width: 650px;
    padding: 12px 25px 25px 25px;
	border: 1px solid var(--bordercolorpanels);
	margin-left: 10px;
	min-height: 500px;
    background-color: var(--bgcolorpanels);
}

#aside_right {
    float: right;
    width: 180px;
    padding: 0px 8px 8px 8px;
	border: 1px solid var(--bordercolorpanels);
    background-color: var(--bgcolorpanels);
}

#aside_left {
    float: left;
    width: 180px;
    padding: 8px 8px 8px 8px;
	border: 1px solid var(--bordercolorpanels);
    background-color: var(--bgcolorpanels);
}

#footer {
	text-align: left;
    clear: both;
    width: 900px;
    height: 20px;
    border: 1px solid var(--bordercolorpanels);
    background-color: var(--bgcolorpanels);
}

/* html elements */

body {
    font-family: var(--bodyfontfam);
    font-style: normal;
    font-size: 12px;
    color: var(--fontcolor);
	letter-spacing: 0.3px;
    background-color: var(--bodybgcolor);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hfontfam);
    font-variant: small-caps;
    text-shadow: 1px 1px #ccc;
    line-height: 26px;
    color: var(--hfontcolor);
}

h1 {
	font-size: 24px;
	letter-spacing: 1.0px;
	margin-left: 10px;
}

h2 {
	font-size: 20px;
	letter-spacing: 1.2px;
	margin-left: 20px;
}

h3 {
	font-size: 16px;
	letter-spacing: 1.4px;
	margin-left: 30px;
}

h4 {
	font-size: 24px;
	letter-spacing: 1.0px;
    color: var(--hfontcolor2);
	margin-left: 10px;
}

h5 {
	font-size: 20px;
	letter-spacing: 1.2px;
    color: var(--hfontcolor2);
	margin-left: 20px;
}

h6 {
	font-size: 16px;
	letter-spacing: 1.4px;
    color: var(--hfontcolor2);
	margin-left: 30px;
}

h7 {
	font-size: 30px;
	letter-spacing: 4px;
    color: var(--titlecolor);
}

a {
    color: var(--fontcolor);
    text-decoration: none;
}

a:hover {
    color: var(--fontcolor);
    text-decoration: underline;
}

nav a {
    font-family: var(--navfontfam);
    font-size: 12px;
	letter-spacing: 0.2px;
    color: var(--hfontcolor);
	padding-right:6px;
}

nav a:hover {
    color: var(--fontcolor);	
    text-decoration: none;
}

p {
	color: var(--fontcolor);
}

ul {
  list-style: none;
}

ul li::before {
  content: var(--unicodelistchar);
  color: var(--listitemcolor);
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: 0px;
}

button {
    font-family: var(--hfontfam);
    font-size: 18px;
	letter-spacing: 0.8px;
    color: var(--titlecolor);	
}

/* multiple columns */

.columns2 {
  float: left;
  width: 50%;
}

.columns3 {
  float: left;
  width: 33.3%;
}

.columns4 {
  float: left;
  width: 25%;
}

.columns5 {
  float: left;
  width: 20%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* tables */

#customtable {
    border-collapse: collapse;
    width: 100%;
	margin: 10px 10px 10px 10px;
}

#customtable td, #customtable th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customtable tr:nth-child(even){
	background-color: #f2f2f2;
}

#customtable tr:hover {
	background-color: #ddd;
	color: var(--hfontcolor);
}

#customtable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    font-variant: small-caps;
    background-color: var(--hfontcolor);
    color: white;
}

/* buttons */

.glow-on-hover_red {
    min-width: 120px;
    height: 50px;
    border: none;
    outline: none;
    color: #000;
    background: #fff;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
	margin-left: 15px;
}

.glow-on-hover_red:before {
    content: '';
    background: linear-gradient(90deg, #fff, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover_red:active {
    color: #000
}

.glow-on-hover_red:hover {
    color: #ccc
}

.glow-on-hover_red:active:after {
    background: transparent;
}

.glow-on-hover_red:hover:before {
    opacity: 1;
}

.glow-on-hover_red:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    left: 0;
    top: 0;
    border-radius: 10px;
}

.glow-on-hover_green {
    min-width: 120px;
    height: 50px;
    border: none;
    outline: none;
    color: #000;
    background: #fff;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
	margin-left: 15px;
}

.glow-on-hover_green:before {
    content: '';
    background: linear-gradient(90deg, #fff, #008000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover_green:active {
    color: #000
}

.glow-on-hover_green:hover {
    color: #ccc
}

.glow-on-hover_green:active:after {
    background: transparent;
}

.glow-on-hover_green:hover:before {
    opacity: 1;
}

.glow-on-hover_green:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 300% 0; }
    100% { background-position: 0 0; }
}

/* reset */

blockquote,q { quotes: none;}
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none;}