div.box {
	border: 1px #000000 solid;
	width: 700px;
}

h1, h2 {
	text-transform: uppercase;
}

h1 {
    font-size : 10px;
    margin-bottom : 2px;
    margin-top : 2px;
    color: #5A7370;

}

pre {
	text-align: left;
	font-size: 12px;
	color: #000;
	margin: 10px 40px;
	border: 1px solid #ccc;
	padding: 10px;
	background-color: #fffff0;
}



/*
div.pics2, div.pics2 img and div.pics2 p are provided as an example of how you
can change page presentation without altering the simple html layout or using 
tables. 
Normally you would just declare these as div.pics, div.pics img and div.pics p 
and override the settings in basic.css
*/
div.pics2 {
    margin : 10px 0;
    text-align : center;
}

div.pics2 img {
    border : 1px solid #D8E4E4;
    margin : 0 3px;
	padding: 3px;
	background-color: #FFFACD;
}

div.pics2 p {
	padding: 0;
    margin-top: 0;
	margin-bottom: 3px;
	margin-left: auto;
	margin-right: auto;
    font-size: 10px;
    text-align: center;
	width: 500px;
	color: #700;
	text-transform: uppercase;
	
}


/*
h1.ex2 and div.nav2 are used to change the appearance of the box in example2.html.
Normally you would just define these as h1 and div.nav and simply override the values
set in basic.css
*/
h1.ex2 {
	margin: 0;
	background-color: #ffc;
}

div.nav {
	background-color: #006699;
	margin: 0px 0;
	padding: 9px 0;
	text-align: center;
; width: 700px
; border: 0px solid
}

div.nav a {
	font-size: 12px;
	text-decoration: none;
	text-transform: none;
	padding: 3px 3px;
	border: 1px #FFFFFF solid;
	margin: 10px 10px;
	color: #FFFFFF;
; font-family: Verdana, Arial, Helvetica, sans-serif
}

div.nav a:hover {
	border: 1px #FFFFFF solid;
	color: #FFFFFF;
	background-color: #003366;
}

/*
table examples
NB don't use shorthand for the margins or they will break in macs
*/

table.twocols {
	width: 80%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
}

table.twocols td {
/*
if you wanted you could specify width: 50% here
You could also use individually styled td's
table.twocols td.left {
	width: 75%;
}
*/
}

table.twocols p {
	padding: 5px 10px;
	color: #009900;
}

/*
another table example
NB don't use shorthand for the margins or they will break in macs

*/
table.price {
	border: 1px solid #ccc;
	width: 80%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
}


table.price, table.price td, table.price th {
	border: 1px solid #ccc;
	text-align: center;
}

table.price td {
	padding: 5px;
}

table.price th {
	color: red;
	font-weight: normal;
	padding: 10px;
	background-color: #DFDFDF;
}

table.price tr.season {
	background-color: #eee;
}

/* info for materials.html */

table.lookup {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
table.lookup, table.lookup td, table.lookup th {
	border: 1px solid #ccc;
}
table.lookup td{
	padding: 5px;
	text-align: left;
	vertical-align: top;
}

table.lookup th {
	padding: 5px;
	text-align: right;
	vertical-align: top;
}

/* tidying up navigation with a placeholder for the current page */
div.nav a.here {
	text-decoration: none;
	color: #FF0000;
	background-color: #fff;
	border-color: #fff;
}

p.subtitle {  color: #FF0000; text-align: center}
p.price {
    margin-left : 75px;
    margin-right : 75px;
	text-align: center;
}
.full {  color: #003366; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px}
.section {  font-size: 12px; color: #FFFFFF; background-color: #006699; text-align: center; padding-top: 4px; padding-bottom: 4px; font-style: normal; font-weight: bold}
a:visited {  color: #000000}

