/*  FOR COLOR PALETTE, SEE SEPARATE FILE
 
 Blueprint CSS Framework 0.8 -  http://blueprintcss.org */

/* reset.css - Resets default browser CSS */


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
	overflow-y: scroll; /* scrollbar always on */
}

body {
	font-size: 100%;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-style: normal;
	text-align: left; /* IE styles were overriding this */
	line-height: 1em;
	color: black;
	background-color: #f2ecdf; /* lite beige - matches AE graphic bottom */
	background-image: url(../graphics/crish-bg.jpg);
	background-repeat: no-repeat;
}



/* *** redefining general links *** */
a:link {
	color: #993726; /* logo red darkest */
	text-decoration: underline;
}
a:visited {
	color: #0d0c0c; /* = very dark brown-gray */
	text-decoration: underline;
}
a:hover {
	color: #cc4129; /* crish logo red dark */
	text-decoration: underline;
}
a:active {
	color: #b3aea4; /* dark beige */
}


/* Text elements
-------------------------------------------------------------- */

strong      { font-weight: bold; }
em          { font-style: italic; }




/* Misc classes
-------------------------------------------------------------- */

.hide       { display: none; }

.first      { margin-left: 0; padding-left: 0; }
.last       { margin-right: 0; padding-right: 0; }
.top        { margin-top: 0; padding-top: 0; }
.bottom     { margin-bottom: 0; padding-bottom: 0; }


/* *** LISTS & QUOTES *** */

ul {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-align: left;
	padding-right: 12px;
	padding-left: 3px;
	padding-top: 2px;
	padding-bottom: 6px;
	margin-top: 3px;
	margin-bottom: 4px;
}

ul li {
	font-size: 72%; /* little smaller than p */
	padding-top: 2px;
	padding-bottom: 2px;
	list-style-type: none;
 	list-style-position: inside;
	list-style-image: url(../graphics/disc_pink_trans.png);
}
	
	
blockquote {
	margin: 0 1.2em 1.5em 0;
	padding: 6px 10px 0px 10px;
	display: block;
	background-color: #f2eee6; /* lite beige */
	border-top-width: 2px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #cc887a; /* pink circles */
	border-bottom-color: #cc887a; /* pink circles */
	background-image: url(../graphics/grad-white-litebeige-200.png);
	background-repeat: repeat-x;
}
blockquote p {
	color: #664c51; /* dark plum */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}


/* --------------------------------------------------------------
   grid.css
-------------------------------------------------------------- */

div#container { /*includes heroes, logo, navbar, and wrapper  */
	width: 980px;
	margin: 0px auto 10px auto;
	padding: 0px;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(blueprint/src/grid.png); 
}

div#wrapper  { /* 950 width, plus 28 (14px padding left/right), plus 2 (border) = 980 */
	position: relative;
	width: 950px; /* 24 column grid - see below */
	padding: 20px 14px 0px 14px;
	border: 1px solid #ccc7bc; /* med beige+ */
	background-color: #FFF;
	background-image: url(../graphics/grad-litebeige-white.png);
	background-repeat: repeat-x;
}



/* STRUCTURE DIVS _______________________________________ */

div#masthead {
	position: relative; /* must be relative for Search to flush btm-right */
	height: 110px;
	width: 950px;
	margin-bottom: 10px;
	margin-top: 0px;
	margin-left: 10px;
}

div#logo {
	height: 110px;
	width: 520px;
	text-align: left;
}


div#search { /* done - put back in library - slow in Dreamweaver */
	position: absolute; /* make flush bottom-right with div#masthead */
	bottom: 0;
	right: 0;
	height: 1.5em;
	float: right;
	clear: right;
}


div#content { /* don't think we need this, as the styles work ok just using span divs  */
	margin: 0;
	padding: 0;
}

div.inset { /* use on certain simple pages ?  */
	padding-left: 86px; /* aligns with r in Crish   */
	padding-right: 20px;
}


/* NAV BAR _______________________________________ */

