Index
/**
* 1. Centers the content.
* 2. Feel free to change this, this sets the width
* 3. Adds some internal 'padding' to the div
*/
/* CSS goes here, at the top of the page */
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
/* Ensure proper sizing */
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Reset CSS */
* {
margin: 0;
padding: 0;
}
/* Main page HTML CSS */
html {
position: static;
width: 100%; height: auto;
margin: 5px;
padding: 5px; 5px; 5px;5px;
display: inline-block;
overflow: scroll;
background: black;
/* Other styles same as .left */;
background-image: url('');
background-repeat: repeat;
background-size: cover;
background-attachment: local;
background-position: center;
background-origin: border-box;
background-clip: border-box;
color: green;
text-shadow: 1px 1px 2px yellow;
font-family: Georgia, serif;
font-size: 24px;
font-weight: normal;
outline: dotted white 1px;
border-style: solid;
border-width: 2px;
border-color: #cc9900;
border-image: initial;
border-radius: 5px 5px 5px 5px;
}
html body {
position: relative;
width: 1500px; height: auto;
margin: 5px;
padding: 5px; 5px; 5px; 5px;
display: inline-block;
overflow: scroll;
background: rgba(0,0,0,0.4);
/* Other styles same as .left */;
background-image: url('');
background-repeat: repeat;
background-size: cover;
background-attachment: local;
background-position: center;
background-origin: border-box;
background-clip: border-box;
color: yellow;
text-shadow: 1px 1px 2px green;
font-family: Georgia, serif;
font-size: 18px;
font-weight: normal;
outline: dotted white 1px;
border-style: solid;
border-width: 2px;
border-color: #cc9900;
border-image: initial;
border-radius: 5px 5px 5px 5px;
}
html:focus {
outline: dotted;
}
html .jqueryslidemenu {
height: 1%;
}
/* Page content displayed CSS */
/* Page border area CSS */
.page-outline {
box-sizing: inherit;
position: relative;
margin: 0;
padding: 1px 1px 1px 1px;
background: rgba(0,0,0,0.4);
outline: dotted white 1px;
}
.page-border {
box-sizing: inherit;
position: relative;
margin: 2px;
padding: 2px 2px 2px 2px;
border-radius: 5px 5px 5px 5px;
border: 2px solid rgb(204, 204, 204) !important;
}
/* Href links CSS */
a {
background: rgba(0,0,0,0.4);
color: blue;
text-shadow: 1px 1px 2px yellow;
outline-style: none;
text-decoration-line: none;
transition: all 0.2s linear 0s;
}
a:link {
color: yellowgreen;
background-color: transparent;
text-decoration: none;
text-shadow: 1px 1px 2px yellow;
}
a:visited {
color: yellow;
text-shadow: 1px 1px 2px pink;
background-color: transparent;
text-decoration: none;
}
a:active {
color: red;
text-shadow: 1px 1px 2px yellow;
background-color: transparent;
text-decoration: underline;
}
a:hover {
background-color: transparent;
text-decoration: underline;
}
/* List menu CSS */
ul {
position:relative;
margin: 0; padding: 5px;
list-style: none;
display: inline-block;
background : #009688;
color: #97FFFF;
text-shadow: 2px 2px 2px red;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: lightgray;
border-radius: 5px 5px 5px 5px;
}
li {
width: 200px;
padding: 5px;
display: inline-block;
list-style-type: none;
background: lightblue;
color: green;
text-shadow: 1px 1px 2px yellow;
border-width: 1px;
border-style: solid;
border-radius: 5px 5px 5px 5px;
/* make items horizontal */
transition: 0.3s;
}
li:hover {
/* change color on hover (mouseover) */
background: lightgreen;
color: #EB6361;
text-shadow: 1px 1px 2px yellow;
}
li a {
padding: 5px; margin: 5px;
text-decoration: none;
background: lightgreen;
color: red;
text-shadow: 1px 1px 2px yellow;
}
li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
text-shadow: 1px 1px 1px 1px yellow;
/* Remove HTML bullets */
color: #333;
text-shadow: 1px 1px 1px 1px yellow;
}
ul li {
position:relative;
margin: 5px;
display: inline-block;
background: #1F568B;
color: yellow;
text-shadow: 1px 1px 2px green;
font-size: 14px;
text-align: center;
border-color: lightgray;
border-width: 1px;
border-style: solid;
border-radius: 2px;
}
ul li:hover{
background-color: blue;
color: yellow;
text-shadow: 1px 1px 1px 1px green;
transition: 0.3s;
}
ul > li > a {
padding: 5px;
display: block;
color: #996600;
text-shadow:0px 1px 0px yellow;
}
/* Heading CSS */
h1 {
background: rgba(0,0,0,0.4);
color: blue;
text-shadow: 2px 2px 2px 2px yellow;
font-family: Georgia, serif;
font-size: 30px;
border-bottom: 3px solid blue;
}
h2 {
box-sizing: inherit;
margin: 10px 0px;
padding: 10px;
background-color: rgb(244, 244, 244);
color : green;
text-shadow: 1px 1px 1px 1px yellow;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 28px;
border-bottom: 3px solid green;
orphans: 2; widows: 2;
}
h3 {
box-sizing: inherit;
margin: 10px 0px;
margin-top: 0px;
background-color: rgb(255, 255, 255);
color: red;
text-shadow: 1px 1px 1px 1px yellow;
font-family: Georgia, serif;
font-weight: normal;
font-size: 26px;
border-bottom: 3px solid red;
}
h4 {
margin-bottom: 0;
color: orange;
text-shadow: 1px 1px 1px 1px yellow;
font-family: 'Segoe UI', Arial, sans-serif;
font-weight: normal;
font-size: 24px;
border-bottom: 3px solid orange;
}
h5 {
margin: 15px 0 10px 0;
background-color: rgb(255, 255, 255);
color: brown;
text-shadow: 1px 1px 1px 1px yellow;
font-size: 22px;
border-bottom: 3px solid brown;
}
h6 {
background-color: rgb(255, 255, 255);
color: Purple;
text-shadow: 1px 1px 1px 1px yellow;
font-size: 20px;
border-bottom: 3px solid violet;
}
/* Heading pseudo-element CSS */
.blog::before {
content: "BLOG: ";
}
.page::before {
content: "PAGE: ";
}
.thematic::before {
content: "THEMATIC: ";
}
.subjects::before {
content: "SUBJECTS: ";
}
.topic::before {
content: "TOPIC: ";
}
.post::before {
content: "POST: " ;
}
.part::before {
content: "PART: ";
}
.note::before {
content: "NOTE: " ;
}
.quote::before {
content: open-quote;
}
.quote::after {
content: close-quote;
}
.myIndex {
counter-increment: myIndex;
}
.myIndex::before {
content:counter(myIndex) "-";
}
font {
box-sizing: inherit;
vertical-align: inherit;
}
/* Wrapper class CSS */
.page-wrapper {
position: relative;
width: 100%; height: auto ;
margin: 0; padding: 0;
display: inline-block;
overflow: scroll;
background: #3366FF;
color: #996600;
text-shadow: 1px 1px 2px yellow;
font-family: Arial, Helvetica, sans-serif;
border-style: solid;
border-width: 1px;
border-color: lightgray;
border-image: initial;
border-radius: 0 0 0 0;
}
.normal-wrapper {
width: 100%;
margin: 0;
padding: 5px;
overflow: scroll;
background: #F7F7FF;
color: #996600;
text-shadow: 1px 1px 2px yellow;
font-family: Arial, Helvetica, sans-serif;
border-style: solid;
border-width: 2px;
border-color: lightgray;
border-image: initial;
border-radius: 0 0 5px 5px;
}
#page-heading {
position: relative;
margin-bottom: 40px;
padding: 18px 0px 30px;
overflow: hidden;
background-color: rgb(244, 244, 244);
border-style: solid;
border-width: 2px;
border-color: lightgray;
border-image: initial;
border-radius: 5px 5px 5px 5px;
border-bottom: 1px solid rgb(240, 240, 240);
border-top: 1px solid rgb(240, 240, 240);
}
.blog-black {
box-sizing: inherit;
margin: 5px; padding: 5px;
overflow: scroll;
background-color: rgb(0, 0, 0);color: rgb(255, 255, 255)!important;
}
.blog-padding {
box-sizing: inherit;
box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 2px 10px 0px;
padding: auto;
}
.blog-padding-16 {
box-sizing: inherit;
text-align: center !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 2px 10px 0px;
border-width: 2px;
border-style: solid;
border-color: lightgray;
border-image: initial;
border-radius: 0 0 5px 5px;
}
/* Content displayed CSS*/
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
p {
padding: 10px; margin: 10px;
background-color: rgb(255, 255, 255);
color: black;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 18px;
orphans: 2; widows: 2;
border-bottom: 3px solid #cc9900;
}
box {
width: auto; height: auto;
margin: 0; padding: 5px;
border-color: lightyellow;
border-width: 2px;
border-style: solid;
display: inline-block;
}
/* Section CSS */
section .section1 {
box-sizing: border-box;
width: 100%; height: auto;
background: url(https://res.cloudinary.com/dn4nxz7f0/image/upload/v1603170394/navigation_trong_suot/pexels-life-of-pix-7919_zydtt2.jpg);
background-size: cover;
}
section.section2{
padding: 150px;
}
/* Add a card effect for articles */
.card {
margin: 5px;padding: 5px;
background-color: white;
color: blue;
border-style: solid;
border-width: 2px;
border-color: blue;
border-image: initial;
border-radius: 5px 5px 5px 5px;
}
/* Symbolic image CSS */
.fakeimg {
background-color: #baa1cc;
width: auto;
padding: 5px;
}
/* Elements tags HTML CSS */
iframe {
box-sizing: inherit;
width: auto; height: 465px;
overflow: hidden;
border-width: 1px;
}
/* Show class area CSS */
/* Doctype tag style effect */
doctype {
position: relative;
width: 100%; height: auto ;
margin: 0;
padding: 0.01em 16px;
overflow: scroll;
display: block;
background : #3366FF;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqEdbCX40bnqEeUdpQ6y_MvkyQHT8zzWaQJe73ulg0UmoIpJdhPIIz93fdydAiauUfPuTZ9JV0U7A7kgx1ldbeypN2PNc4Jd-PeZW4HPtWNfcZPKaz1tng5HDLKytM2qmLcwpo4l3e8r1/s1600/IMG_ORG_1618233820984.jpeg');
color: yellowgreen;
font-weight: normal;
font-size: 24px;
text-align: center;
border-style: solid;
border-width: 2px;
border-color: blue;
border-image: initial;
}
doctype::before {
float: left;
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2ti1YRMnz-_6bw2-ctuqY-YogHwoKKmpLqG5sQAQ05Zd88yXND8_Zl8Q44LNY1ULD5_CH05zA1hiEp2SJpU1mZDPNgeTTAuPjOAFtntjPsgh1SUViAjDDZAGosE-OS56aNEAQ0Z-Baf-/s1600/IMG_ORG_1602348347737.jpeg');
}
/* Blog tag style effect */
/* Blog container CSS */
.blog-container {
width: 100%; height: auto ;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
border-width: 2px;
border-style: solid;
border-color: rgb(204, 204, 204); !important;
}
#blog {
width: 100%; height: auto ;
padding: 5px; padding-left: 15px;
padding-right: 15px;
background: #F3F8FF;
color: black;
text-shadow: 1px 1px 2px yellow;
font-family: 'PT Sans', 'Helvetica', 'Arial';
border-width: 2px;
border-style: solid;
border-radius: 5px 5px 0 0;
border-color: lightyellow;
}
/* Main division CSS */
#main {
padding: 5px; padding-left: 15px;
padding-right: 15px;
background: #F3F8FF;
color: black;
text-shadow: 1px 1px 2px yellow;
font-family: Georgia, serif;
text-align: left;
border-color: lightyellow;
border-width: 2px;
border-style: solid;
}
#main h1 {
padding: 10px;
background: rgb(255, 255, 255)!important;
color: green;
}
/* Main division area CSS */
/* Division id CSS */
#global navigation{ }
#sub navigation{ }
#page body{ }
#content{ }
#sidebar{ }
#local navigation{ }
/* Division class CSS */
.example {
padding: 8px 16px;
margin: 24px -16px;
box-sizing: inherit;
background-color: rgb(231, 233, 235);
font-family: Verdana, sans-serif;
font-size: 15px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
orphans: 2;
widows: 2;
box-shadow: none !important;
}
.code {
width: auto;
padding: 8px 12px;
box-sizing: inherit;
font-family: 'Source Code Pro', Menlo, Consolas, monospace;
background-color: rgb(255, 255, 255);
border-left-width: 4px;
border-left-style: solid;
border-left-color: rgb(4, 170, 109);
overflow-wrap: break-word;
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.green-btn {
padding: 8px 16px;
box-sizing: inherit;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer;
background-color: rgb(76, 175, 80);
color: rgb(255, 255, 255); border: none;
white-space: nowrap;
user-select: none;
margin-bottom: 16px !important;
border-radius: 5px;
}
.btn-left {
box-sizing: inherit;
background-color: rgb(4, 170, 109);
color: rgb(255, 255, 255);
border: 1px solid rgb(4, 170, 109);
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer; white-space: nowrap;
user-select: none;
float: left !important;
font-size: 17px;
border-radius: 5px;
}
.btn-right {
box-sizing: inherit;
background-color: rgb(4, 170, 109);
color: rgb(255, 255, 255);
border: 1px solid rgb(4, 170, 109);
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap;
user-select: none;
float: right !important;
font-size: 17px;
border-radius: 5px;
}
/* Page Layout Type CSS */
/* Top navigation bar CSS*/
/* Top-bar CSS */
#top-bar {
position: sticky;
background: #F1F1F1;
width: 100%; height: 25px;
padding: 2px; 2px; 2px; 2px;
border-style: solid;
border-width: 2px;
border-color: lightgray;
border-image: initial;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #D4D4D4;
}
.top-bar {
box-sizing: border-box;
background-color: rgb(44, 56, 64);
height: 1.5 rem;
line-height: 1.5 rem;
margin-bottom: 0px;
overflow: block;
position: relative;
color: rgb(34, 34, 34);
font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
font-size: 16px;
orphans: 2;
widows: 2;
background-position: initial initial;
background-repeat: initial initial;
}
/* End navigation bar CSS*/
/* end-bar CSS */
#end-bar {
position: sticky;
background: #F1F1F1;
width: 100%; height: 25px;
padding: 2px; 2px; 2px; 2px;
border-style: solid;
border-width: 2px;
border-color: lightgray;
border-image: initial;
border-radius: 0 0 5px 5px;
border-bottom: 1px solid #D4D4D4;
}
#top-color-splash {
width: 100%; height: 4px;
background: #B4B4B4;
}
.no-margin-top {
/* remove margin on things like headers */
margin-top: 0;
}
hr {
box-sizing: content-box;
height: 0px;
overflow: visible;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-top-color: rgb(238, 238, 238);
margin: 20px -16px;
font-family: Verdana, sans-serif;
font-size: 15px;
orphans: 2; widows: 2;
background-color: rgb(255, 255, 255);
}
/* Navbar CSS */
/* Navbar division CSS */
#navbar {
box-sizing: border-box;
height: 60px;
margin: 5px 0 0 0; padding: 0;
float: right;
display: inline-block;
list-style-type: none;
background: #F1F1F1;
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
color: #EB6361;
font-size: 16pt;
}
#navbar li {
display: inline-block;
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
padding: 0 10px 0 10px;
margin: 0;
text-decoration: none;
border-right: 2px solid #B4B4B4;
border-left: 2px solid #B4B4B4;
border-radius: 5px 5px 5px 5px;
}
#navbar li a:link.last-link {
border-right: 0px;
border-right: 2px solid #B4B4B4;
border-left: 2px solid #B4B4B4;
border-radius: 5px 5px 5px 5px;
}
#navbar li a:hover {
color: #B4B4B4;
}
/* Navbar class CSS */
.navbar {
overflow: hidden;
/* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Navbar link CSS */
.navbar a {
padding: 15px 15px;
float: left;
display: inline;
color: white;
text-align: center;
text-decoration: none;
}
.navbar a.right {
float: right;
}
/* Change color on hover/mouse-over */
.navbar a:hover {
/* Grey background color */
background-color: #ddd;
color: black;
}
@media screen and (max-width: 300px) {
.navbar a {
float: none;
width: 100%;}
}
/* Navigation bar CSS */
/* Navigation area CSS*/
nav {
box-sizing: border-box;
position: static;
width: 100%; height: auto;
margin: 0;
padding: 0 5px ; top: 0; left: 0;
float: left;
display: inline-block;
background: rgba(0,0,0,0.4);
text-align: left;
text-transform: uppercase;
list-style-type: none;
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
}
nav h1 {
margin: 10px; padding: 5px;
color: #fff;
text-align: left;
text-shadow: 1px 1px 2px yellow;
font-size: 24px;
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12),
0 8px 8px rgba(0,0,0,0.12),
0 16px 16px rgba(0,0,0,0.12);
border-bottom: 3px solid #fff;
}
nav ul {
width: 100%; height: 65px;
margin: 5px; padding: 5px;
display: inline-block;
overflow: scroll;
list-style-type: none;
background: rgba(0,0,0,0.4);
color: white;
text-align: left;
border-style: solid;
border-width: 1px;
border-color: lightgray;
border-radius: 5px 5px 5px 5px;
}
nav ul li {
position: relative;
width: 200px; height: 40px;
margin-left: 5px; padding: 5px;
float: left;
display: inline-block;
list-style-type: none;
background: lightblue;
line-height: 25px;
color: green;
text-shadow: 1px 1px 2px yellow;
font-size: 16px;
border-style: solid;
border-width: 1px;
border-color: #cc9900;
border-radius: 5px 5px 5px 5px;
}
nav ul li:hover {
background: lightgreen;
color: blue;
text-shadow: 1px 1px 2px yellow;
border-style: solid;
border-width: 1px;
border-color: lightpink;
border-radius: 5px 5px 5px 5px;
}
nav a {
text-decoration: none;
display: inline-block;
}
nav a:hover {
background: #F1F1F1;
color: #333;
}
nav ul li a {
box-sizing: border-box;
position: relative;
width: 100%; height: 40px;
margin: 5px; padding: 0 20px;
text-decoration: none;
display: inline;
background: lightgreen;
color: #EB6361;
text-shadow: 1px 1px 2px yellow;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
}
nav ul li a:before {
width: auto; height: 100%;
content: '';
position: absolute;
top: 0; left: 0;
background: #fff;
transform-origin: right;
z-index: -1;
transform: scaleX(0);
transition: transform 0.5s;
}
nav ul li a:hover{
background: blue;
color: #262626;
color: yellow;
text-shadow: 1px 1px 2px white;
}
nav ul li a:hover:before{
transform-origin: left;
transform: scaleX(1);
}
nav .brand {
width: 190px; height: auto;
margin: 10px; 0px; 0px; 0px;
padding: 5px;
float: left;
background: rgba(0,0,0,0.4);
line-height: 25px;
font-size: 16px;
border-style: solid;
border-width: 1px;
border-color: lightgray;
border-radius: 5px 5px 5px 5px;
}
nav .brand h1 {
margin: 0; padding: 0;
font-size: 14px;
color: #fff;
border-bottom: 3px solid #cc9900;
}
nav .brand ul {
margin: 0px; 0px; 0px; 0px;
background : #009688;
}
nav .brand ul li a {
width: 160px; height: 40px;
margin: 0; padding: 2px;
line-height: 25px;
font-size: 10px;
text-align: left;
color: #EB6361;
text-shadow: 1px 1px 2px yellow;
}
nav .brand ul li a:hover{
background: blue;
color: yellow;
text-shadow: 1px 1px 2px green;
}
@media all and (min-width: 800px) {
nav {
text-align:left;
-webkit-flex: 1 auto;
flex:1 auto;
-webkit-order:1;
order:1;}}
/* Navigation class CSS */
.nav {
width: auto;
overflow: hidden;
background-color: rgb(0, 0, 0) !important;
}
.nav ul {
padding: 0;
list-style-type: none;
}
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 800px) {
.nav {
text-align:left;
-webkit-flex: 1 auto;
flex:1 auto;
-webkit-order:1;
order:1;}}
/* The topnav container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Header/Blog Title CSS */
header {
padding: 1em;
clear: left;
background: black;
color: white;
text-shadow: 1px 1px 2px yellow;
font-family: Georgia, serif;
text-align: center;
border-style: solid;
border-width: 2px;
border-color: lightyellow;
border-radius: 0 0 0 0;
}
header h1 {
padding: 10px;
background: white;
color: #996600;
text-shadow: 1px 1px 1px 1px blue;
border-style: solid;
border-color: lightyellow;
border-width: 2px;
border-radius: 0 0 0 0;
border-bottom: 3px solid #cc9900;
}
#header {
width: 100%; height: auto ;
padding: 10px;
background-color: #58257b;
color: white;
text-align: center;
border-color: lightgray;
border-width: 2px;
border-style: solid;
}
#headerInner {
margin: 0px auto;
position: relative;
padding: 0px 20px;
background-color: #73AD21;
color: #F7F7FF;
text-shadow: 1px 1px 2px yellow;
}
/* Header area CSS */
.header {
width: 100%; height: auto;
padding: 15px;
background-color: #e9d8f4;
color: #58257b;
text-align: center;
border-color: lightyellow;
border-width: 2px;
border-style: solid;
border-radius: 0 0 0 0;
}
.header p {
background-color: Purple;
color: yellow;
font-size: 20px;
}
.header footer {
background: #ddd;
color: #58257b;
padding: 15px;
}
.sub-header {
box-sizing: border-box;
margin: 0px 0px 20px;
padding: 0px;
color: rgb(111, 111, 111);
font-weight: normal;
line-height: 1.4;
text-rendering: optimizelegibility;
font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
font-size: 1.25rem;
orphans: 2;
widows: 2;
background-color: rgb(255, 255, 255);
}
/* Footer CSS */
.footer {
padding: 20px;
margin-top: 20px;
background: #ddd;
text-align: left;
border-color: lightyellow;
border-width: 2px;
border-style: solid;
border-radius: 0 0 5px 5px;
}
/* Column container */
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.clearfix:after {
height :auto;
content: "";
display:inline-block;
clear:both;
}
/* Create two unequal columns that sits next to each other */
.row-1 {
display: flex;
flex-wrap: wrap;
border-color: lightgray;
border-width: 2px;
border-style: solid;
border-radius: 5px 5px 5px 5px;
}
/* Sidebar/left column */
.side {
flex: 30%;
padding: 20px;
background-color: #f1f1f1;
}
/* Main column */
.main {
flex: 70%;
padding: 20px;
background-color: white;
}
/* Responsive layout - when the screen is less than 00px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 00px) {
.row-1 {
flex-direction: column;}
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 25%;
background-color: #F3F8FF;
border-color: lightgray;
border-width: 2px;
border-style: solid;
border-radius: 5px 0 0 5px;
}
/* Right column */
.rightcolumn {
float: left;
width: 75%;
background-color: #F7F7FF;
border-color: lightgray;
border-width: 2px;
border-style: solid;
border-radius: 0 5px 5px 0;
}
/* Responsive layout - when the screen is less than 300px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 300px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;}
}
/* Create 3 unequal columns that floats next to each other */
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
border-color: lightgray;
border-width: 1px;
border-style: solid;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 300px) {
.column.side, .column.middle {
width: 100%;}
}
/* Create 3 equal columns that floats next to each other */
/* Create 3 equal columns that floats next to each other */
.column-3 {
float: left;
width: 33.33%;
border-color: lightgray;
border-width: 1px;
border-style: solid;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (300px wide or less) */
@media screen and (max-width: 300px) {
.column-3 {
width: 100%;}
}
/* Create 4 equal columns that floats next to each other */
.column-4 {
float: left;
width: 25%;
border-color: lightgray;
border-width: 1px;
border-style: solid;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (300px wide or less) */
@media screen and (max-width: 300px) {
.column-4 {
width: 100%;}
}
/* Article CSS */
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none;
/* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}
/* Dialog id CSS */
/* Division menu CSS */
#menu {
margin: 0; padding: 5px;
background: #1F568B;
text-align: left;
border-width: 2px;
border-style: solid;
border-color: lightyellow;
}
#menu ul {
width: 100%; height: 45px;
margin: 5px; padding: 5px;
list-style-type: none;
overflow: scroll;
background: rgba(0,0,0,0.4);
text-align: center;
border-width: 1px;
border-style: solid;
border-color: lightgray;
border-radius: 5px 5px 5px 5px;
}
#menu li {
position: relative;
width: 200px; height: 40px;
margin-left: 0;
float: left;
list-style-type: none;
display: inline-block;
background : #009688;
line-height: 25px;
border-radius: 5px 5px 5px 5px;
}
#menu li:hover {
/* change color on hover (mouseover) */
background: #F7F7FF;
color: #EB6361;
text-shadow: 1px 1px 1px 1px yellow;
}
#menu a {
text-decoration: none;
display: block;
color: #996600;
text-shadow: 1px 1px 2px yellow;
}
#menu a:hover {
background: #F1F1F1;
color: #333;
}
/* Dropdown Menu */
.sub-menu {
display: none;
position: absolute;
margin: 0; padding: 5px;
}
.sub-menu li {
width: auto;
background : #009688;
margin: 2px;
display: block;
margin-left: 0 ;
}
#menu li:hover .sub-menu {
margin: 10px 0 0 0; padding: 5px;
background: rgba(0,0,0,0.4);
line-height: 25px;
display: block;
}
Index page
A