/* 
	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
	ochre blue background 99cccc
	attoshadow 004159
	white background ffffff

*/
	
/* 
====================
	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: url(/atto_assets/body_bkg.png) left top repeat-x #99cccc;
	font: 12px "lucida grande", "verdana", "arial", "helvetica", sans-serif;
	font-weight: normal; font-style: normal;
	color: #008a99;
	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 {
	font-family: "optima";
	}
h1, h2, h3, h4, h5, h6, p, table, ul, ol, .atto_margin {
	margin: 1.70em 0em 1.70em 0em;
	}
h1 {
	color: #000d12;
	font-size: 1.8em; font-weight:bold;
	margin: 1.55em 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.10em;
	}
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 #f5f4ee;
	}
a:link, a:visited {
	color: #00cad9;
	background-color: transparent;
	text-decoration: none;
	}
a:active, a:hover {
	color: #000d12;
	text-decoration: none;
	}

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

	all content resides in atto_content which fixes the width at 1024px and places a bkg image.
	atto_content has 0px margin-top to make the bkg image flow under atto_topnav.
	padding-top of atto_content should match height of atto_topnav ul (currently 170px).
	all content pages in a three column layout: atto_lw, atto_c/atto_c_text, atto_rw.
	atto_lw and atto_rw are right and left justified respectively with margins creating the gutters.
	atto_lw and atto_rw content will scale with no min-width.
	images in atto_lw should not exceed 100px.
	images in atto_rw should not exceed 200px.
	atto_c/atto_c_text will scale with no min-width.
	atto_c is for image-centric content. atto_c autoscrolls if the div is narrower than the image. atto_c will not display overhangs.
	atto_c_no_rw is for wide image-centric content where the image info will appear below the image rather than in an atto_rw div beside the image. atto_c_no_rw will display overhangs and does not require the atto_gallerypic div for the displayed image. Max image size 698px.
	atto_c_text is for text-rich content. atto_c_text has a slightly knocked back bkg and allows floats to overhang.
	Removed position: relative from atto_c_text as it causes bkg's to display in front of floated elements in IE6.
	gallery images are centered and have a 2px border.
	gallery image can be any size, but a good practical width is 450px.
	atto_lightbkg is designed for text content and also allows images to hang outside the div rather than introducing a horizontal scroll bar.

====================
 */
#atto_content {
	position: relative;
	width: 1024px; margin: 0px auto 0px auto; padding: 170px 0px 0px 0px;
	background: url(/atto_assets/content_bkg.png) center top repeat-y #ffffff;
	}
#atto_c {
	position: relative;
	margin: 0px 352px 0px 254px;
	overflow: auto;
	text-align: left;
	}
#atto_c_no_rw {
	margin: 0px 36px 1.70em 262px;
	padding-top: 1.70em;
	overflow: visible;
	text-align: left;
	}
#atto_c_text {
	margin: 0px 360px 0px 260px;
	overflow: visible;
	text-align: left;
	}
#atto_c_textwide {
	margin: 0px 252px 0px 260px;
	overflow: visible;
	text-align: left;
	}
#atto_lw {
	position: absolute; left: 74px; top: 240px;
	width: 142px;
	overflow: visible;
	text-align: right; font-size: 11px;
	}
#atto_rw {
	position: absolute; right: 82px; top: 240px;
	width: 232px;
	overflow: visible;
	text-align: left; font-size: 11px;
	}

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

	atto_gallerypic adds slight margin to images and centers its content.
	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.
	the li in atto_lw is set to clear: right to clear it of the right floated atto_thumbnails.
	atto_showcasedetail formats text identically to the gallery detail text in att_rw and is used for gallery detail text that is not contained within atto_rw.

====================
 */
.atto_gallerypic {
	margin: 0.00em 0.00em 1.70em 0.00em;
	padding-top: 1.70em;
	text-align: center;
	}
.atto_gallerypic img {
	margin: 0px 2px 0px 2px;
	}
.atto_showcasedetail {
	padding: 0.00em 30% 0.00em 0.00em;
	font-size: 11px;
	}

.atto_left, 
.atto_right {
	clear: both; float: left;
	margin: 0em 2.25em 1.70em 0em;
	}
.atto_right {
	float: right;
	margin: 0em 0em 1.70em 2.00em;
	}
.atto_inner {
	position: relative; width: 200px; padding-top: 5px; z-index: 9;
	}

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

#atto_rw h1, .atto_showcasedetail h1, 
#atto_rw h2, .atto_showcasedetail h2, 
#atto_rw h4, .atto_showcasedetail h4, 
#atto_rw h5, .atto_showcasedetail h5 {
	color: #008a99;
	}
#atto_rw ul, .atto_showcasedetail ul {
	list-style: none;
	margin: 1.70em 0em 1.70em 0em;
	}
