* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* When I cut over to use this style sheet, merge these, and then fix all the stuff that breaks in the site */
P, TD, DL, BODY, BLOCKQUOTE, PRE, OL, UL, BR  {
        font-size: 11pt;
        font-weight : normal;
        color : #666666;
}

/* To make fonts work consistently on IE:
1) Convert the TTF to WOFF and EOT using font2web.com or fontsquirrel.com
2) upload those fonts and include them in the SRC statement.
*/
@font-face {
        font-family: 'Lubalin-Book'; /* IE wants the exact font name here */
        src:    url('/common/fonts/lubalin-book.ttf') format('truetype'),
                url('/common/fonts/lubalin-book.eot') format('embedded-opentype'),
                url('/common/fonts/lubalin-book.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: 'Lubalin-Demi'; /* IE wants the exact font name here */
        src:    url('/common/fonts/lubalin-demi.ttf') format('truetype'),
                url('/common/fonts/lubalin-demi.eot') format('embedded-opentype'),
                url('/common/fonts/lubalin-demi.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}

html, body {
        margin: 0;
	padding: 0;
	background-color: #f7e9c9;
	background-color: #eec68d;
	scrollbar-base-color: #FFF6E2;
        /* These next two get rid of that small grey border around the page in IE */
        border: 0;
        outline: 0;
	height: 100%;
}  

.page_body {
        position: relative;
        width: 950px;
        /*height: 100%; this causes problems: if I leave it in, then long pages don't format correctly, not extending the white <td> all the way to the bottom. But if I take it out then short pages dont extend to the bottom of the screen. */
        margin: 0px auto; /* Center the div horizontally */
        padding: 0;
        background-color: #FFFFFF;
        box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
}

/* Spacing around the text on the inside pages */
.text_body {
	padding: 20px; 
	padding-left: 30px;
	padding-bottom: 35px;
}
#darker_page_background .text_body {
        background-color: #fff6e7;
}

/* Links */ 
a:link, a:visited {
	color: #CC6600;
}
a:hover, a:active {
	color: #CC6600;
}
a.heading4red:link, a.heading4red:visited, a.relatedlink:link, a.relatedlink:visited  {
	font-weight : bold;
	color : #993300;
}
a.heading4red:hover, a.heading4red:active, a.relatedlink:hover, a.relatedlink:active {
	font-weight : bold;
	color: #CC6600;
}

/* For the links on the top left of every page */
p.navlink  {
	line-height: 1.1;	
}
a.navlink:link, a.navlink:visited  {
	color : #993300;
	text-decoration : none;
}
a.navlink:hover, a.navlink:active {
	color: #CC6600;
	text-decoration : underline;
}
.relatedlink  {
	font-weight : bold;
	color : #993300;
}
p.homenavlink  {
	line-height: 1.5;	
}
/* For the links on the bottom of every page */
a.bottomlink:link, a.bottomlink:visited  {
	font-size : 8pt;
	color : #993300;
	text-decoration : none;
}
a.bottomlink:hover, a.bottomlink:active {
	font-size : 8pt;
	color: #CC6600;
	text-decoration : underline;
}
/* For the links in the box headlines on the home page */
a.boxheadline:link, a.boxheadline:visited  {
	font-size : 10pt;
	color : #666666;
	font-weight : bold;
	text-decoration : none;
}
a.boxheadline:hover, a.boxheadline:active {
	font-size : 10pt;
	color : #666666;
	font-weight : bold;
	text-decoration : none;
}
.boxheadline {
	font-size : 10pt;
	color : #666666;
	font-weight : bold;
}

/* In HTML5 I cannot get the line spacing closer for this element. That is because the line spacing (line-height) is controlled by the parent block element.
But don't make this display:inline-block because that causes the test to not display inline, I know, weird. 
*/
small, .small, .downloads  {
	font-size: 8pt;
	font-weight: normal;
	color: #666666;	
}

#smallblack * {
	color : black;	
}

.smallblack  {
	font-size : 8pt;
	color : black;	
}

.verysmall  {
	font-size : 6pt;
	line-height : 12pt;	
	font-weight : normal;
	color : black;
}

.largetext  {
	font-size : 12pt;
	font-weight : normal;
	color : #666666;	
	line-height: 15pt;	
}

.blog_intro  {
	line-height: 1.1;	
	color : #882200;
}

H1, .heading1, .pagetitle  {
	font-family: 'Lubalin-demi', Georgia, serif;
	font-size : 20pt;
	font-weight : normal;
	color : #993300;
	margin-top: 0;
}
.largehead  {
	font-family: 'Lubalin-demi', Georgia, serif;
	font-size : 30pt;
	font-weight : normal;
	color : #993300;
	margin-top: 1em;
	text-transform: uppercase;
}
.pagetitle  {
	text-transform: uppercase;
}
.nocaps { /* Remove Caps for .pagetitle */
	text-transform: none !important;
}

H2, .heading2  {
	font-family: 'Lubalin-book', Georgia, serif;
	font-size : 16pt;
	font-weight : normal;
	color : #993300;
}

H3, .heading3, .pagesubtitle  {
	font-family: 'Lubalin-book', Georgia, serif;
	font-size : 16pt;
	font-weight : normal;
	color : #E29203;
}

H4  {
	font-weight : bold;
	color : #E29203;
}

.tableheading  {
	font-size : 14pt;
	color : white;
}

th {
	font-size: 10pt;
	font-weight: bold;
	color : #666666;
}

.heading4  {
	font-weight: bold;
	color : #E29203;
}

.headingnews  {
	font-weight: bold;
	color: #993300;
	text-decoration: underline;
}

.heading4red  {
	font-family: 'Lubalin-demi', Georgia, serif;
	font-size: 13pt;
	color: #993300;
}
.heading4red i  {
	font-family: 'Lubalin-demi', Georgia, serif;
	font-size: 13pt;
	color: #993300;
	font-style : italic;
}
.heading4redlight  {
	font-family: 'Lubalin-book', Georgia, serif;
	font-size: 11pt;
	color: #993300;
}
.subhead {
	font-size: 14.0pt;
	font-family: "Calibri","sans-serif";
	font-weight: bold;
}

.quote_large  {
	font-family: 'Lubalin-book', Georgia, serif;
	font-size : 12pt;
	font-weight : normal;
	color : #CC6600;	
}

.quote_small  {
	font-family : Arial, Helvetica, sans-serif;
	font-size : 9pt;
	font-weight : normal;
	color : #CC6600;	
}

.quote_large2 {
	font-family: 'Lubalin-book', Georgia, serif;
	font-size : 12pt;
	font-weight : normal;
	color : #555555;	
}

.quote_large2 i {
	font-family: 'Lubalin-book', Georgia, serif;
	font-size : 12pt;
	font-weight : normal;
	font-style : italic;
	color : #555555;	
}

.quote_small2  {
    font-family : Arial, Helvetica, sans-serif;
	font-size : 9pt;
	font-weight : normal;
	color : #555555;	
}

.impulse {
	width: 240px;
	padding: 10px;
	background-color: #FFFBE7;
	border-top: 1px dotted #b2997f;
	font-size: 8pt;
	font-weight: normal;
	color: #666666;	
	overflow: hidden; /* This creates space at the bottom of the div to clear floated images */
}

.callout {
	background-color: #FFFBE7;
	border: 2px solid #EFE6D2;
	border-radius: 6px;
	padding: 5px;
}

hr {
	border: none;
	color: #E29203;
	background-color: #E29203;
	height: 1px;
}

select, input, textarea {
 	font-family : Arial, Helvetica, sans-serif;
	font-size : 11pt;
	padding: 3px;
	color: black;
	background-color: #FFF6E2;
	border: 1px solid #890505;
}

/* This is for displaying checkboxes and radio buttons, which look
bad when formatted using the above style */
input.box {
	background-color: white;
	border: none;
}
select.box {
	background-color: white;
	border: none;
}

/* This is for displaying checkboxes and radio buttons in table rows 
where I do not want a border around them.
I don't really have to use this any more on modern browsers. */
input.boxhl {
	background-color: #FFF6E2;
	border: none;
}

.button, a.button {
	-webkit-appearance: none; /* Remove Safari's style overrides for buttons */
	font-family : Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: white;
	padding: 5px;
	padding-bottom: 4px;
	text-transform: uppercase;	
	text-decoration: none;	
	background-color: #e39203;
	border: none;
	cursor: pointer;
        cursor: hand;
}

.button2, a.button2 {
	-webkit-appearance: none; /* Remove Safari's style overrides for buttons */
	font-family : Arial, Helvetica, sans-serif;
	font-size : 7pt;
	line-height: 8pt;
	color: white;
	padding-top: 1px;
	text-transform: uppercase;	
	text-decoration: none;	
	background-color: #FDB200;
	border: 1px solid #E49105;
	font-weight : bold;
	cursor: pointer;
        cursor: hand;
	border-radius: 7px;
}

.buyit_button, a.buyit_button {
	-webkit-appearance: none; /* Remove Safari's style overrides for buttons */
	font-family : Arial, Helvetica, sans-serif;
	font-size : 12pt;
	color: white;
	padding: 5px;
	padding-bottom: 4px;
	text-transform: uppercase;	
	text-decoration: none;	
	background-color: #e39203;
	border: none;
	font-weight : bold;
	cursor: pointer;
        cursor: hand;
	border-radius: 5px;
}
a.buyit_button {
	padding-top: 3px;
	padding-bottom: 2px;
	padding-left: 6px;
	padding-right: 6px;
}

*:hover.button, *:active.button, *:hover.button2, *:active.button2, *:hover.buyit_button, *:active.buyit_button, *:hover.slider_button, *:active.slider_button {
        background-color: #cc6600;
}


/* Remove the space at the top of ul and ol */
ul.compact, ol.compact {
	margin-top: 2px;
}

/* Add space between list elements */
ul.expand li, ol.expand li, li.expand {
	margin-bottom: 0.7em;
}

ul.openbox {
	list-style-image: url(open-box-bullet.gif);
	margin-left: 10px;
	padding-left: 10px;
}
ol.alpha {
	list-style-type: upper-alpha;
}
ol.alpha > li { /* Add space around list items */
	padding-top: 1em;
	padding-bottom: 1em;
}
ol.alpha > li:first-child { /* Don't add space at top of list */
	padding-top: 0;
}

a.downloads  {
	font-size : 8pt;
	color: #CC6600;
}

.alignleft {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	float: left;
	border: none;
}

.aligntopleft {
	margin-top: 4px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	float: left;
	border: none;
}

.alignright {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
	border: none;
}

.link_list {
	clear: both;
}
.link_list a {
	line-height: 16pt;
}
/* I created this "mitch_link" tag so that Mitch can edit the links himself. Just using a <br> between <a> tags the FCKeditor continues the same link when you SHIFT+ENTER
to add a new line. Using a <p> meant that I cannot control spacing between sections
of links. So I invented this new tag to enclose the links. */
.link_list mitch_link {
	line-height: 16pt;
	display: block;
}

/* The background setup for the articles page */
.article_bkgd {
	background-image: url(articles-background.gif);
	background-repeat: no-repeat;
	background-position: top right; 
}

sup  {
	font-size : 6pt;
}

/* For displaying headings on forms */
/* class="form" is the normal text */
.form {
	font-weight: normal;
}
/* class="form_required" is for required fields */
.form_required {
	font-weight: bold;
}
/* class="form_error" is for error fields */
.form_error {
	color: red;
	font-weight: bold;
}
.small_input_box {
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color : #666666;	
	background-color: transparent;
	border: none;
}

/* Callout Boxes */
.box_right_border {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
	padding: 10px;
	background-image: url(callout_box_background.jpg);
	background-repeat: repeat-y;
	background-position: top left;
        border-left: 1px solid #E29203;
}

/* Poll styles */
.poll_section {
	font-size : 12pt;
	color: white;
	font-weight : bold;
	background-color: #E9B14D;
}
table.poll tr:nth-child(even) {
        background-color: #FFF6E2;
}

.poof {
	font-size: 22pt;
	color: white;
	font-weight: normal;
	background-color: #0d277a;
	margin: 10px;
        border: 2px solid #FF0000;
}

#popup {
	position: absolute;
	top: 100px;
	left: 50%;
	width: 400px;
	margin-left: -200px; /* set to negative number 1/2 the div width */
        background-color: white;
	padding: 12px;
	border: 10px solid #E29203;
	visibility:hidden;
	z-index: 500; /* Make this larger than z-index for opaque */
}

