@import url('reset.css');
@import url('color.css');
@import url('typography.css');

/* CSS LAYOUT
---------------------------------------------- */

.container { position: relative; width: 700px; margin: 0 auto; text-align: left; }
#branding, #content { margin: 0 30px; }

/* BRANDING
---------------------------------------------- */

#branding { position: relative; height: 300px; }
#branding h1, #branding p { position: absolute; top: -9999px; }
#branding p.contact { position: absolute; z-index: 1; display: block; width: 100%; top: 300px; left: 0; height: 60px; }
#branding p.contact span { position: absolute; top: 8px; left: 24px; }

/* CONTENT
---------------------------------------------- */

#content { position: relative; line-height: 1.5; margin: 50px 30px -73px; min-height: 213px; padding-bottom: .5in; }
#content h2 { padding: 24px 205px 20px 24px; }
#content h3 { padding-bottom: 6px; }
#content p { padding: 0 205px 12px 24px; }
#content blockquote, #content ol, #content ul { padding: 0 205px 0 72px; }
#content blockquote { margin-bottom: 24px; }
#content ol, #content ul { padding-bottom: 12px; }
#content ul ul { padding: 0 0 0 24px; }
#content blockquote p { padding: 0 0 12px 0; }

/* NAVIGATION
---------------------------------------------- */

#navigation { position: absolute; top: 324px; z-index: 2; right: 30px; width: 180px; padding-bottom: 55px; }
#navigation ul { padding-top: 12px; }
#navigation h2 { display: block; text-indent: -9999px; height: 44px; }
#navigation li { position: relative; left: 12px; padding: 0 0 12px 32px; height: 32px; }

/* FOOTER
---------------------------------------------- */

#footer { position: relative; clear: both; z-index: 1; height: 98px; top: 73px; }
#footer p { position: absolute; top: 15px; left: 54px; }
#footer ul { position: relative; top: 132px; text-align: center; }
#footer li { display: inline; padding: 0 8px; margin: 0 auto; }
#footer li.first { padding: 0 8px 0 0; }

/* TABLE LINENS
---------------------------------------------- */

#content ul.tableLinens { padding-bottom: 2in; margin-bottom: -1.55in; }

/* GALLERIES
---------------------------------------------- */

#content div.galleries { position: relative; margin: 0 200px 0 24px; }
#content div.galleries h2 { padding: 24px 0 20px; }
#content div.galleries p { padding: 0 0 24px; }
#content div.galleries p.chart { float: right; padding: 0 0 0 32px; }
#content div.galleries h3 { float: left; padding-bottom: 12px; }
#content div.galleries ul.gallery { clear: both; position: relative; padding: 0; overflow: hidden; margin-bottom: 22px; }
#content div.galleries ul.gallery li { float: left; margin: 0 13px 24px; line-height: 1; width: 78px; height: 78px; }
#content div.galleries ul.gallery li img { position: relative; top: 7px; left: 7px; }

/* TABLE CHART
---------------------------------------------- */

body#tableChart { padding: 12px 0 0 0; text-align: center; }
body#tableChart table { width: 700px; margin: 0 auto; border-collapse: collapse; }
body#tableChart caption { margin: 0 auto; text-align: center; caption-side: top; padding: 0 0 6px; }
body#tableChart colgroup.head { width: 14%; }
body#tableChart colgroup.data { width: 10.75%; }
body#tableChart th.tableSize, body#tableChart th.linenSize { text-align: center; }
body#tableChart th.tableSize span { display: block; padding-bottom: 6px; }
body#tableChart th.tableSize img { display: block; margin: 6px auto; }
body#tableChart td, body#tableChart th { vertical-align: middle; }
body#tableChart td { padding: 6px; text-align: center; }

/* BASIC TABLE CHART
---------------------------------------------- */

body#tableChart table#basic { width: 300px; }
body#tableChart table#basic th.tableSize { padding: 6px; }