#atto_rw ol, .atto_showcasedetail ol {
	margin: 1.70em 0em 1.70em 2.50em;
	}
#atto_rw li, .atto_showcasedetail li {
	margin: 0.35em 0.00em 0.35em 0.00em;
	}
#atto_rw .atto_uppercase, .atto_showcasedetail .atto_uppercase {
	font-size: 9px;
	text-transform: uppercase;
	}

#atto_lw h1, 
#atto_lw h2, 
#atto_lw h4, 
#atto_lw h5 {
	color: #008a99;
	font-family: "Optima", "lucida grande", "verdana", "arial", "helvetica", sans-serif;
	}
#atto_lw ul,
#atto_lw li {
	list-style: none;
	}
#atto_lw li {
	margin: 0.35em 0.00em 0.35em 0.00em;
	font-size: 12px;
	clear: right;
	}
#atto_lw li.atto_navheader {
	font-family: "Optima", "lucida grande", "verdana", "arial", "helvetica", sans-serif;
	font-size: 15px;
	font-weight: bold;
	}
#atto_lw a.atto_current {
	font-weight: bold;
	color: #00070a;
	border-color: #00070a;
	}
#atto_lw li ul {
	margin: 0.00em 0.00em 0.00em 0.50em;
	font-size: 0.85em;
	}
/* 
	atto_printurl and atto_printlogo are absolutely positioned to the top of the page when printed and are not displayed in the browser.
 */
#atto_printurl, 
#atto_printlogo {
	display: none;
	}

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

	atto_enlarge places an absolutely positioned link with the enlarge icon over images. The size of the link must be locally defined to match the size of the underlying image. Be sure to compensate for borders and to add a single px of height to extend the icon below the image border.
	atto_underlined forces an underline for links streamed into content.
	atto_button can be streamed into content, but is best positioned in its own <p>. Always put a single text space between each button to create a small gap and allow soft-wrap between buttons. (note that softwrap may disappear border-right in Safari 2 and Safari 3.)
	atto_teenythumbs are similar to atto_button and serve as non-bkg thumbnail buttons in atto_rw that launch lightbox-displayed image sets.
	atto_teenythumbs are display: block and float: left rather than softwrapped to circumvent the disappearing border-right when softwrapped in Safari 2 and Safari 3.
	Use atto_teenythumbs to create grids and use atto_button with a forced <br> to create a standalone button. Always place an atto_clearfloats div at the end of an atto_teenythumbs grid to clear the float.
	atto_thumbnails creates a grid of thumbnail links in atto_lw. The background graphic is locally defined with a local stylesheet.
	atto_hidetext creates hidden thumbnail text labels that appear only when the stylesheet fails.

====================
 */
a.atto_enlarge {
	display: block; width: 100px; height: 100px;
	position: absolute; top: 0px; left: 0px;
	background: url(/atto_assets/enlarge.png) right bottom no-repeat transparent;
	}
#ieeeeee a.atto_enlarge {
	background-image: url(/atto_assets/enlarge.gif);
	}
.atto_inner a.atto_enlarge {
	top: 5px;
	}

a.atto_underlined {
	text-decoration: none;
	}
a.atto_underlined:link, 
a.atto_underlined:visited {
	text-decoration: none;
	}
a.atto_underlined:hover, 
a.atto_underlined:active {
	text-decoration: underline;
	}

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

a.atto_teenythumb {
	display: block; float: left;
	height: 1.50em; line-height: 1.50em;
	border: solid 1px #00cad9;
	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: #00cad9;
	color: #00cad9;
	text-decoration: none;
	}
a.atto_teenythumb:hover, 
a.atto_teenythumb:active {
	border-color: #000d12;
	color: #000d12;
	text-decoration: none;
	}

.atto_thumbnails {
	margin: 0.35em 0.00em 0.75em 0.00em;
	padding-right: 5px; border-right: solid 1px #00070a;
	}
.atto_thumbnails a {
	display: block; width: 40px; height: 40px; line-height: 40px;
	float: right;
	margin: 2px 0px 0px 2px;
	background: url(/atto_assets/thumbnails.png) left top no-repeat transparent;
	text-align: center;
	border: solid 1px #00cad9;
	}
.atto_thumbnails a:link, 
.atto_thumbnails a:visited {
	border: solid 1px #00cad9;
	}
.atto_thumbnails a:hover, 
.atto_thumbnails a:active {
	border: solid 1px #000d12;
	}
.atto_clearfloats {
	clear: both; width: 1px; height: 1px;
	}
.atto_hidetext {
	display: none;
	}

/* 
====================
	contact form
====================
 */
