/* Studio of Ballet Arts
 * 
 * Site development, May 2010
 *
 *
 * Brenda Egeland
 * Red Letter Design
 * www.RedLetterDesign.net
 *
 */
/* Index:
 *
 * 0,0  Reset
 * 0.1  Helpful fixes
 *
 * 1.0  Structure 
 *
 * 2.0  Fonts
 *
 * 3.0 Typography
 *
 * 4.0 Navigation Elements
 * 4.1 Primary Nav
 * 4.2 Sub Nav
 *
 * 5.0 Columns
 *
 *
 *
 *
 * 10.0 Useful elements
 *
 */
 
/* ------- 0.0. Reset
 *
 * Reset browser default styles to insure consistency across various browsers
 *
 */
html, body, div, 
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-size: 100%; line-height: 1; margin: 0; padding: 0; text-align: left; vertical-align: baseline; }
a img, :link img, :visited img { border: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

/* ------- 0.1. Helpful Fixes
 *
 * 
 *
 */

/* -- forces vertical scrollbars to avoid horizontal shift on short pages */
html { overflow-y: scroll; }

/* ------- 1.0 Structure
 *
 * the divs etc. that make up the layout of the site    
 *
 */
body { background: #e4f0d6 url(../images/gradient.png) left top repeat-x; }
div#container { margin: 0 auto; padding: 90px 0 0 0; position: relative; width: 930px; }
div#content_top { background: transparent url(../images/content_top.png) left top no-repeat; margin: 0 0 0 250px; min-height: 30px; padding: 0; position: relative; }
div#interior_navigation { height: 40px; padding: 10px 40px 0 12px; }
div#content_container { background: url(../images/content_body.png) left top repeat-y; margin: 0 0 0 250px; float: left; width: 680px;}
div#content { clear: left; margin: 0 40px 0 30px; min-height: 600px; padding: 0; }
	div#content.front { background: url(../images/ballet.jpg) right top no-repeat; padding-top: 20px; position: relative; top: -20px; }
div#content_bottom { background: url(../images/content_bottom.png) left top no-repeat; height: 40px; margin: 0 0 0 250px; padding: 25px 30px 0 10px; clear: left;}
div#footer {  }
div#logo { height: 130px; left: 0; position: absolute; top: 0; width: 330px; }
div#contact { height: 90px; left: 630px; position: absolute; top: 0; width: 280px; }
div#sidebar { left: 0; position: absolute; top: 75px; width: 250px; }
div#SBAaddress {  }
div#navigation {  }
div#teasers { height: 110px; margin: 20px 0 0 10px; width: 230px; overflow: hidden;}
div#social_media { margin: 20px 0 0 10px; width: 230px; }
div#parent_pages { margin: 20px 0 0 10px; width: 230px; }

/* ------- 2.0 Fonts
 *
 * Put all font declarations here
 *
 */
body { font-family: Georgia, "Times New Roman", serif; }
div#SBAaddress p,
div#navigation li,
div#interior_navigation li, 
div#social_media p,
div#contact p,
div#frontpage h1,
table.schedule td { font-family:  Tahoma, sans-serif; }

input, textarea { font-family: Verdana, sans-serif; }

/* ------- 3.0 Typgraphy
 *
 * Font sizes, colors, padding, etc.
 *
 */
body, input, textarea { color: #444444; font-size: 14px; line-height: 1.0; }
h1 { color: #774fa4; font-size: 24px; font-weight: normal; line-height: 24px; margin: 0; padding: 6px 0 6px 0; }
h2 { color: #517f1b; font-size: 20px; font-weight: normal; line-height: 24px; margin: 0; padding: 12px 0 0 0; }
h3 { color: #333333; font-size: 16px; font-style: italic; font-weight: normal; line-height: 24px; margin: 0; padding: 12px 0 6px 0; }
p { font-size: 14px; line-height: 24px; margin: 0; padding: 6px 0 12px 0; }
li { font-size: 14px; line-height: 18px; margin: 0; padding: 0; }
	li li { font-size: 12px; }
strong { color: #000000; font-weight: bold; }
em { color: #000000; font-style: italic; }
blockquote { background-color: #F5F9F0; border-left: 8px solid #e4f0d6; margin: 9px 0px; padding: 0 18px 0 9px; }
	blockquote p { font-style: italic; padding: 9px 0 9px 0; }

/* Links */
a,
a:link,
a:visited { color: #774fa4; }
a:hover,
a:active { color: #517f1b; }
div#content a {font-weight: bold; }

/* Lists */
ul { list-style-position: outside; list-style-type: square; margin: 0 0 0 1.5em; padding: 6px 0 12px 0; }
ol { list-style-position: outside; list-style-type: decimal; margin: 0 0 0 1.5em; padding: 6px 0 12px 0; }
ul ul, 
ol ul { list-style-position: outside; list-style-type: disc; margin: 0 0 0 2em; padding: 0; }
ol ol, 
ul ol { list-style-position: outside; list-style-type: lower-alpha; margin: 0 0 0 2em; padding: 0 0 0 0; }
dl { margin: 0; padding: 6px 0 12px 0; }
dt { font-size: 14px; font-weight: bold; line-height: 18px; margin: 0; padding: 0; }
dd { font-size: 14px; line-height: 18px; margin: 0 0 0 1.5em; padding: 0; }

/* Tables */
table { background-color: #ffffff; border: 1px solid #e4f0d6; margin: 0 0 17px 0; padding: 0; }
td, th { font-size: 14px; font-weight: normal; line-height: 18px; margin: 0; padding: 2px; text-align: left; }
th { background-color: #e4f0d6; border-bottom: 1px solid #CCDFB5; font-weight: bold; vertical-align: middle; }
td { background-color: #ffffff; border-bottom: 1px solid #e4f0d6; vertical-align: middle; }
tr.alt td { background-color: #F5F9F0; }
.cellLeft { text-align: left !important; }
.cellRight { text-align: right !important; }
.cellCenter { text-align: center !important; }
.cellNoWrap { white-space: nowrap !important; }
.cellDate { padding-right: 10px; text-align: right; white-space: nowrap; }

/* Forms */
form {  }
table.formTable { background-color: #F5F9F0; }
.formTable th { background-color: transparent; border: none; color: #517f1b; font-size: 11px; font-weight: normal; line-height: 13px; text-align: right; }
.formTable td { background-color: transparent; border: none; font-size: 12px; line-height: 13px; }
textarea { color: #774fa4; font-size: 15px; padding: 2px; width: 100%; border: 1px solid #e4f0d6;}
input[type="text"] { color: #774fa4; font-size: 15px; padding: 1px; width: 100%; border: 1px solid #e4f0d6; background-color: #ffffff;}
input[type="password"] { color: #774fa4; font-size: 15px; padding: 1px; width: 100%; }
select { font-size: 11px; }
input.button { font-size: 11px; line-height: 13px; padding: 3px 3px 2px 2px; }
div.checkInput { float: left; padding-right: 20px; }
label { font-size: 11px; font-weight: normal; line-height: 18px; }
	label.selectLabel { font-weight: normal; }
form p { padding: 0; }
div#honeypot { display: none; }

/* ------- 3.1 Contact header */
div#contact p.phone { background: url(../images/phone.png) left top no-repeat; color: #517f1b; float: right; font-size: 36px; line-height: 40px; padding: 4px 0 0 50px; }
div#contact p.email { background: url(../images/email.png) left top no-repeat; color: #517f1b; float: right; font-size: 20px; line-height: 40px; padding: 16px 0 10px 50px; }
	div#contact p.email a,
div#contact p.email a:link,
div#contact p.email a:visited { color: #517f1b; }
	div#contact p.email a:hover { color: #774fa4; }


/* ------- 3.2 Sidebar address */
div#sidebar div#SBAaddress p { color: #517f1b; font-size: 12px; line-height: 18px; margin: 0; padding: 0 0 0 15px; }

/* ------- 3.3 Sidebar social_media */
div#social_media p { color: #517f1b; }
div#social_media input[type="submit"] { float: right; }

/* ------- 3.6 Graphics */
img.imgRight { float: right; margin: 4px 0 0px 18px; padding: 0; }
img.imgLeft { float: left; margin: 4px 18px 0px 0; padding: 0; }

/* ------- 3.7 footer */
div#footer p { color: #777777; font-size: 11px; line-height: 16px; padding: 0; }
	div#footer p.credit a { color: #777777; font-size: 9px; line-height: 16px; text-decoration: none; }
		div#footer p.credit a:hover { color: #990000; text-decoration: underline; }

/* ------- 3.9 Miscellaneous Elements */
.required { color: #774fa4; font-size: 11px; }
.retMessage { color: #774fa4; font-weight: bold; }
.success { display: block; background-color: #FFEBB0; border: 2px solid #774fa4; padding: 10px; margin: 10px 0 15px 0; }
.formError { color: #990000; font-size: 11px; }
.formNote { font-size: 11px; color: #517f1b; font-style: italic;}
.warning { color: #990000; font-weight: bold; }
.error { color: #990000; font-weight: bold; }
.detail { font-size: 11px; color: #666666 }
.note { font-size: 11px; }
.rightalign { text-align: right; }
.nospacing { margin: 0; padding: 0; }
div.flashMessage { float: right; margin-left: 10px; }
div.attorney { float: left; width: 255px; }
div.first { padding-right: 20px; }
.floatclear { clear: both; }

/* ------- 4.0 Navigation Elements
 *
 */

/* ------- 4.1 Primary Nav */
ul#nav { list-style: none; margin: 0; padding: 0; text-indent: 0; }
	ul#nav li { text-indent: 0; }
		ul#nav li a { background: url(../images/buttons.png) left top no-repeat; color: white; display: block; font-size: 18px; letter-spacing: 1px; line-height: 20px; padding: 15px 10px 15px 40px; text-decoration: none; }
			ul#nav li a:hover { background-position: center top; color: #774fa4; }
		ul#nav li.current_page a, 
        ul#nav li.current_page a:link,
        ul#nav li.current_page a:visited
        ul#nav li.current_page a:hover,
		ul#nav li.parent_page a, 
        ul#nav li.parent_page a:link,
        ul#nav li.parent_page a:visited
        ul#nav li.parent_page a:hover { background-position: right top; color: #ffffff; cursor: default; }

/* ----- 4.2 Sub Nav */
ul#subnav { float: left; list-style: none; margin: 0; padding: 0; position: relative; z-index: 100; }
	ul#subnav li { background: url(../images/subnavedge.png) left -80px no-repeat; display: inline; float: left; height: 40px; padding-left: 30px; text-indent: 0; overflow: hidden; }
		ul#subnav li#first_subnav { background-position: left top; }
	ul#subnav li.current_page { background-position: left -120px; }
		ul#subnav li#first_subnav.current_page { background-position: left -40px; }
	ul#subnav li.after_current { background-position: left -160px; }
	ul#subnav li a { background: url(../images/subnavcenter.png) left top repeat-x; color: white; display: block; float: left; font-size: 14px; height: 34px; line-height: 18px; padding: 6px 0 0 0; text-decoration: none; }
	ul#subnav li.current_page a { background-position: left bottom; }
	ul#subnav li a:hover { color: #774fa4; }
	ul#subnav li.current_page a { color: #ffffff; cursor: default; }
	ul#subnav li#last_subnav span { background: url(../images/subnavedge.png) left -200px no-repeat; float: left; height: 40px; width: 30px; }
	ul#subnav li#last_subnav.current_page span { background-position: left -240px; }

/* ------- 4.4 Sitemap */
div.sitemap  .related_text { padding-left: 15px; }

/* ------- 10.0 Useful elements
 *
 */
.clear { clear: both; }
.readmorelink { float: right; padding: 8px 0 0 3px; }
div.pageHeight { min-height: 500px !important; }

div.shoebox {
	clear: left;  }
	
a.hoverpic { margin: 0 0 10px 0; border: 1px solid #aaaaaa; float: left; display: block; width: 120px; height: 120px; background-image: url(../images/shoes.jpg); background-repeat: no-repeat; }

div#ballet a.hoverpic { background-position: left top; }
div#ballet a.hoverpic:hover { background-position:  right top }

div#jazz a.hoverpic { background-position: left -120px; }
div#jazz a.hoverpic:hover { background-position:  right -120px; }

div#modern a.hoverpic { background-position: left -240px; }
div#modern a.hoverpic:hover { background-position:  right -240px; }

div#tap a.hoverpic { background-position: left -360px; }
div#tap a.hoverpic:hover { background-position:  right -360px; }

div.shoeboxtext {padding-left: 135px; }
div#frontpage h1 { color: #517f1b; }
div#frontpage p { font-size: 16px; }

ul#teaserBox {list-style: none; margin: 0; padding: 0; text-indent: 0; }

div.sm_icon { padding-top: 10px; }

div.callout {
	margin: 0 0 15px 0;
	padding: 10px;
	border: 2px solid #774fa4; 
	background-color: #F5F9F0; }
div.callout h2 {text-align: center; }
div.callout p {text-align: center; font-size: 16px; line-height: 18px; margin: 0; padding: 6px 0 6px 0; }

table.schedule td { vertical-align:  top; }
table.schedule td.day { font-size: 18px; background-color: #f5f9f0; color: #517f1b; padding: 5px; font-weight: bold;}
table.schedule td.class { color: #774fa4; font-weight: bold; }
table.schedule td.class .details { font-size: 12px; color: #666666; font-weight: normal; }
table.schedule tr.new td.time  {background: url(../images/new.png) left 25px no-repeat;}
table.schedule td.age { color: #517f1b; font-style: italic; }
table.tuition td, table.tuition th { text-align: center;}

img.galleryPics { margin: 0; padding: 0 0 0 5px; float: right; }