img.products_table {
	display: inline-block;
	max-height: 150px;
	max-width: 150px;
}

/* Boxes for client logos */
.logo_box {
	width: 160px; /* Equals max Logo width */
	height: 60px; /* Equals max Logo height */
	padding: 5px;
	margin: 15px;
	float: left;
	background-color: #FFFFFF;
	border: 2px solid #EFE6D2;
        /* box-shadow: 0px 0px 5px rgba(0,0,0,0.4); */
	border-radius: 6px;
	text-align: center;
	line-height: 60px; /* Equals max div height, Required to vertically align images */
}
.logo_box img {
	vertical-align: middle;
	display: inline-block;
	max-height: 60px;
	max-width: 160px;
}

/* Styling for poems */
.poem_title {
	font-family: Georgia, Times, serif;
	font-size: 14pt;
	font-weight: normal;
	color : #993300;
	white-space: pre;
}
.poem_text {
	font-family: Georgia, Times, serif;
	font-size: 12pt;
	white-space: pre;
}

/* Styles to overlay play button on image */
.video_container {
        position: relative;
	width: 150px;
}
.video_play {
        position: absolute;
        display: block;
        left: 51px; /* Change these to center the button on video_thumbnail */
        top: 33px;
}
.video_thumbnail {
        max-width: 150px;
}
.photo_border {
        border: 1px solid #000000;
}
.photo_corners {
        border-radius: 15px;
}
.photo_shadow {
        box-shadow: 5px 5px 15px rgba(0,0,0,0.7);
}