/* styling horz nav bar  */
/* to make the tab appear to overlap wrapper, adjust div#nav height, padding top & bottom of #nav a, and bottom border of active links  */


div#navbar {
	position: relative;
	clear: both;
	margin: 15px 0px 0px 0px;
	padding-left: 13px;
	height: 28px; /* balance with padding bottom on #nav a */
	width: 965px; /* same as container 980, less padding left = 13 */
}

div#nav { /* inner div nessary to float left */
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	width: 950px;
	z-index: 10;  /* necessary to draw on top of wrapper */
}

#nav ul {
	margin: 0;
	padding: 0;
}
#nav ul li {
	float: left;
	margin: 0;
	padding-bottom: 10px;
	display: block;
	list-style: none;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 80%; /* adjust as necessary */
	letter-spacing: 1px;
	font-weight: bold;
}

#nav a {
	margin: 0;
	padding: 5px 12px 5px 12px;  /* pad btm / balance with height of #navbar */
	color: #000;
	display: block;
	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #ccc7bc; /* matches color of wrapper, tab  AND creates left border */
}

#nav a:hover {
	color: #cc4129; /* crish dark red  */
}

/* declarations to style the current page - trickery to have tab appear to overlap wrapper  */
body#index #t-index a, 
body#blog #t-blog a, 
body#books #t-books a, 
body#online_training #t-online_training a, 
body#classes #t-classes a, 
body#portfolio1 #t-portfolio a, 
body#portfolio2 #t-portfolio a, 
body#portfolio3 #t-portfolio a, 
body#audio #t-audio a, 
body#web_design #t-web_design a, 
body#about #t-about a, 
body#contact #t-contact a, 
body#links #t-links a {
	background-color: #f2eee6; /* lite beige - matches top of gradient in Contents topgrad */
	background-image: url(../graphics/nav-tab-grad.png); /* white to lite beige */
	background-repeat: repeat-x;
	color: #cc4129; /* crish dark red  */
	border-style: solid;
	border-top-width: 1px;
	border-top-color: #ccc7bc; /* med beige+ */
	border-right-width: 1px;
	border-right-color: #ccc7bc; /* med beige+ */
	border-left-width: 0px; /* OFF - when tab has focus, uses right border from the name to the left */
	border-bottom-width: 1px; /* bottom border covers wrapper border */
	border-bottom-color: #f2eee6; /* lite beige to hide it - matches top of gradient in Contents topgrad */
}


/* TEXT styling  */



h1, h2, h3, h4, h5, h6 {
	font-weight: normal; 
	text-align: left;
	color: #000;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	line-height: 1.5em;
	font-weight: bold;
	letter-spacing: 0em;
	margin-top: 1.25em;
	margin-bottom: 0.25em;
}

h1 {
	font-size: 120%;
	color: #cc4129; /* crish logo red dark */
	margin-top: 0;
}

h2 {
	color: #cc4129; /* crish logo red dark */
	font-size: 110%;
}


h3, h4 {
	color: #664c51; /* dark plum */
	font-size: 95%;
}


h4 {
	font-style: italic;
}

h5, h6 {
	color: #80554d; /* brick pink */
	font-size: 76%;
	margin-top: 1.2em;
}

h6 {
	font-style: italic;
}




p { /* fallback for all text, must specif text-align left for Windoze */
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 76%;
	font-weight: normal; 
	text-align: left;
	color: #000;
	margin-top: 0.2em;
	margin-bottom: 0.8em;
	line-height: 1.5em;
}

p.small, p.smallnote {
	font-size: 66%;	
	line-height: 1.5em;
}
p.smallnote { 
	color: #66635e; /* beige B40*/
}

p.caption, p.caption_tight {
	font-size: 66%;
	line-height: 1.5em;
	color: #66635e; /* beige B40*/
	margin: 0 0 .5em 0 !important;
	padding: 0 !important;
}

p.caption_tight { /* use for captions that need to be tight against image,  space below*/
	line-height: 1em;
	margin: 0 0 1.7em 0 !important;
}
p.breadcrumbs {
	clear: both;
	color: #80554d; /* brick pink */
	font-size: 66%;
	margin-top: 0;
}



