483 lines
9.9 KiB
CSS
483 lines
9.9 KiB
CSS
|
/* CSS Document */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* CSS Reset */
|
||
|
|
html, body, div, span, applet, object, iframe,
|
||
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||
|
|
a, abbr, acronym, address, big, cite, code,
|
||
|
|
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||
|
|
small, strike, strong, sub, sup, tt, var,
|
||
|
|
dl, dt, dd, ol, ul, li,
|
||
|
|
fieldset, form, label, legend,
|
||
|
|
table, caption, tbody, tfoot, thead, tr, th, td {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
border: 0;
|
||
|
|
outline: 0;
|
||
|
|
font-weight: inherit;
|
||
|
|
font-style: inherit;
|
||
|
|
font-size: 100%;
|
||
|
|
font-family: inherit;
|
||
|
|
//vertical-align: baseline;
|
||
|
|
}
|
||
|
|
/* remember to define focus styles! */
|
||
|
|
:focus {
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
line-height: 1;
|
||
|
|
color: black;
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
ol, ul {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
/* tables still need 'cellspacing="0"' in the markup */
|
||
|
|
table {
|
||
|
|
border-collapse: separate;
|
||
|
|
//border-spacing: 0;
|
||
|
|
}
|
||
|
|
caption, th, td {
|
||
|
|
text-align: left;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
blockquote:before, blockquote:after,
|
||
|
|
q:before, q:after {
|
||
|
|
content: "";
|
||
|
|
}
|
||
|
|
blockquote, q {
|
||
|
|
quotes: "" "";
|
||
|
|
}
|
||
|
|
/* End of CSS Reset */
|
||
|
|
|
||
|
|
|
||
|
|
body {text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2, h3, h4, h5, h6, p {
|
||
|
|
color: #414141;
|
||
|
|
color: #333333;
|
||
|
|
clear: left;
|
||
|
|
font: 100% Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
//padding-left: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 280%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
p
|
||
|
|
{
|
||
|
|
font-size: 130%;
|
||
|
|
text-align: center;
|
||
|
|
padding: 8px;
|
||
|
|
color: #585858;
|
||
|
|
color: #424242;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#main-logo
|
||
|
|
{
|
||
|
|
padding-top: 4em;
|
||
|
|
padding-bottom: 2em;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 10;
|
||
|
|
overflow:auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#TextLogo
|
||
|
|
{
|
||
|
|
font-family: Verdana, Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
font-size: 800%;
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
font-family: 'intro_rust_gbase_2_line', Arial, sans-serif;
|
||
|
|
|
||
|
|
}
|
||
|
|
#TextLogo a
|
||
|
|
{
|
||
|
|
text-decoration: none;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#MyNav {
|
||
|
|
//position: fixed;
|
||
|
|
top: 0;
|
||
|
|
width: 100%; /* this makes the whole thing show up centered */
|
||
|
|
//height: auto;
|
||
|
|
overflow: auto;
|
||
|
|
text-align: center;
|
||
|
|
//font: 100% Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
font-family: 'Karla', Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
padding-top: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
//background-color: #414141;
|
||
|
|
//background-color: #333333;
|
||
|
|
z-index: 100;
|
||
|
|
letter-spacing: .1em;
|
||
|
|
background-color: #CCCCCC;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#MyNav a, #MyNav a:link, #MyNav a:visited {
|
||
|
|
font-size: .9em;
|
||
|
|
line-height: 1.8em;
|
||
|
|
padding: 5px 10px;
|
||
|
|
color: white; //#ededed;
|
||
|
|
color: #333333;
|
||
|
|
color: white;
|
||
|
|
//color: rgba(256, 256, 256, .8);
|
||
|
|
text-decoration: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#MyNav ul li { display: inline; font-size: 150%; }
|
||
|
|
|
||
|
|
|
||
|
|
#MyNav ul li {
|
||
|
|
text-decoration: none;
|
||
|
|
//padding: .2em 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#CartItems {
|
||
|
|
//position: fixed;
|
||
|
|
|
||
|
|
// Center it
|
||
|
|
width: 700px ;
|
||
|
|
margin-left: auto ;
|
||
|
|
margin-right: auto ;
|
||
|
|
|
||
|
|
top: 0;
|
||
|
|
width: 100%; /* this makes the whole thing show up centered */
|
||
|
|
//height: auto;
|
||
|
|
overflow: auto;
|
||
|
|
text-align: center;
|
||
|
|
//font: 100% Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
font-family: 'Karla', Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
padding-top: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
//background-color: #414141;
|
||
|
|
//background-color: #333333;
|
||
|
|
color: white;
|
||
|
|
z-index: 100;
|
||
|
|
letter-spacing: .1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#CartItems a, #CartItems a:link, #CartItems a:visited {
|
||
|
|
font-size: .9em;
|
||
|
|
line-height: 1.8em;
|
||
|
|
padding: 5px 10px;
|
||
|
|
color: white; //#ededed;
|
||
|
|
color: #333333;
|
||
|
|
color: white;
|
||
|
|
//color: rgba(256, 256, 256, .8);
|
||
|
|
text-decoration: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#AdSection
|
||
|
|
{
|
||
|
|
//position: fixed;
|
||
|
|
top: 0;
|
||
|
|
width: 100%; /* this makes the whole thing show up centered */
|
||
|
|
//height: auto;
|
||
|
|
overflow: auto;
|
||
|
|
//text-align: center;
|
||
|
|
//font: 100% Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
font-family: 'Karla', Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
padding-top: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
//background-color: #414141;
|
||
|
|
//background-color: #333333;
|
||
|
|
color: white;
|
||
|
|
z-index: 100;
|
||
|
|
letter-spacing: .1em;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
#AdSection img
|
||
|
|
{
|
||
|
|
border: 1px solid grey;
|
||
|
|
}
|
||
|
|
|
||
|
|
#AdSection td
|
||
|
|
{
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#AdSection h2
|
||
|
|
{
|
||
|
|
//font-family: 'intro_head_rbase', Arial, sans-serif;
|
||
|
|
color: black;
|
||
|
|
margin: auto;
|
||
|
|
width: 60%;
|
||
|
|
//border: 1px solid grey;
|
||
|
|
padding: 10px;
|
||
|
|
right: 0px;
|
||
|
|
font-size: 80%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#AdSection h3
|
||
|
|
{
|
||
|
|
font-size: 120%;
|
||
|
|
color: black;
|
||
|
|
margin: auto;
|
||
|
|
width: 60%;
|
||
|
|
border: 3px solid #73AD21;
|
||
|
|
padding: 10px;
|
||
|
|
right: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#AdSection h1
|
||
|
|
{
|
||
|
|
font-size: 220%;
|
||
|
|
color: black;
|
||
|
|
margin: auto;
|
||
|
|
width: 60%;
|
||
|
|
border: 1px;// solid grey;
|
||
|
|
padding: 10px;
|
||
|
|
right: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#AdSection a, #AdSection a:link, #AdSection a:visited {
|
||
|
|
font-size: .9em;
|
||
|
|
line-height: 1.8em;
|
||
|
|
padding: 5px 10px;
|
||
|
|
color: white; //#ededed;
|
||
|
|
color: #333333;
|
||
|
|
color: white;
|
||
|
|
//color: rgba(256, 256, 256, .8);
|
||
|
|
text-decoration: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#AdSection ul li { display: inline; font-size: 150%; }
|
||
|
|
|
||
|
|
|
||
|
|
#AdSection ul li {
|
||
|
|
text-decoration: none;
|
||
|
|
//padding: .2em 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#ViewCart
|
||
|
|
{
|
||
|
|
text-align: right;
|
||
|
|
font-family: 'intro_head_rbase', Arial, sans-serif;
|
||
|
|
padding-right: 50px;
|
||
|
|
padding-right: 2em;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
#ViewCart a
|
||
|
|
{
|
||
|
|
font-size: 1.5em;
|
||
|
|
line-height: 1.8em;
|
||
|
|
color: white;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#banner {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
/*height: 150px; */
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#BottomList
|
||
|
|
{
|
||
|
|
align-self: center;
|
||
|
|
top: 0;
|
||
|
|
width: 100%; /* this makes the whole thing show up centered */
|
||
|
|
//height: auto;
|
||
|
|
text-align: center;
|
||
|
|
//font: 100% Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
font-family: 'Karla', Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
padding-top: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
//background-color: #333333;
|
||
|
|
z-index: 100;
|
||
|
|
letter-spacing: .1em;
|
||
|
|
overflow:auto;
|
||
|
|
margin-left:auto;
|
||
|
|
margin-right:auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#BottomList a, #BottomList a:link, #BottomList a:visited {
|
||
|
|
font-size: .9em;
|
||
|
|
line-height: 1.8em;
|
||
|
|
padding: 5px 10px;
|
||
|
|
color: white; //#ededed;
|
||
|
|
color: #333333;
|
||
|
|
//color: rgba(256, 256, 256, .8);
|
||
|
|
text-decoration: none;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#BottomList ul li { font-size: 100%; }
|
||
|
|
|
||
|
|
|
||
|
|
#BottomList ul li {
|
||
|
|
text-decoration: none;
|
||
|
|
padding: .2em 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#ProductDescriptionArea
|
||
|
|
{
|
||
|
|
text-align: center; /* centers the contents in a cell */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#ImagesAndDescription h2, #ImagesAndDescription p, #ImagesAndDescription a
|
||
|
|
{
|
||
|
|
color: white;
|
||
|
|
font-size: 150%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#ImagesAndDescription a
|
||
|
|
{
|
||
|
|
font-family: 'Karla', Calibri, Verdana, Helvetica, Arial, sans-serif;
|
||
|
|
padding-top: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
font-size: 150%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#ImagesAndDescription table
|
||
|
|
{
|
||
|
|
margin-left:auto; /* center the table */
|
||
|
|
margin-right:auto; /* center the table */
|
||
|
|
}
|
||
|
|
|
||
|
|
#vert-space
|
||
|
|
{
|
||
|
|
block; padding-top: 5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#imageContainer {overflow:auto;margin-left:auto; margin-right:auto;background-color: #ffffff; }
|
||
|
|
#catContainer {float:left;padding-top:15px;padding-bottom:15px;background-color: #ffffff;}
|
||
|
|
#catContainer img
|
||
|
|
{
|
||
|
|
border: 1px solid grey;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width : 480px) {
|
||
|
|
#imageContainer {width:95%;}
|
||
|
|
#catContainer {width:100%;}
|
||
|
|
#TextLogo {font-size: 300%;}
|
||
|
|
h3 {font-size: 160%;}
|
||
|
|
#MyNav ul li { display: block;}
|
||
|
|
#body {background-size: 150%;}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@media only screen and (min-width : 700px) and (max-width : 1024px) {
|
||
|
|
h3 {font-size: 160%;}
|
||
|
|
}
|
||
|
|
@media only screen and (min-width : 481px) and (max-width : 1024px) {
|
||
|
|
#imageContainer {width:95%;}
|
||
|
|
#catContainer {width:50%;height:240px;}
|
||
|
|
#TextLogo {font-size: 400%;}
|
||
|
|
}
|
||
|
|
@media only screen and (min-width : 1025px) {
|
||
|
|
#imageContainer {width:95%;}
|
||
|
|
#catContainer {width:33%;height:340px;}
|
||
|
|
h3 {font-size: 160%;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width : 640px) {
|
||
|
|
#catContainer {height:300px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width : 890px) {
|
||
|
|
#catContainer {height:360px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width : 1024px) {
|
||
|
|
#catContainer {height:330px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width : 1200px) {
|
||
|
|
#catContainer {height:400px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width : 1700px) {
|
||
|
|
#catContainer {height:450px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width : 2000px) {
|
||
|
|
#catContainer {height:520px;}
|
||
|
|
}
|
||
|
|
@media only screen and (min-width : 2400px) {
|
||
|
|
#catContainer {height:620px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
#BottomContainer {width:600px;margin-right:auto;margin-left:auto;text-align:center;}
|
||
|
|
#BottomDetail {float:left;width:200px;text-align:center;}
|
||
|
|
|
||
|
|
@media only screen and (max-width : 600px) {
|
||
|
|
#BottomContainer {width:100%;}
|
||
|
|
#BottomDetail {width:100%;padding-top:10px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* product specific stuff */
|
||
|
|
|
||
|
|
#productContainer {overflow:auto;margin-left:auto; margin-right:auto;background-color: #ffffff;font-family: Verdana, Calibri; }
|
||
|
|
|
||
|
|
#productViewer {border: 1px solid grey;padding:15px;margin:10px;}
|
||
|
|
|
||
|
|
#productAction {border: 1px solid grey;padding:15px;margin:10px;}
|
||
|
|
|
||
|
|
#productDetails {border: 1px solid grey;padding:15px;margin:10px;text-align:left;color:grey;font-size:smaller;}
|
||
|
|
|
||
|
|
#action_detail {display:none;}
|
||
|
|
|
||
|
|
._button {width: 100%;background-color: #599197;font-size: 16px;border-radius: 10px;padding: 10px;border: none;font-family: verdana;font-weight: bold;color: white;}
|
||
|
|
|
||
|
|
._list {list-style: circle;list-style-position: inside;white-space: pre-line;}
|
||
|
|
|
||
|
|
._links {color:grey;font-size:smaller;}
|
||
|
|
|
||
|
|
._dropdown {width:80%;color:grey;height:25px;}
|
||
|
|
|
||
|
|
@media only screen and (min-width : 800px) {
|
||
|
|
#productAction {width:225px;float:right;}
|
||
|
|
#productViewer {margin-right:280px;}
|
||
|
|
#action_detail {display:block;}
|
||
|
|
}
|
||
|
|
|
||
|
|
#videoPanel {border: 1px solid grey; padding:15px; display:inline-block; margin:auto; width:45%; overflow:hidden;}
|
||
|
|
|
||
|
|
@media only screen and (max-width : 715px) {
|
||
|
|
#videoPanel {width:90%;}
|
||
|
|
.vidDetails > p { font-size:12px; }
|
||
|
|
}
|