@import url("/styles/reset.css");
/*
:The root container that encloses all other elements of a web page.
:The container that contains the metadata of a web page, such as its title, keywords, and descriptions.
:The container that contains the visible content of a web page, such as text, images, videos, and other elements.
:The container that contains the top section of a web page, typically used for branding, logos, and navigation menus.
:The container that contains the navigation links of a web page.
:The container that contains the main content of a web page.
:The container that contains an independent piece of content, such as a blog post, news article, or product review.
:The container that groups related content together, such as a group of articles or a series of blog posts.
:The container that contains content that is related to the main content but not essential to it, such as a sidebar or a call-to-action box.
:The container that contains the bottom section of a web page, typically used for copyright information, social media links, and contact information.
*/
/*EAWF COLOR SCHEME var(--black); TODO: Move to root.css */
:root{
--black:#000;
--white:#fff;
--red:#f00;
--orange:#ff9900;
--yellow:#ff0;
--green:#29cc10;
--blue:#00f;
--indigo:#4b0082;
--violet:#ee88ee;
--brown:#8b6914;
--eawf:#1493f3;
--navtx:var(--black);
--navlt:#;
--navdk:#;
--navbdr:#;
--navshdw:#;
--shadow:#eee;
--warnfg:var(--white);
--warnbk:var(--blue);
--alertfg:var(--orange);
--alertbk:var(--violet);
--alarmfg:var(--red);
--alarmbk:var(--violet);
--captchatx:var(--white);
--captchabg:var(--eawf);
--captchashdw:var(--shadow);
}
body{
margin:0px 10px;
padding:0px 10px;
color:#000;
background-color:#fff;
font-family:Arial,Tahoma,sans-serif;
font-size:14px;
line-height:20px;
overflow:scroll;
}
header{
position:relative;
height:90px;
}
nav{
margin:0px auto;
height:27px;
line-height:20px;
padding:0px 15px;
border:1px 1px 1px 1px solid #bfbfbf;
background-color:gray; /* For browsers that do not support gradients */
background-image:linear-gradient(to bottom, #e6e6fa, #bfbfbf);
display:block;
}
main{
position:relative;
margin:0px auto;
}
article{
float:left;
width:69%;
}
section{
}
aside{
float:right;
width:29%;
}
footer{
margin:10px auto;
padding:5px 0px;
background-color:#fff;
color:#444;
font-size:12px;
font-weight:bold;
text-align:center;
height:60px;
}
/* Header Adjustments */
header a:nth-of-type(1){
position:absolute;
top:0;
left:0;
padding:5px;
}
header a:nth-of-type(2){
position:absolute;
top:20px;
right:10px;
}
header p{
position:absolute;
font-size:19px;
color:#0050cc;
letter-spacing:1px;
text-shadow:1px 1px 1px #898989;
padding:5px;
bottom:0;
}
/* NAVIGATION */
/* LEVEL ONE */
ul.dropdown{
position:relative;
}
ul.dropdown li{
list-style-type:none;
font-weight:bold;
float:left;
background:transparent;
}
ul.dropdown a:hover{
color:#00f;
}
ul.dropdown li a{
display:block;
padding:3px 8px;
text-decoration:none;
color:#000;
text-shadow:-1px -1px 1px #eee;
border-right:1px #9f9f9f solid;
border-top:none;
border-left:none;
border-bottom:none;
}
ul.dropdown li.hover, ul.dropdown li:hover{
background:#b3b3b3 url('graphics/navTile.jpg') repeat-x;
position:relative;
}
/* LEVEL TWO */
ul.dropdown ul{
width:220px;
visibility:hidden;
position:absolute;
z-index:1;
top:100%;
left:0px;
}
ul.dropdown ul li{
font-weight:bold;
background:#b3b3b3;
list-style-type:none;
outline:1px solid #777;
float:none;
}
ul.dropdown ul li a{
border-right:none;
width:220px;
display:inline-block;
outline:none;
}
/* LEVEL THREE */
ul.dropdown ul ul{
width:220px;
visibility:hidden;
position:absolute;
z-index:1;
top:0px;
left:220px;
border-left:1px solid #000;
}
ul.dropdown li:hover > ul{
visibility:visible;
}
/* Right Side Navigation Items */
nav span{
font-weight:bold;
float:right;
vertical-align:middle;
text-transform:capitalize;
padding:3px 9px 3px 6px;
text-shadow:-1px -1px 0px #eee;
}
nav .bitcoin{
color:#000;
text-shadow:-1px -1px 1px #eee;
}
nav .bitcoin a{
color:#1493f3ff;
text-shadow:1px 1px 1px #eee;
}
nav .bitcoin a:hover{
color:#ff9900ff;
text-shadow:1px 1px 1px #eee;
}
nav .cart a:{
color:#1493f3;
text-shadow:-1px -1px 1px #eee;
}
nav .cart a:hover{
color:#1493f3;
text-shadow:1px 1px 1px #eee;
}
/* Footer */
/* Content Layout */
.col100{
margin:0px;
padding:0px 10px 0px 10px;
height:auto;
}
.fineprint{
font-size:x-small;
}
.voblogo{
margin:10px 10px 0px 5px;
width:20%;
display:block;
float:right;
box-shadow:5px 5px 5px #888;
border:1px solid;
border-radius:10px;
}
.voblogo img{
display:block;
margin:4px auto;
}
.voblogo p{
font-weight:bold;
font-style:italic;
}
.container{
margin:auto auto;
padding:10px 10px;
#width:fit-content;
}
.colLeft{
display:inline;
float:left;
#width:510px;
}
.colRight{
display:inline;
#width:510px;
float:left;
}
.col75{
float:left;
margin:0px;
padding:10px;
#width:75%;
height:auto;
display:table-cell;
}
.colHome{
margin:0px;
padding:0px 10px;
#width:fit-content;
display:table-cell;
}
.colHome a{
color:#0050cc;
}
.colHome p{
font-size:14px;
}
.colHome img{
background-color:#fff;
margin:8px;
#width:fit-content;
padding:3px;
box-shadow:1px 3px 3px 2px #999999;
}
.col2Div{
display:grid;
grid-template-columns:auto auto;
grid-gap:10px;
padding:10px;
}
.col2Div > div{
margin:auto auto;
text-align:left;
}
.col2Div > div > ul{
list-style-type:none;
text-align:left;
padding-left:15px;
}
/* Standard Formatting */
a{
text-decoration:none;
}
h1{
margin:0px;
padding:18px 0px 10px 0px;
text-align:center;
font-size:30px;
color:#0050cc;
text-shadow:2px 2px 2px #898989;
font-weight:bold;
}
h2{
font-weight:bold;
padding:10px 0px 5px 0px;
font-size:20px;
text-align:center;
color:#0050cc;
text-shadow:1px 1px 1px #898988;
}
h3{
margin:0px;
font-weight:bold;
padding:5px 0px;
font-size:15px;
text-align:left;
color:#0050cc;
text-shadow:3px 3px 4px #898988;
}
h4{
margin:0px;
padding:5px 0px 0px 10px;
color:#0050cc;
font-weight:bold;
font-size:14px;
font-style:italic;
}
h5{
margin:0px;
padding:5px 0px 0px 10px;
color:#0050cc;
font-weight:bold;
font-size:12px;
}
h6{
margin:0px;
padding:5px 0px 0px 10px;
color:#0050cc;
font-weight:bold;
font-size:10px;
}
hr{
border-top:1px solid #000;
}
img.centered{
display:block;
margin:auto auto;
}
p{
padding:0px 10px 5px 10px;
}
b{
color:#0050cc;
}
.motd{
margin:5px auto 10px auto;
background-color:whitesmoke;
border:2px solid #1493f3;
box-shadow:5px 5px 5px #888;
border-radius:10px;
padding:10px 15px;
font-weight:bold;
font-style:italic;
}
.photo{
margin:20px auto 20px auto;
box-shadow:10px 10px 5px #888;
}
.plan{
float:left;
margin:6px;
padding:5px;
width:174px;
}
.plan p{
padding:14px 0px 5px 0px;
}
.plan li{
display:list-item;
white-space:inherit;
font:14px/18px Arial,Tahoma,sans-serif;
padding:2px 0px 0px 0px;
position:relative;
list-style-position:outside;
list-style-type:disc;
margin:0px 0px 0px 14px;
}
a:link{
color:#0000ff;
font:bold Arial,Tahoma,sans-serif;
text-shadow:2px 2px 3px #898988;
}
a:visited{
color:#0000ff;
font:bold Arial,Tahoma,sans-serif;
text-shadow:2px 2px 3px #898989;
}
a:hover{
color:#ff00ff;
font:bold Arial,Tahoma,sans-serif;
text-shadow:2px 2px 4px #898989;
}
a:active{
text-shadow:0px 0px 0px #fff;
}
.center{
text-align:center;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
.alert{
color:#ff0000;
font:bold 14px Arial,Tahoma,sans-serif;
}
.price{
text-align:left;
font-weight:bold;
}
ul li{
list-style-type:square;
}
ul ul li{
list-style-type:circle;
}
.ulcontact li{
list-style-type:disc;
margin-left:35px;
}
.ulhosting li{
list-style-type:disc;
margin-left:40px;
}
.ulhosting ul li{
list-style-type:disc;
margin-left:30px;
}
.ulsecurity li{
list-style-type:disc;
margin-left:30px;
}
ol, ol ol, ol ol ol{
list-style-type:decimal;
}
ol li{
list-style-type:decimal;
}
.rules{
margin:5px auto;
padding:5px;
width:30%;
border:1px #000 solid;
border-radius:5px;
font-size:12px;
line-height:normal;
}
#printme{
float:right;
background:url('/graphics/printme.gif') no-repeat;
}
#printme a{
font-size:12px;
padding:0px 0px 0px 17px;
text-decoration:none;
vertical-align:middle;
outline:none;
}
a.more{
font-size:8px;
outline:none;
}
/* ACCORDION */
.accordion{
padding-bottom:5px;
}
.accordion-header{
cursor:pointer;
margin:10px;
padding:1px 24px;
border:1px solid #057fd0;
border-radius:5px;
text-align:left;
text-shadow:gray -1px -1px;
font-size:15px;
font-weight:bold;
color:#fff;
background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
background-color:#1493f3;
box-shadow:3px 3px 3px #888;
}
.accordion-content{
display:none;
margin-bottom:5px;
margin-left:10px;
padding:5px;
border:1px solid;
border-radius:10px;
box-shadow:5px 5px 5px #888;
}
.accordion-content ul{
padding-left:40px;
}
/* PAGE MESSAGES */
.pagemsg{
margin:10px auto 5px auto;
padding:6px 0px 0px 0px;
width:fit-content;
background-color:#efefef;
border-radius:5px;
box-shadow:5px 5px 5px #888;
border:1px solid #000;
font:16px Arial,Tahoma,sans-serif;
font-weight:bold;
text-align:center;
}
/* FORMS */
form{
margin:10px auto;
}
form.contact{
width:31%;
}
form.custinvoice{
width:31%;
}
form.login{
width:30%;
}
.form-group{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}
.form-group label{
flex:1;
text-align:right;
margin-right:4px;
width:29%;
}
.form-group input, select, textarea, checkbox{
flex:2;
margin:0px 5px;
width:70%;
border:1px solid black;
border-radius:5px;
background-color:#fff;
}
fieldset{
margin:0px;
padding:5px 25px 10px 20px;
border:2px #000 solid;
border-radius:5px;
box-shadow:5px 5px 5px #888;
}
fieldset p{
display:table-row;
}
legend{
padding:0px 10px;
font-weight:bold;
text-align:left;
color:#0000ff;
}
.formfield *{
vertical-align:top;
}
label{
display:table-cell;
vertical-align:top;
text-align:right;
padding-left:15px;
color:blue;
font-weight:bold;
width:auto;
}
label:after{
content:':';
}
input, select, textarea, checkbox{
margin:3px 4px;
padding-left:5px;
border:1px solid #000;
border-radius:4px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
img.captcha{
display:block;
margin:8px auto 8px auto;
border:2px solid #eee;
border-radius:4px;
box-shadow:1px 1px 8px #000;
}
/* BUTTONS */
.buttons{
display:block;
margin:3px auto 3px auto;
}
button,
input[type="submit"],
input[type="reset"]{
margin:3px;
padding:3px 5px;
vertical-align:middle;
text-align:center;
font-weight:bold;
border-radius:5px;
background-color:whitesmoke;
box-shadow:2px 2px 3px #888;
}
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover{
text-shadow:1px 1px 1px #888;
background-color:#1493f3;
}
button:active,
input[type="submit"]:active,
input[type="reset"]:active{
box-shadow:0px 0px 0px #fff;
}
button.positive{
color:green;
}
button.negative{
color:red;
}
button img, button span{
vertical-align:middle;
}
button.cart_view{
position:relative;
float:right;
top:-14px;
margin:5px 0px 0px 0px;
padding:3px 5px 4px 5px;
font-weight:bold;
border-radius:5px;
box-shadow:2px 2px 3px #888;
}
button.cart_view:hover{
background-color:#1493f3;
}
button.cart_view img{
float:left;
margin:0px 6px 0px 0px;
}
button.cart_add{
position:relative;
float:right;
top:-5px;
right:-10px;
padding:3px 5px 4px 5px;
font-weight:bold;
border-radius:5px;
box-shadow:2px 2px 3px #888;
}
button.cart_add:hover{
background-color:#1493f3;
}
button.cart_add img{
float:left;
margin:0px 6px 0px 0px;
}
button.cart_del{
position:relative;
float:right;
top:0px;
padding:3px 5px 4px 5px;
font-weight:bold;
border-radius:5px;
box-shadow:2px 2px 3px #888;
}
button.cart_del:hover{
background-color:#1493f3;
}
button.cart_del img{
float:left;
margin:0px 6px 0px 0px;
}
table{
margin:10px auto;
//width:70%;
}
tr{
margin:0px 5px;
}
th{
color:white;
font-weight:bold;
background-color:var(--eawf);
// border:1px solid var(--black);
padding:3px 20px;
vertical-align:top;
}
td{
border:1px solid var(--black);
text-align:center;
padding:3px 20px;
}
td button, td textarea, td input, td select{
padding: 3px 0px;
box-sizing: border-box;
width: 100%;
}