/* STYLING SIDEBARS and BOXES */


/* Sidebars etc: Use a 2nd nested div with class .box to create a padded box inside a column - for images, use span width LESS 34px(padding and border) */ 
.box {
	padding: 0px 16px 12px 16px;
	margin-bottom: 1.2em;
	background-color: #f2eee6;
	background-image: url(../graphics/grad-white-litebeige-200.png);
	background-repeat: repeat-x;
	border: 1px solid #e5baac; /* pale pink */
}

.padding-top {
	padding-top: 0px;
}

.box h2, .box h3, .box h4, .box h5, .box h6 { 	margin-top: 0.9em; }


.box p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 66%;
	margin-top: 0.2em;
	margin-bottom: 0.8em;
	line-height: 1.5em;
	color: #4d393d; /* darkest plum */
}

.box p > strong {
	color: #332628; /*darkdark plum */
}

.box_inline, .box_inline_top { /* use this class for small highlight box inline in contents, bit like blockquote, rules top&bottom only */
	margin: 1em 0em 1.5em 0;
	padding: 0.5em 1.0em 0.3em 1.0em;
	display: block;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #e5baac; /* pale pink */
	border-bottom-color: #e5baac; /* pale pink */
	background-image: url(../graphics/grad-white-litebeige-200.png);
	background-repeat: repeat-x;
	background-color: #f2eee6; /* lite beige */
}

.box_inline_top { /* use this class for small highlight box at top of contents box */
	margin: 0em 0em 1.5em 0;
}
.box_inline p, .box_inline_top p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 70%;
	margin-top: 0.2em;
	margin-bottom: 0.8em;
	line-height: 1.5em;
	color: #4d393d; /* darkest plum */
}

.box_archive {
	margin-top: 1.5em;
	margin-bottom: 1em;
	background-color: #f2eee6;
	background-image: url(../graphics/grad-white-litebeige-200.png);
	background-repeat: repeat-x;
	border: 1px solid #e5baac; /* pale pink */
}

.box_archive h3 { /* Use for head in From the archive box on book pages */
	color: #FFF;
	background-color: #664c51; /* dark plum */
	margin: 0 0 1em 0;
	padding: 0.1em 1em 0.1em 1em;
	letter-spacing: 1px;
	font-size: 85%;
	background-image: url(../graphics/archive_head_bg2.jpg);
	background-repeat: no-repeat;
}
.box_archive p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 66%;
	margin-top: 0.2em;
	margin-bottom: 0.8em;
	padding: 0 1.0em 0 1.0em;
	line-height: 1.5em;
	color: #4d393d; /* darkest plum */
}

.box_archive p.rule {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e5baac; /* pale pink */
	line-height: 0.5em;
}

.box_archive pc {
	margin-bottom: 2.0em;
}


/* PORTFOLIO / SLIDESHOW DIVS _________________________________ */

div.slideshow {
	padding-bottom: 10px;
}

div.buttonsbg {
	float: left;
	width: 940px;
	padding-left: 10px;
	background-color: #0D0C0C;	/* match stage bg in Flash */
}

div.button {
	float: left;
	width: 200px;
	margin: 6px 10px 4px 0px;
}

div.button a {
	display: block;
	border: 2px solid #33322f;	/* matches content bg in Flash */
}

div.button a:hover {
	background-color: #33322f;	/* matches content bg in Flash */
	border: 2px solid #cc4129;
}

div.button h3 {
	font-size: 80%;
	display: block;
	color: #f2ecdf;
	text-align: center;
	margin: 0;
}

div.button h3 a, div.button h3 a:visited, div.button h3 a:active {
	color: #f2ecdf;
	text-decoration: none;
	padding: 1px;
}


body#portfolio1 div.button#slideshow1 a, 
body#portfolio2 div.button#slideshow2 a, 
body#portfolio3 div.button#slideshow3 a {
	border: 2px solid #cc4129;/* dark red */
}


/* HEROBOX DIVS _______________________________________ */

