/* Cascading Style Sheet for okokok.org. */
/* This Cascading Style Sheet (CSS) file controls the page layout and
the styles of your website. */
/* Comments. This line is an example of a "comment" in a CSS file. A
comment is a note within the code, or a part of code you don't want to
be interpreted by the computer, which is set within special
characters. The special characters tell the computer, "This is a
comment, not part of the code. Ignore everything that follows me until
the closing comment characters." Different computer programming
languages use different comment characters. In html, the special
comment characters are different than for CSS. */
/* The best way to learn is to "comment out" a property setting, then
replace it with something else, and see what happens. Follow the
syntax patterns. Only change one thing at a time, then save, and
refresh the page in your browser to see the effect. If you don't like
the change, then undo or delete it, and uncomment the original to
restore things the way they were. */
/* If you are going to make several changes, then save a backup copy
first, so you can experiment without fear. If you are going to make
many changes, then also save backup copies as you go. "index1.php,
index2.php, index3.php, etc." */
/* Here's an excellent tutorial for learning CSS. They explain things
very well, and the site includes a terrific Search engine to reference
information such as
definitions. http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html
*/
/* - Mary, Dec 20, 2005 */
/* This controls the tag on all of the site's pages. Think of
as the default setting, especially for fonts. */
body {
background-color: #9b2525;
font-family: arial, helvetica, sans-serif;
font-size: 1.0em;
/* text-align: left; */
color: #333333;
} /* Closing angle bracket for the body rule. Each rule is closed like this. */
/* The following link selectors control the color and underlines,
i.e., text-decoration, of the site links. These are the defaults,
which are overridden later in the CSS to achieve different effects for
the navbox and footer divs, etc. */
a:link {
color: #77390c;
text-decoration: none;
}
a:visited {
color: #77390c;
text-decoration: none;
}
a:hover, a:active {
color: #774119;
text-decoration: none;
}
/* The following element selectors control the color, size, fonts, etc. for
the first three levels of headers. These are the defaults that will be
used unless you specify differently further down in the CSS. */
/* Heading level 1. */
h1 {
/* background-image: url(images/h1-background.jpg);
background-repeat: no-repeat; */
color: #2285a4;
font: lucida, arial, sans-serif;
font-size: 1.2em;
font-weight: bold;
/* padding: 0px 0px 5px 10px;*/
}
/* Heading level 2. */
h2 {
color: #026f90;
font: 1.0em lucida, arial, sans-serif;
font-weight: bold;
margin: 10px 0 20px 0;
padding-top: 10px;
padding-bottom: 0px;
}
/* Links within heading 2 are not underlined. */
h2 a { text-decoration: none; }
/* Heading level 3. */
h3 {
color: #02495f;
font: 1.0em lucida, arial, sans-serif;
font-weight: bold;
margin-top: 0;
padding-top: 15px;
}
/* Unordered, or bulleted, list. */
ul li {
line-height: 1.3em;
list-style-type: none;
color: #434653;
}
/* Definition list. Used in faq.php. */
dl {
font-size: 1.0em;
line-height: 1.5em;
color: #000000;
}
dl dt {
background-color: #d3e6ed;
padding-left: 5px;
color: #024a62;
font-weight: bold;
}
dl dd {
margin-top: 8px;
margin-bottom: 10px;
}
/* The following statements define the layout of the site (header,
footer, navigation, contents, etc.). Think of each "division",
ex. #container, as a box. */
/* The #container division holds everything else. */
/* TIP: To see the outline of the #container division, change the
background-color to #ff66ff; Changing the background-color is a great
way to see what you're doing when developing CSS. It helps you see the
boxes more clearly. */
#container {
margin: 0em auto;
width: 800px;
background-image: url(images/container-background.jpg);
background-repeat: repeat;
background-color: #fff4ce;
border: 1px solid #e55f01;
}
/* The header. Header contents are stored in header.php. */
#header {
/* height: 125px;
margin: 0px 20px 0px 220px;
border: 0; */
height: 180px;
}
#header img {
border: 0px;
}
/* The navigation box. The links are stored in navbox.php. */
#navbox {
display: block;
float: left;
/* background-image: url(images/navbox-background-01.jpg);
background-repeat: no-repeat; */
/* border: 1px solid #ff66ff; */
color: #00122f;
font-size: .8em;
/* font-weight: bold; */
padding-left: 0px;
line-height: 1.1em;
width: 195px;
}
#navbox p {
color: #00456d;
padding-top: 20px;
text-align: center;
}
#navbox a:link, #navbox a:visited {
display: block;
border-bottom: solid 1px #d4e3e6;
color: #00358c;
padding: 5px 3px 5px 15px;
}
#navbox a:hover {
background-color: #e2ebea; /* Lt. turquoise */
color: #ab5400; /* Burnt orange */
}
#navbox a:active {
background-color: #fff8ed;
color: #ab5400; /* Burnt orange */
text-decoration: none;
}
#navbox ul {
list-style-type: none;
margin-left: 15px;
}
#navbox li {
padding-bottom: 10px;
}
#navbox li a:hover {
background-color: #fff4ce; /* Lt. cream */
}
#navbox img {
border: 0px;
}
/* The contents hold the main content section of each page. Override
the body and container settings here. */
#contents {
margin-bottom: 30px;
margin-left: 200px;
padding-right: 20px;
padding-left: 20px;
}
#contents p {
line-height: 1.55em;
text-align: left;
}
#contents ul {
list-style-type: disc;
text-align: left;
margin-top: 10px;
margin-left: 20px;
}
#contents ul li {
/* display: inline; */
padding-left: 17px;
}
#contents ul li a {
text-decoration: none;
}
#contents ol {
list-style-type: decimal;
}
#contents ol li {
display: list-item;
margin: 0 50px 20px 20px;
}
#contents img {
border: 0; /* No border around image links in the contents. */
}
/* This section contains the gallery rules. These are used in pages
that display full size images that are opened from a thumbnail or
from a link. String several of these pages together for a gallery or
an illustration sequence. */
/* Main page container for galleries.*/
#container-gallery {
margin: 0em auto;
width: 800px;
background-image: url(images/container-background.jpg);
background-repeat: repeat;
text-align: left;
background-color: #fff4ce;
border: 1px solid #e55f01;
}
/* Main gallery container. */
#gallery {
/* border: 1px solid #ff66ff; */
height: 800px;
/* background-color: #ffcb7a; */
}
#gallery h1 {
color: #024a62;
/* background-color: #d3e6ed; */
/* background-image: none; */
font-family: "Century Gothic", Verdana, sans-serif;
font-size: 1.0em;
font-weight: normal;
text-align: left;
margin: 0px;
padding-left: 10px;
}
#gallery-nav {
color: #82869b;
background-color: #fffaea;
text-align: right;
padding: 0px 5px 5px 0;
}
#gallery-nav img {
border: 0px solid #7a85bf;
}
#gallery-image {
float: right;
width: 600px;
margin: 0px 0px 20px 0;
text-align: left;
/* border: 1px solid #7a85bf; */
}
#gallery p {
font-family: Univers, "Trebuchet MS", sans-serif;
font-size: .9em;
font-weight: normal;
text-align: left;
margin-right: 615px;
margin-left: 10px;
/* border: 1px solid #7a85bf; */
}
.label {
color: #8a7762;
background-color: #ffffff;
font-family: Univers, "Trebuchet MS", sans-serif;
font-size: 1.1em;
}
/* This is the horizontal navigation bar in the footer. It's a php include in the
footer file, footer.php. The links are stored in navbar.php. */
#navbar {
/* background-color: #ffffff; */
color: #da7b15;
margin-top: 10px;
margin-bottom: 25px;
padding: 3px 0 3px 3px;
/* border: 1px solid #bebeed; */
font-size: .9em;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
display: inline;
padding: 0 10px;
border-right: 1px solid #bebeed;
}
#navbar li a {
text-decoration: none;
color: #054801;
}
#navbar li a:hover, a:active {
text-decoration: none;
color: #d33333;
background-color: #eedfb4;
}
/* This is the footer. Contents are stored in footer.php. */
#footer {
clear: both;
/* background-color: #ffffff; */
border-top: 1px dotted #8e2722;
color: #777777;
margin: 0 15px 20px 15px;
font-size: .85em;
text-align: center;
}
/* These may be used to format information list tables, with an image
and text side-by-side. */
.info {
font-size: 90%;
}
.info table {
width: 98%;
text-align: center;
border: 0px solid #3a3a3a;
}
.info tr {
vertical-align: top;
}
.info td {
width: 200px;
padding: 10px;
font-family: "Futura Lt Bt", verdana, arial, helvetica, sans-serif;
text-align: center;
}
.info img {
border: 1px solid #d7e7f7;
}
/* IMAGES */
/* Images present lots of layout challenges. Look for a page with the
type of layout you want, and follow its example using one of the rules
below. Not all of these are used, by the way. */
/* Use these for the medium size thumbnail illustrations that run in a
column down the right-hand side of the page. */
.illustration-mid-right {
float: right;
width: 175px;
color: #c61300;
margin: 0px 0px 15px 15px;
padding: 10px;
font-size: .75em;
text-align: center;
clear: right;
}
/* This creates some breathing room between right thumbnail image and
its caption. */
.illustration-mid-right img {
padding: 5px 0 5px 0;
border: 0;
}
/* Use these for the small thumbnail illustrations in a row between
text paragraphs. */
.illustration-th-left {
float: left;
width: 110px;
color: #616a7b;
margin: 0px 0px 10px 15px;
/* border: 1px solid #ff66ff; */
padding: 0px;
font-size: .75em;
text-align: center;
}
/* This creates some breathing room between left thumbnail image and
its caption. */
.illustration-th-left img {
padding: 0;
border: 0;
}
/* Use these for the centered small thumbnail illustrations in a row
between text paragraphs. */
.illustration-th-right {
float: right;
width: 110px;
color: #616a7b;
margin: 0px 0px 0px 15px;
/* border: 1px solid #ff66ff; */
padding: 0px;
font-size: .75em;
text-align: center;
}
/* This creates some breathing room between left thumbnail image and
its caption. */
.illustration-th-right img {
padding: 0;
border: 0;
}
/* Use this for full-width images. For example, Alison's house in
cs-alison.php. */
.illustration-wide {
color: #075e00; /* Green */
font-size: .75em;
text-align: center;
}
/* This creates some breathing room between the image and its
caption. */
.illustration-wide img {
padding: 0 0 15px 0;
border: 0;
}
/* MORE IMAGES */
.left-floating {
float: left;
margin-bottom: 20px;
padding-right: 15px;
text-align: center;
background-color: none;
color: #54839d;
font-size: .85em;
}
.right-floating {
float: right;
margin-bottom: 20px;
padding-left: 15px;
background-color: none;
color: #54839d;
font-size: .9em;
text-align: center;
}
.center-nofloat {
float: none;
text-align: center;
background-color: none;
color: #54839d;
font-size: .9em;
text-align: center;
}
/* Use these for larger illustrations and captions that let text flow
around them. I've created a version each for landscape and portrait
orientation, to place on the left or right side of the page. Images
are a pain, can you tell? See eb-finishes.php for example.*/
.illustration-landscape-left {
float: left;
width: 310px;
color: #616a7b;
margin: 15px 15px 15px 15px;
padding: 10px;
font-size: .75em;
text-align: center;
}
.illustration-landscape-right {
float: right;
/* width: 310px; */
color: #616a7b;
margin: 15px 10px 15px 10px;
padding: 10px;
font-size: .75em;
text-align: center;
}
.illustration-portrait-left {
float: left;
width: 220px;
color: #075e00;
margin: 5px 5px 10px 5px;
padding: 10px;
font-size: .75em;
text-align: center;
}
.illustration-portrait-right {
float: right;
width: 220px;
color: #075e00;
margin: 5px 5px 10px 5px;
padding: 10px;
font-size: .75em;
text-align: center;
}
.illustration-landscape {
clear: both;
width: 310px;
color: #616a7b;
/* border: 1px solid #dcdcdc; */
margin: 15px 15px 15px 15px;
padding: 10px;
font-size: .75em;
text-align: center;
}
.illustration-portrait {
clear: both;
width: 220px;
color: #616a7b;
/* border: 1px solid #dcdcdc; */
margin: 15px 15px 15px 15px;
padding: 10px;
font-size: .75em;
text-align: center;
}
/* The following are miscellaneous rules that you may find useful. */
/* This is a span class I created to allow you to apply a different
style to the name "OK OK OK Productions". Code use example: OK OK OK Productions has over 20 years of
experience in earth bag building.
*/
.name {
color: #555555;
font: 1.2em georgia, times, "times new roman", serif;
font-size: 1em;
}
/* This makes a Top link align to the right instead of the left. To
implement this class, do this in the code: top NOTE - I need to clarify this. Not currently
used.*/
.top {
float: right;
font-size: .8em;
padding-right: 15px;
padding-bottom: 15px;
}
/* Use this to clear floats.*/
.clearboth {
clear: both;
}
/* Use to add some text color to notes, such as Click Here to View
Full Size Image. */
.note p {
color: #c61300; /* Crimson */
font-size: .8em;
font-weight: bold;
}
.caption {
color: #075e00; /* Green */
font-size: .8em;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
/* Copyright 2005-2007 Circuit Riders, LLC. All rights reserved. */