/* Styles for the home page slider */
.slideContent {
        height: 350px; /* Height of slider - border - padding */
        width: 950px; /* Width of slider - border - padding */
        background: #000000;
}
img.slider_img {
        border: none;
        max-height: 350px;
}
.slider_text_box {
        position: absolute;
	top: 50px;
	right: 20px;
	/* Vertically center it
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%); */
	/* /Vertically center the div */
        background-color: rgba(0,0,0,0.5);
        padding: 10px;
        border-radius: 14px;
}
.slider_text_heading  {
	font-family: 'Lubalin-Demi', Georgia, serif;
	font-size: 24pt;
	color: #e39203;
	/*text-shadow: 1px 1px #000000;*/
}
.slider_text_heading_light  {
	font-family: 'Lubalin-book', Georgia, serif;
	font-size: 18pt;
	color: #e39203;
}
.slider_text {
        font-size: 14pt;
	color: #FFFFFF;
}
a.slider_button {
        position: absolute;
	bottom: 40px;
	right: 40px;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 10pt;
	color: #FFFFFF;
	padding: 4px;
	padding-left: 7px;
	padding-right: 7px;
	text-transform: uppercase;	
	text-decoration: none;	
	background-color: #e39203;
	font-weight: bold;
	cursor: pointer;
        cursor: hand;
}