div#herobox_wrapper {
	position: relative;
	z-index: 10;
	padding-top: 15px;
	padding-left: 1px; /* centers 4 boxes */
	width: 980px; /* same as container */
	height: 125px; /* 125+15=140px = this sets the height of the dark bar in the background gradient */
	margin-bottom: 20px;
}

div.herobox_1, div.herobox_2, div.herobox_3, div.herobox_4 {
	float: left;
	height: 108px;
	width: 234px;  /* images are 234x108, no borders */
	margin-right: 14px; /* first 3 boxes only, not on box 4 */
	border: 0px solid #807c75; /* bige B50*/
}

div.herobox_4 {
	margin-right: 0px;
}


/* STYLING FOOTER */

div#footer {
	clear: both;
	width: 950px;
	height: 20px;
	margin: 0px auto 10px auto;
	padding: 0px;
}
div#footer p {
	text-align: center;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 66%;
	color: #7F7D7B;
}

/* STYLING IMAGES */

.floatleft {
	float: left;
	margin-right: 10px;
}
.floatright {
	float: right;
	margin-left: 10px;
}

img {
	border: 0; 
	margin: 0;
	padding: 0;
}


.img_borderonly,
.img_borderonly_sidebar,
.imgfloatright,
.imgfloatrighthead,
.imgfloatleft,
.imgfloatlefthead,
.imgfloatleftclearboth {
	border: 1px solid #e5baac; /* pale pink */
}

.noborder {
	border: 0;
}

.img_borderonly {  /* use for a stack of images, does NOT float*/
	margin-top: 6px;
	margin-right: 10px;
	margin-bottom: 4px;
	margin-left: 0px;
}


.img_borderonly_sidebar {  /* use for sidebar - no margins left/right */
	margin-top: 0px;
	margin-right: 0px; /* needs to be 0 so content doesn't get pushed down*/
	margin-bottom: 0px;
	margin-left: 0px;
}

.imgfloatright, .imgfloatrighthead {
	float: right;
	margin-top: 4px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 8px;
}
.imgfloatrighthead {
	margin-top: 0px;
}


.imgfloatleft, .imgfloatlefthead, .imgfloatleftclearboth {
	float: left;
	margin-top: 4px;
	margin-right: 10px;
	margin-bottom: 6px;
	margin-left: 0px;
}

.imgfloatlefthead {
	margin-top: 0px;
}

.imgfloatleftclearboth {
	clear: both;
	margin-top: 6px;
}

/* MISC */



.align_center {
	text-align: center;
}

.align_right {
	text-align: right;
}


.nomargins {
	margin: 0 !important;
}

.smallmargintop {
	margin-top: 4px !important;
}

.extraSpaceB4 {
	padding-top: 10px !important;
}

.extraSpaceAfter {
	padding-bottom: 10px !important;
}

.extraSpaceB4After {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.rule {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e5baac; /* pale pink */
	line-height: 1em;
}
.ruleabove {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #e5baac; /* pale pink */
	padding-top: 14px;
	clear: both;
	margin-top: 20px;
}

/* CLEARERS */

.clearleft {
	clear: left;
}

.clearright {
	clear: right;
}

.clearboth {
	clear: both;
}


div.clearer { /* see www.complexspiral.com/publications/containing-floats, don't need to put nb space */
	clear: both; 
	line-height: 0px; 
	height: 0px;
}




/* Columns - 960 GRID SYSTEM */

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {
  float: left;
  margin-right: 10px;
}

/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }

/* Use these classes to set the width of a column. 
NOTE that when using the .box class, subtract 2 for box borders and 32 for padding and 2 for img border = 36 less*/

