/**
* Main CSS Stylesheet
*
* @copyright Copyright © 2009 YiZRi, LLC
* @version $Id: stylesheet.css,v 1.8 2009/12/10 17:17:16 root Exp $
*
* Excellent CSS tutorial: http://www.echoecho.com/csslayers.htm
* Another CSS tutorial: http://www.yourhtmlsource.com/stylesheets/csslayout.html
* Good XHTML 1.0 reference: http://www.w3schools.com/tags/default.asp
* Web-safe fonts: http://www.fonttester.com/help/list_of_web_safe_fonts.html
*
* Debug tip: if something doesn't work for some reason, check typos such as missing px, pt, colon, comma, etc.
*
* 3 types of selectors: HTML, Class, ID
* HTML - redefine built-in tags
* Class - define styles independently of built-in tags
* ID - define styles for objects with unique ID (typically layers)
* The general idea is to have layers that are NOT absolute in position, since the browser window can be any size.
* The intention is to horizontally center bottom layer, then within it create a background layer that has absolute position.
* The rest could be flexible? see http://css-tricks.com/absolute-positioning-inside-relative-positioning/
*/
/********************************* HTML SELECTORS ********************************/
body {
text-align: center; /* fix IE6 bug - see http://www.yourhtmlsource.com/stylesheets/csslayout.html */
color: #000000; /* black */
background-color: white; /* pure white */
/* background-image: url(images/full_page_background.gif); */
/* background-repeat: no-repeat; */
/* background-position: center top; */ /* 75px 75px; */
font-family: Arial,Helvetica,sans-serif;
font-size: small; /* or 10pt; or 62.5%; */
/* line-height: normal; */
/* margin: 0;
margin-bottom:10px; */
}
hr {
color: #d5d6e0;
width: 720px;
height: 1px;
}
ul {
margin-left: 15px;
padding: 0em 0em;
/* list-style-type: none;
text-align: center; */
}
/* CONTEXT DEPENDANT SELECTOR: no border only when both and ![]()
apply.
Simply separate the contextual tag from the tag with a space */
a img {
border: none;
}
/********************************* CLASS SELECTORS ********************************/
/*warnings, errors, messages*/
.pureYellowMarker {
background-color: #ffff00; /* pure yellow */
color: #000000; /* black */
}
.fluorescentGreenMarker {
background-color: #ccff00; /* fluorescent green */
color: #000000; /* black */
}
/* misc */
.back {
float: left;
}
.forward {
float: right;
}
.clearBoth {
clear: both;
}
/* YZR theme colors */
.yzr_grey_logo {
color:#d5d6e0;
}
.yzr_grey_bg {
color:#d6d7e1;
}
.yzr_black {
color:#000000;
}
.yzr_red_bg {
color:#d72f20;
}
.yzr_red_logo {
background:#000000;
color:#c7332b;
}
.logofont {
font-family: 'Times New Roman', Times, serif;
font-size: 12pt; /* or 10pt; or 62.5%; */
font-style: italic;
font-weight: bold;
}
/********************************* ID SELECTORS ********************************/
/* ID selectors are most widely used with layers, since layers are always defined with a unique ID. */
#layer1 {
position:relative;
z-index:1;
width: 720px;
margin: 0px auto;
}
/* wrappers - page or section containers */
#mainWrapper { /* currently unused */
background-color: #ffffff; /* pure white */
text-align: left;
width: 870px;
vertical-align: top;
border:none;
position:relative;
}
#header {
text-align: center;
}
#about-text {
position:relative;
top: 64px;
left: -96px;
z-index:2;
width: 280px;
margin: 0px auto;
text-align: left;
}
#products-text {
position:relative;
top: 64px;
left: -96px;
z-index:2;
width: 280px;
margin: 0px auto;
text-align: left;
}
#support-text {
position:relative;
top: 64px;
left: -112px;
z-index:2;
width: 280px;
margin: 0px auto;
text-align: left;
}
#contact-us {
position:relative;
top: 64px;
left: -112px;
z-index:2;
width: 280px;
margin: 0px auto;
text-align: left;
}
#footer {
position: absolute;
left: 0px;
top: 720px;
z-index:0;
}
/*
* Theme graphic and mid-page buttons (javascript enhanced)
* Note that the "absolute" position is "relative" to layer 1
*/
#crescent_n_sail {
border: 0;
position: absolute;
left:0px;
z-Index:0
}
#imgRolloever {
border: 0;
position: absolute;
top: 284px;
left:96px;
z-Index:0
}
#imgAbout, #imgProducts, #imgSupport, #imgContact {
border: 0;
position: absolute;
z-Index:0
}
#imgAbout {
top: 280px;
left:425px;
}
#imgProducts {
top: 330px;
left:431px;
}
#imgSupport {
top: 380px;
left:441px;
}
#imgContact {
top: 430px;
left:438px;
}
/*
* Add a Floating Twitter Follow Me/US Button to your website
* http://www.computingunleashed.com/2009/07/easily-add-floating-twitter-follow-meus.html
*/
#twitter-follow {
border: 0;
position: fixed;
top: 200px;
right:0;
}
#facebook-fan {
border: 0;
position: fixed;
top: 320px;
right:0;
}
/* Read more: http://www.computingunleashed.com/2009/07/easily-add-floating-twitter-follow-meus.html#ixzz0VGIwR2YE */
/*************** Snazzy Borders ****************
* starting with a dot (.) means the selector's tag name is ommitted and selector is used by ALL HTML elements that have the class.
* starting with a pound (#) means and ID selector (match element with an id attribute)
*/
.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #D7D7D7;
}
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background: transparent;
width:240px;
float:left;
margin:0 0;
padding: 10px 0;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #D7D7D7;
border-right:1px solid #D7D7D7;
}
.xb1 {
margin:0 5px;
background:#D7D7D7;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
display:block;
border:0 solid #D7D7D7;
border-width:0 1px;
height:auto;
}
* html .xboxcontent {
height:1px;
}
/********************************* BUTTONS ********************************/
/* IMG BUTTONS */
.cssbutton a {
border: 1px solid rgb(0, 0, 0);
padding: 0px 2px 2px;
margin-top: 10px;
display: block;
width: 100px;
height: 20px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 14px;
background-color: rgb(239, 239, 239);
/*
display:block;
background: url(../buttons/english/button_big_orange.gif) 0 0 no-repeat;
border: none;
width: 120px;
height: 50px;
font: bold italic 16px arial;
color:#ffffff;
text-align: center;
vertical-align: middle;
margin: 0 0 0 0;
padding:15px 0px 0px 0px;
text-decoration: none;
*/
}
.cssbutton a:hover {
color: #000000;
}
.cssbutton a:active, .cssbutton a:focus {
/* padding:0; */
font-weight: bold;
}