/* 
	Main styles for attoboy.com
	Derek Mah, September 2008

	attoblue 007a99
	attogold fff991, attogoldlight fffaa3, attogoldretro ffea80
	external background f5f4ee (bkg tiles are gif-based for colour matching)
	attowhite fafcff
	attoblack 00070a
	headertext 005c73
	bodytext 008a99
	link e3fffd
	grey background 212f33
	off-white background f5f4ee

	For print, we hide background and nav elements and convert remaining content to stacked presentation.

*/
	
/* 
====================
	Set defaults

	h1 title
	h2 header
	h3 header same as h2 with bottom margin removed
	h4 bold italic, usually as a header or call-out
	h5 header same as h2 with top margin removed
	h6 small print, usually copyrights and indicia
	atto_margin can be added to any element to add the standard vertical margins

====================
 */
* {
	margin: 0px; padding: 0px;
	}
body {
	background-color: #ffffff;
	font: 12px "optima", "lucida grande", "verdana", "arial", "helvetica", sans-serif;
	font-weight: normal; font-style: normal;
	color: #000000;
	text-decoration: none;
	text-align: center;
	}
body #ieeeeee {
	font: 12px "verdana", "arial", "helvetica", sans-serif;
	}
img {
	display: inline; vertical-align: baseline;
	}
a img {
	border: none;
	}
table, tr, td {
	border-collapse: collapse;
	}
td {
	vertical-align: top;
	}
h1, h2, h3, h4, h5, h6, p, table, ul, ol, .atto_margin {
	margin: 1.70em 0em 1.70em 0em;
	}
h1, h2, h4, h5 {
	color: #000d12;
	}
h1 {
	font-size: 1.8em; font-weight:bold;
	margin: 2.00em 0em 0.95em 0em;
	}
h2, h3, h5 {
	font-size: 1.25em; font-weight: bold;
	margin: 1.36em 0em 1.36em 0em;
	}
h3 {
	margin-bottom: -1.25em;
	}
h4 {
	font-size: 1.20em; font-style: italic;
	margin: 1.42em 0em 1.42em 0em;
	}
h5 {
	margin-top: -1.25em;
	}
h6 {
	margin: 0em 0em 0em 0em;
	font-size: 9px; font-weight: normal;
	}
p {
	line-height: 1.70em;
	}
.atto_bold {
	font-weight: bold;
	}
.atto_small {
	font-size: 0.9em;
	}
.atto_darkborder {
	border: solid 2px #00070a;
	}
.atto_lightborder {
	border: solid 2px #ffffff;
	}
a:link, a:visited {
	color: #000000;
	text-decoration: underline;
	}
a:active, a:hover {
	color: #000000;
	text-decoration: underline;
	}

/* 
====================
	layout

	display only atto_c/atto_c_text and parts of atto_rw.

====================
 */
#atto_c, 
#atto_c_text {
	position: relative;
	margin: 2.50em 0.00em 0.00em 0.00em;
	float: left; width: 70%;
	overflow: visible;
	text-align: left;
	}
#atto_lw {
	display: none;
	}
#atto_rw {
	position: relative;
	margin: 2.50em 0.00em 0.00em 0.00em;
	float: right; width: 25%;
	text-align: left;
	}

/* 
====================
	content

	atto_gallerypic adds a border and slight margin to images
	atto_left and atto_right are the floats.
	atto_inner has a default width of 200px, but can be locally defined for images of varying width.

====================
 */
.atto_gallerypic {
	text-align: left;
	margin: 1.70em 0.00em 1.70em 0.00em;
	}
.atto_gallerypic img {
	margin: 0px 2px 0px 2px;
	max-width: 500px;
	}

.atto_left, 
.atto_right {
	clear: both; float: left;
	margin: 0em 1.00em 1.70em 0em;
	}
.atto_right {
	float: right;
	margin: 0em 0em 1.70em 1.00em;
	}
.atto_inner {
	width: 200px;
	}

#atto_c ul, 
#atto_c ol, 
#atto_c_text ul, 
#atto_c_text ol {
	margin: 0em 0em 0em 2.5em;
	}
#atto_c li, 
#atto_c_text li {
	margin: 0.35em 0.00em 0.35em 0.00em;
	line-height: 1.70em;
	}

#atto_rw h3 {
	display: none;
	}