/* Styles for new home page */
.header {
        position: relative;
	/* background-color: #FFFBE7; Lighter color that matches sidebar */
	background-color: #f7e9c9;
        background-image: url('/images/header-background.png');
        background-repeat: repeat-x;
	width: 100%;
        height: 100px;
}
.header_text {
	position: absolute;
	top: 30px;
	right: 30px;
	color: #E29203;
	font-size: 14pt;
}
.header_addthis {
	position: absolute;
	top: 60px;
	right: 30px;
	color: #E29203;
	font-size: 10pt;
}
.home_page_text, .home_page_text i {
	padding: 10px;
	text-align: center;
	/*color: #E29203;*/
	color: #993300;
	font-family: 'Lubalin-Book', Georgia, serif;
	font-size: 15pt;
	line-height: 22pt;
}

/*.header_home {
        position: relative;
        background-image: url('/title_background_filler.gif');
        background-repeat: repeat-x;
	width: 100%;
        height: 100px;
}*/

/* Styles for new Footer */
.footer {
	width: 950px;
        background-image: url('/images/footer.jpg');
        background-repeat: none;
	background-color: #f1c172;
	padding: 20px;
}
.footer a {
        font-family: Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        font-weight: normal;
        text-decoration: none;
        display: block;
	margin-top: 4px;
        font-size: 9pt;
        text-transform: uppercase;
}
a.blogsum_title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11pt;
	font-weight: bold;
        text-transform: uppercase;
}

/* Styles for the new home page boxes */
.home_box {
	width: 440px;
        height: 160px; /* This controls the height of all boxes */
	margin-top: 20px;
	margin-left: 20px;
	float: left;
	background-color: #FFFBE7;
	border: 2px solid #EFE6D2;
	border-radius: 6px;
}
.home_box img {
        height: 160px; /* I do need this in addition to the height of the home_box.
	make sure the two match. */
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
.home_box_text {
        font-size: 10pt;
	padding-left: 15px;
	padding-right: 5px;
}

.two-column {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 30px;
        -moz-column-gap: 30px;
        column-gap: 30px;
}

/* Adding display:block to the images seems to remove the 5PX bottom padding */
/* that we get on images in <td>s with HTML5 doctype                         */
/* But only do this for images within <td>s.                                 */
td > img {
        display: block;
}