.atto_text {
	width: 500px; padding-left: 5px; line-height: 1.70em;
	border: solid 1px #00cad9;
	background-color: #ffffff;
	font: 1.00em "lucida grande", "geneva", "arial", "helvetica", sans-serif;
	font-weight: normal; font-style: normal;
	color: #00070a;
	text-decoration: none;
	}

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

	the topnav links are redundantly contained within li to create a list on stylesheet failure and to allow for a redundant background image behind the link to prevent image swap blinking in IE6.
	atto_topnav ul has enough bkg image to be 256px tall. Beyond that, we'll have to extend the image or make atto_nav overlap atto_content and let atto_content supply the tiled bkg.

====================
 */
#atto_topnav {
	position: absolute; left: 0px; top: 0px;
	width: 100%;
	}
#atto_topnav ul {
	position: relative; width: 1024px; height: 170px; margin: 0px auto 0px auto;
	background: url(topnav_bkg.png) center top no-repeat transparent;
	}
#atto_topnav ul, #atto_topnav li {
	list-style: none; margin-top: 0px;
	}
#ieeeeee #atto_topnav li {
	background: url(topnav.gif) top left no-repeat transparent;
	}
#atto_topnav a {
	display: block;
	background: url(topnav.gif) top left no-repeat transparent;
	}

#atto_about {
	position: absolute; top: 115px; left: 261px;
	width: 174px; height: 29px;
	}
#ieeeeee #atto_topnav #atto_about, 
#atto_about a {
	width: 174px; height: 29px;
	background-position: 0px 0px;
	}
#atto_about a:link, 
#atto_about a:visited {
	background-position: 0px 0px;
	}
#atto_about a:hover, 
#atto_about a:active {
	background-position: -200px 0px;
	}

#atto_showcase {
	position: absolute; top: 115px; left: 436px;
	width: 174px; height: 29px;
	}
#ieeeeee #atto_topnav #atto_showcase, 
#atto_showcase a {
	width: 174px; height: 29px;
	background-position: 0px -50px;
	}
#atto_showcase a:link, 
#atto_showcase:visited {
	background-position: 0px -50px;
	}
#atto_showcase a:hover, 
#atto_showcase a:active {
	background-position: -200px -50px;
	}

#atto_diversions {
	position: absolute; top: 115px; left: 611px;
	width: 174px; height: 29px;
	}
#ieeeeee #atto_topnav #atto_diversions, 
#atto_diversions a {
	width: 174px; height: 29px;
	background-position: 0px -100px;
	}
#atto_diversions a:link, 
#atto_diversions a:visited {
	background-position: 0px -100px;
	}
#atto_diversions a:hover, 
#atto_diversions a:active {
	background-position: -200px -100px;
	}

#atto_contact {
	position: absolute; top: 115px; left: 786px;
	width: 174px; height: 29px;
	}
#ieeeeee #atto_topnav #atto_contact, 
#atto_contact a {
	width: 174px; height: 29px;
	background-position: 0px -150px;
	}
#atto_contact a:link, 
#atto_contact:visited {
	background-position: 0px -150px;
	}
#atto_contact a:hover, 
#atto_contact a:active {
	background-position: -200px -150px;
	}

#atto_home {
	position: absolute; top: 12px; left: 48px;
	background: url(topnav_logo.gif) left top no-repeat transparent;
	width: 130px; height: 130px;
	}
#ieeeeee #atto_topnav #atto_home, 
#atto_home a {
	background-image: url(topnav_logo.gif);
	width: 130px; height: 130px;
	background-position: left top;
	}
#atto_home a:link, 
#atto_home a:visited {
	background-position: 0px 0px;
	}
#atto_home a:hover, 
#atto_home a:active {
	background-position: 0px -150px;
	}

/* 
====================
	footer
====================
 */
#atto_footernav {
	clear: both;
	margin: 5.00em 2.00em 2.00em 2.00em;
	text-align: center;
	}
#atto_footer {
	clear: both;
	background: url(/atto_assets/footer_bkg.png) center bottom no-repeat transparent;
	margin: 0px 0px 0px 0px;
	padding: 20px 100px 40px 100px;
	text-align: center;
	}
#atto_footer p {
	font-size: 0.85em;
	color: #ffffff;
	}

/* 
====================
	frontpage
====================
 */
.atto_welcome {
	margin: 0px 0px 0px 0px;
	}
.atto_welcome h1 {
	color: #008a99;
	}
.atto_fpnews {
	margin: 70px 0.00em 1.75em 0.00em;
	border-left: solid 1px #008a99;
	border-right: solid 1px #008a99;
	border-bottom: solid 1px #008a99;
	background: url(/atto_home/hdr_recentstuff.gif) left top no-repeat #ffffff;
	padding: 3.00em 26px 2.00em 22px;
	overflow: visible;
	text-align: left; font-size: 11px;
	}