#atto_rw ul {
	list-style: none;
	margin: 1.70em 0em 1.70em 0em;
	}
#atto_rw ol {
	margin: 1.70em 0em 1.70em 2.50em;
	}
#atto_rw li {
	margin: 0.35em 0.00em 0.35em 0.00em;
	}
#atto_rw .atto_uppercase {
	font-size: 9px;
	text-transform: uppercase;
	}

#atto_lw ul,
#atto_lw li {
	display: none;
	}
#atto_lw li {
	display: none;
	}
#atto_lw li ul {
	display: none;
	}
/* 
	atto_printurl and atto_printlogo are absolutely positioned to the top of the page when printed and are not displayed in the browser.
 */
#atto_printlogo {
	position: absolute; top: 0px; left: 0px;
	}
#atto_printurl {
	position: absolute; top:1.70em; left: 40px;
	font-size: 0.85em;
	}

/* 
====================
	links

	atto_underlined forces an underline and scales the text for links streamed into content.
	atto_button can be streamed into content, but is best positioned in it's own <p>. Always put a single text space between each button to create a small gap and allow soft-wrap between buttons.
	atto_thumbnails creates a grid of thumbnail links. The background graphic should be locally defined, maybe with a local stylesheet.
	atto_hidetext creates hidden thumbnail text labels that appear only when the stylesheet fails.

====================
 */
a.atto_underlined {
	text-decoration: underline;
	font-size: 0.95em; vertical-align: 1px;
	}

a.atto_button {
	padding: 1px 0.50em 2px 0.50em;
	font-weight: normal; font-size: 0.85em;
	white-space: nowrap;
	vertical-align: 1px;
	background-color: #ffffff;
	}
a.atto_button:link, 
a.atto_button:visited {
	border: solid 1px #000000;
	color: #000000;
	text-decoration: none;
	}
a.atto_button:hover, 
a.atto_button:active {
	border: solid 1px #000000;
	color: #000000;
	text-decoration: none;
	}

a.atto_teenythumb {
	display: block; float: left;
	height: 1.50em; line-height: 1.50em;
	border: solid 1px #000000;
	margin: 0px 3px 3px 0px;
	padding: 0.00em 0.50em 0.00em 0.50em;
	font-weight: normal; font-size: 0.85em;
	white-space: nowrap;
	vertical-align: 1px;
	background-color: #ffffff;
	}
a.atto_teenythumb:link, 
a.atto_teenythumb:visited {
	border-color: #000000;
	color: #000000;
	text-decoration: none;
	}
a.atto_teenythumb:hover, 
a.atto_teenythumb:active {
	border-color: #000000;
	color: #000000;
	text-decoration: none;
	}

.atto_thumbnails {
	display: none;
	}
.atto_clearfloats {
	clear: both; width: 1px; height: 1px;
	}
.atto_hidetext {
	display: none;
	}

/* 
====================
	contact form
====================
 */
.atto_contactbox {
	border: solid 1px #007a99;
	background-color: #fafcff;
	font: 0.85em "lucida grande", "geneva", "arial", "helvetica", sans-serif;
	font-weight: normal; font-style: normal;
	color: #005c73;
	text-decoration: none;
	}

/* 
====================
	topnav

	topnav is not displayed in print

====================
 */
#atto_topnav {
	display: none;
	}

/* 
====================
	footer
====================
 */
#atto_footer {
	clear: both;
	background: url(/atto_assets/footer_bkg.gif) left bottom repeat-x transparent;
	margin: 0px 0px 0px 0px;
	padding: 4.00em 0.00em 0.00em 0.00em;
	text-align: left;
	}
#atto_footer a {
	display: none;
	}
#atto_footer p {
	font-size: 0.85em;
	}
/* 
====================
	frontpage
====================
 */
#atto_fp {
	margin: 2.50em 0.00em 0.00em 0.00em;
	float: left; width: 70%;
	overflow: visible;
	text-align: left;
	}
.atto_fp_image {
	margin-top: 1.70em;
	}
.atto_welcome {
	margin-top:1.70em;
	}

.atto_fpnews {
	position: absolute; top: 100px; right: 0px;
	width: 25%;
	text-align: left;
	font-size: 0.85em;
	}
#atto_fp_nav {
	display: none;
	}