.span-1 {width: 30px;}
.span-2 {width: 70px;}
.span-3 {width: 110px;}
.span-4 {width: 150px;} /* images in video thumbnails = 148px plus border = 150 */
.span-5 {width: 190px;} /* images in box div  = 154px */
.span-6 {width: 230px;} /* images in box div  = 194px */
.span-7 {width: 270px;} /* images in box div  = 234px */
.span-8 {width: 310px;} /* images in box = 274px */
.span-9 {width: 350px;} /* images in box = 314px */
.span-10 {width: 390px;}  /* images in box = 354px */
.span-11 {width: 430px;}  /* images in box div  = 394px */
.span-12 {width: 470px;}
.span-13 {width: 510px;}
.span-14 {width: 550px;}
.span-15 {width: 590px;}
.span-16 {width: 630px;}
.span-17 {width: 670px;}
.span-18 {width: 710px;}
.span-19 {width: 750px;}
.span-20 {width: 790px;}
.span-21 {width: 830px;}
.span-22 {width: 870px;}
.span-23 {width: 910px;}
.span-24, div.span-24 { width:950px; margin:0; }


/* Add these to a column to append empty cols. */

.z_append-1 { padding-right: 40px;}
.z_append-2 { padding-right: 80px;}
.z_append-3 { padding-right: 120px;}
.z_append-4 { padding-right: 160px;}
.z_append-5 { padding-right: 200px;}
.z_append-6 { padding-right: 240px;}
.z_append-7 { padding-right: 280px;}
.z_append-8 { padding-right: 320px;}
.z_append-9 { padding-right: 360px;}
.z_append-10 { padding-right: 400px;}
.z_append-11 { padding-right: 440px;}
.z_append-12 { padding-right: 480px;}
.z_append-13 { padding-right: 520px;}
.z_append-14 { padding-right: 560px;}
.z_append-15 { padding-right: 600px;}
.z_append-16 { padding-right: 640px;}
.z_append-17 { padding-right: 680px;}
.z_append-18 { padding-right: 720px;}
.z_append-19 { padding-right: 760px;}
.z_append-20 { padding-right: 800px;}
.z_append-21 { padding-right: 840px;}
.z_append-22 { padding-right: 880px;}
.z_append-23 { padding-right: 920px;}

/* Add these to a column to prepend empty cols. */

.z_prepend-1 { padding-left: 40px;}
.z_prepend-2 { padding-left: 85px;}
.z_prepend-3 { padding-left: 120px;}
.z_prepend-4 { padding-left: 160px;}
.z_prepend-5 { padding-left: 200px;}
.z_prepend-6 { padding-left: 240px;}
.z_prepend-7 { padding-left: 280px;}
.z_prepend-8 { padding-left: 320px;}
.z_prepend-9 { padding-left: 360px;}
.z_prepend-10 { padding-left: 400px;}
.z_prepend-11 { padding-left: 440px;}
.z_prepend-12 { padding-left: 480px;}
.z_prepend-13 { padding-left: 520px;}
.z_prepend-14 { padding-left: 560px;}
.z_prepend-15 { padding-left: 600px;}
.z_prepend-16 { padding-left: 640px;}
.z_prepend-17 { padding-left: 680px;}
.z_prepend-18 { padding-left: 720px;}
.z_prepend-19 { padding-left: 760px;}
.z_prepend-20 { padding-left: 800px;}
.z_prepend-21 { padding-left: 840px;}
.z_prepend-22 { padding-left: 880px;}
.z_prepend-23 { padding-left: 920px;}


/* Border on right hand side of a column. */
div.border {
	border-right: 1px solid #e5baac; /* pale pink */
	padding-right: 4px;
	margin-right: 5px;
}

/* Border with more whitespace, spans one column, darker rule */
div.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #e5baac; /* pale pink, same as box and image borders */
}




/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element - ? may NEED TO PUT ON BOX OR CONTENTS, not the span-## div */
.prepend-top { 
  margin-top: 2em; 
}
.append-bottom { 
  margin-bottom: 1.5em; 
}


/* from Bring Down IE6 website's code */

#ie6Warning {
	border: 1px solid #bbbbbb;
	padding: 6px 10px 1px 10px;
	margin-bottom: 10px;
	background-color: #FC6;
}

#ie6Warning h2 {
	color: #C30;
	margin-top: 0.5em;
}
		
#ie6Warning p {
	font-size: 80%;
	font-family: Verdana, Geneva, sans-serif;
}