/* pseudo-class for element: https://drafts.csswg.org/selectors/#the-root-pseudo */
:root {
--default-greeting-font: "Julius Sans One", sans-serif;
--default-font-family: "Kodchasan", sans-serif;
--default-header-font: "Julius Sans One", sans-serif;
--default-header-second-font: "Julius Sans One", sans-serif;
/*--default-background-image: url("../images/Admin/christmas_cookies.jpg");*/
/*--default-border-image: url("../images/Admin/christmas-lights.png");*/
--default-background-color: #FFFFFF ;
--default-font-color: #000080 ;
--default-header-font-color: #008000 ;
--default-link-color: #006400 ;
--default-link-color-hover: #000000 ;
--secondary-header-font-color: #000080 ;
--default-hr-color: #9acd32 ;
--default-border-color: #9acd32 ;
--default-flavor-background-color: #000080 ;
--default-flavor-header-color: #FFFFFF ;
--default-item-background-color: #90EE90 ;
--default-menu-border-color: #9acd32 ;
--product-grid-header-color: #000080 ;
--product-grid-header-background: #FFFFFF ;
--product-grid-header-a: #006400 ;
--product-grid-header-a-hover: #000000 ;
--product-grid-header-background-color: #ffa500 ;
--secondary-border-color: #9acd32 ;
/*
Bisque = #ffe4c4
Black = #000000
Blue = #0000ff
Brown = #a52a2a
Candy Apple Red = #ff0800
Chocolate = #d2691e
Darkgreen = #006400
Darkslategray = #2f4f4f
Floral White = #fffaf0
Forestgreen = #228B22
Gold = #ffd700
Green = #008000
Lightgreen = #90EE90
Mediumblue = #0000CD
Moccasin = #ffe4b5
Navajo White = #ffdead
Navy = #000080
Olivedrab = #6B8E23
Orange = #ffa500
Orangered = #ff4500
Palegreen = #98FB98
Peru = #cd853f
Pink = #FFC0CB
Platinum = #e5e4e2
Pullman brown = #644117
Pumpkin = #ff7518
Purple = #800080
Red = #FF0000
Royal purple = #7851a9
Saddle Brown = #8b4513
Sandy Brown = #f4a460
Seagreen = #2E8B57
Seal Brown = #321414
Sienna = #a0522d
Springgreen = #00FF7F
Tuscan Tan = #a67b5b
Wheat = #f5deb3
White = #FFFFFF
Yellow = #fefe33
Yellow orange = #ffae42
*/
}
html
{
background: var(--default-background-color);
/*background-image: var(--default-background-image);*/
background-position: right left ;
background-repeat: no-repeat ;
background-size: 25% ;
color: var(--default-font-color) ;
font-family: var(--default-font-family) ;
font-size: 100% ;
margin: 0 ;
}
/* headings and spacing
----------------------------------------------- */
/* https://www.w3.org/TR/html5/rendering.html#sections-and-headings */
h1 {
margin-block-start: 0.5em;
margin-block-end: 0.5em;
font-size: 3.5em;
font-weight: normal;
color: var(--default-header-font-color) ;
text-align: center;
font-family: var(--default-header-font);
}
h2 {
margin-block-start: 0.01em;
margin-block-end: 0.01em;
font-size: 2.75em;
font-weight: normal;
color: var(--default-header-font-color) ;
text-align: center;
font-family: var(--default-header-font);
}
h3 {
margin-block-start: 0.01em;
margin-block-end: 0.01em;
font-size: 1.17em;
font-weight: normal;
color: var(--default-header-font-color);
font-family: var(--default-header-second-font);
text-align: center;
}
h4 {
margin-block-start: 1.33em;
margin-block-end: 1.33em;
font-size: 1.00em;
font-weight: normal;
color: var(--secondary-header-font-color);
text-align: center;
}
h5 {
margin-block-start: 1.67em;
margin-block-end: 1.67em;
font-size: 0.83em;
font-weight: normal;
color: var(--secondary-header-font-color);
text-align: center;
}
h6 {
margin-block-start: 2.33em;
margin-block-end: 2.33em;
font-size: 0.67em;
font-weight: normal;
color: var(--secondary-header-font-color);
text-align: center;
}
hr {
border-style: solid ;
border-width: .1em 0 0;
border-style: dotted;
color: var(--default-hr-color);
}
hr.third {
width: 33%;
border-style: dotted;
alignment-baseline: middle;
}
/* anchors
----------------------------------------------- */
a {
color: var(--default-link-color);
font-weight: normal;
text-decoration: none;
}
a:hover {
color: var(--default-link-color-hover);
/*text-decoration: underline;*/
font-weight: bold;
}
a:active {
text-decoration: none;
color: var(--default-font-color);
}
a.TopBottomNav
{
font-weight: normal;
font-size: small;
font-style: italic;
}
/* images
----------------------------------------------- */
img, picture, video {
max-width: 100%;
display: block;
}
.footer {
font-size: smaller;
font-style: italic;
}
/* accordian
----------------------------------------------- */
details {
padding: 0 1em;
}
details + details {
border-top: none;
}
details[open] {
padding-bottom: 1em;
}
summary {
padding: 0.75em 3em;
text-align: center;
}