/* 

STYLE SHEET FOR WESTCHESTER PHILHARMONIC WEB SITE
Created by Sharpdot Inc, Front-end design/css/html: Amber Taylor,
www.sharpdotinc.com

ToC
	0. *Global reset*
	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. tables
	7. forms
	
Notes

*/

/* Global reset */
	/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
	
	*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
	table { border-collapse:collapse; border-spacing:0 }
	fieldset, img { border:0 }
	address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
	ol, ul, li { list-style:none }
	caption, th { text-align:left }
	h1, h2, h3, h5, h5, h6 { font-size:100% }
	q:before, q:after { content:''}

	/* Global reset-RESET */
	/* The below restores some sensible defaults */
	
	strong { font-weight: bold }
	em { font-style: italic }
	ol, ul, li { list-style:none }
	* a { position:relative } /* Gets links displaying over a PNG background */
	a { outline:none } /* Gets rid of Firefox's dotted borders */
	a img { border:none } /* Gets rid of IE's blue borders */

/* --------- 1. defaults  --------- */

* { margin: 0; padding: 0; }

body { text-align:center;/**IE 5.5- Hack - Centers Site */ }
		
/*  --------- 2. structure  --------- */

#wrapper { width:950px; height:auto; margin:0 auto; padding:20px 0; text-align:left;/**IE 5.5- Hack - Re-Aligns Text */ }
		
#masthead {}

#logo { background:url(../images/logo_02.gif) no-repeat; width:240px; height:132px; text-indent:-9999px; }
	
#subNav { background:url(../images/subNav_bkg.gif) repeat-y; border-bottom:1px solid #808080; width:240px; height:340px; margin:0; }
#subNav p { margin:20px 20px 10px; }

#navContainer {}

#phoneNum { height:30px; }

#content {}

#sidebarLeft {}

#mainContentArea {}

#sidebarRight { /* IE6 Hack */ margin-right:-3px; }

#footer { background:url(../images/footer_bkg.gif) repeat-x; height:39px; }
#footer-logo { background:url(../images/footer_logo.gif) no-repeat; height:39px; }
.footer-cap-R { background: url(../images/footer_bkg-05.gif) no-repeat right -15px; }
.footer-pad { padding:16px 0 0 0; }
#footer a { color:#fff; }

#footerCredit { padding:20px 0; }
#footerCredit p { font-size:1.0em; }
#footerCredit a { color:#ce181f; text-decoration:none; }		
#footerCredit a:hover { text-decoration:underline; }


/* -- GRID -- */
.coloumnContainer { width:950px; margin:0 auto; }
.coloumnContainer-inner { float:left; height:auto; display:block; margin:0; }
.coloumn { float:left; margin-right:10px; display:inline; }

.contSpan-420 { width:420px; }

/* Spans */
div.last, p.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}; 
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.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;}

.separator { clear: both; }
.separatorInvisible { clear: both; height: 1px; }
.clearFix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.break { display:none; height:0; }
.alignLeft { float:left; display:inline; }
.alignRight { float:right; display:inline; }
img.alignLeft { float:left; display:inline; margin-right:20px; }
img.alignRight { float:right; display:inline; margin-left:20px; }
.picture-alignLeft { float:left; display:inline; margin-right:20px; font-size:0.9em; text-align:center; }
.picture-alignLeft img { margin-bottom:3px; }
.picture-alignRight { float:right; display:inline; margin-left:20px; font-size:0.9em; text-align:center; }
.picture-alignRight img { margin-bottom:3px; }
.picture { font-size:0.9em; }
p.picture { font-size:0.9em; margin-top:5px; }
#pressPhoto .picture { font-size:0.9em; margin-top:5px; text-align:center; }


/* Debugging */
.debug1 { background-color:#ff0000; }
.debug2 { background-color:#00ff00; }
.debug3 { background-color:#0000ff; }

/* Extras */

.no-Pad { padding:0; }
.extraPadTop-10 { padding-top:10px; }
.extraPadTop-15 { padding-top:10px; }
.extraPadTop-20 { padding-top:20px; }
.extraPadLR-10 { padding-left:10px; padding-right:10px; }
.extraPadLR-20 { padding-left:20px; padding-right:20px; }
.extraPadLeft-10 { padding-left:10px; }
.extraPadLeft-20 { padding-left:20px; }
.extraPadRight-10 { padding-right:10px; }
.extraPadRight-20 { padding-right:20px; }
.extraPadRight-50 { padding-right:50px; }
.extraPadBottom-10 { padding-bottom:10px; }
.extraPadBottom-20 { padding-bottom:20px; }
.extraPadBottom-40 { padding-bottom:40px; }
.extraPad-10 { padding:10px; }
.extraPad-20 { padding:20px; }

.no-Marg { margin:0; }
.extraMargLeft-20 { margin-left:20px; }
.extraMargBottom-10 { margin-bottom:10px; }
.extraMargBottom-20 { margin-bottom:20px; }
.extraMargBottom-30 { margin-bottom:30px; }

.lessMargRight-10 { margin-right:-10px; }

.duplicateCharacterFix { margin-right:-3px; }

.eventPic { width:120px; text-align:center; font-size:0.9em; }
.line { border-left:4px solid #ce181f; padding-left:7px; }
.post { margin-bottom:30px; }
#news .post { margin-bottom:20px; }
.musdesc { font-style:italic; /*padding-left:5px; margin-top:3px;*/ color:#888; }
#ourMusicians p.coloumn { margin-bottom:7px; }

/* ---------- 3. links and navigation ---------- */

a { color:#ce181f; text-decoration:none; }
		
a:hover { text-decoration:underline; }

.link { margin-top:-.7em; }

/* Suckerfish Dropdowns */
#nav { background-color:#8a171b; height:29px; font:12px/12px "Tahoma" Verdana, Arial, Helvetica, sans-serif; }
#nav a { font-weight:bold; color:#fff; text-decoration: none; }
#nav li li a { display:block; width:160px; height:auto; color:#fff; font-weight:bold; padding:5px 5px 5px; border-bottom:1px solid #681618; border-top:1px solid #8e3235; }
#nav li li.first a { border-top:1px solid #681618; background:url(../images/nav_bkg-dropdown-shade.gif) repeat-x 0 -2px; padding-top:10px; }
#nav li li.last a { border-bottom:none; /*border-bottom:1px solid #8e3235;*/ }
#nav li li a:hover { background-color:#540c0f; }
#nav li { float:left; position:relative; text-align:center; cursor:default; }
#nav li ul { display:none; position:absolute; top:100%; left:0; margin-left:-1px; font-weight:normal;
	/*background-color:#a7151b;*/ background:url(../images/nav_dropdown-bkg.png) repeat; padding:0 0 0; border:solid 1px #000; border-top:none; }
#nav li>ul { top:auto; left:auto; }
#nav li li { display:block; float:none; background-color:transparent; border:0; padding:0; margin:0; }
#nav li:hover ul, #nav li.over ul { display:block; }

/* nav buttons */
.homeLink div a { width:74px; height:29px; display:block; text-indent:-9999px; margin:0 1px; background:url(../images/nav_sprite.gif) no-repeat 0 0; }
.homeLink div a:hover, body.home .homeLink div a { width:74px; height:29px; display:block; text-indent:-9999px; margin:0 1px; background:url(../images/nav_sprite.gif) no-repeat 0 -29px; }

.concertLink div a { width:161px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -75px 0; }
.concertLink div a:hover, body.concert .concertLink div a  { width:161px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -75px -29px; }

.aboutLink div a { width:93px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -237px 0; }
.aboutLink div a:hover, body.about .aboutLink div a { width:93px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -237px -29px; }

.supportLink div a { width:84px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -331px 0; }
.supportLink div a:hover, body.support .supportLink div a { width:84px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -331px -29px; }

.programsLink div a { width:182px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -416px 0; }
.programsLink div a:hover, body.programs .programsLink div a { width:182px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -416px -29px; }

.contactLink div a { width:109px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -599px 0; }
.contactLink div a:hover, body.contact .contactLink div a { width:109px; height:29px; display:block; text-indent:-9999px; margin-right:1px; background:url(../images/nav_sprite.gif) no-repeat -599px -29px; }

/* Sub Nav */
#subNav ul { width:240px; height:auto; margin-top:10px; /*border-top:1px solid #000;*/ }
#subNav li { font-size:12px; }
#subNav li a { width:200px; height:auto; display:block; color:#000; font-weight:bold; padding:2px 20px; /*border-bottom:1px solid #000;*/ text-decoration:none; }
#subNav li a:hover, #subNav .active a { background-color:#464646; color:#fff; text-decoration:none; }


/* ---------- 4. fonts ---------- */

html { font-size: 100%; }

body { font-size: 62.5%; }

h1, h2, h3, h4, p, ul, ol, dl, blockquote { font:1.2em/1.4 "Tahoma" Verdana, Arial, Helvetica, sans-serif; }

h1 { font:bold 2.0em/100% "Tahoma" Verdana, Arial, Helvetica, sans-serif; margin:0 0 1.2em; color:#ce181f; text-transform:uppercase !important;/**IE 5.x Hack */ }
h2 { font:bold 1.8em/100% "Tahoma" Verdana, Arial, Helvetica, sans-serif; margin:0 0 1.0em; color:#ce181f; }
h3 { font:bold 1.6em/100% "Tahoma" Verdana, Arial, Helvetica, sans-serif; margin:0 0 0.8em; color:#ce181f; }	
h4 { font:bold 1.4em/100% "Tahoma" Verdana, Arial, Helvetica, sans-serif; margin:0 0 0.6em; color:#ce181f;}

h1.home { background:url(../images/x.jpg) no-repeat; height:; text-indent:-9999px; }

.sub-Title { font-size:1.6em; color:#000; text-transform:uppercase; font-weight:bold; }
.date { font:bold 1.2em Verdana, Arial, Helvetica, sans-serif; color:#000; }
.titleLine { border-bottom:1px solid #ce181f; color:#000000; }

p { font:1.2em/1.3em "Tahoma" Verdana, Arial, Helvetica, sans-serif; margin-bottom:1em; color:#464646; }

ul {}
ol {}
dl {}

#content ul li, sidebarLeft ul li, #sidebarRight ul li
#content dd, sidebarLeft dd, #sidebarRight dd
	{ list-style-type:disc; margin:0 0 5px 33px; color:#464646; }
#content ul, sidebarLeft ul, #sidebarRight ul
	{ margin-bottom:1em; color:#464646; }

#content ol li, sidebarLeft ol li, #sidebarRight ol li
	{ list-style-type:decimal; margin:0 0 5px 38px; color:#464646; }
#content ol, sidebarLeft ol, #sidebarRight ol
	{ margin-bottom:1em; color:#464646; }

#phoneNum p { color:#4c4c4c; font-size:1.6em; font-style:italic; }

#footer ul { font:1.2em/1.4 "Tahoma" Verdana, Arial, Helvetica, sans-serif; margin-bottom:1em; }
#footer li { display:inline; margin-right:5px; }


blockquote {}

hr { clear:both; height:1px; background:none; border:none; border-top:1px solid #ce181f; width:100%; margin:20px 0; }

.text_white { color:#fff; }
.text_red { color:#ce181f; }
.text_black { color:#000; }
.text_light-grey { color:#b2b2b2; }
.text_dark-grey { color:#464646; }

.text-alignLeft { text-align:left; }
.text-alignCenter { text-align:center; }
.text-alignRight { text-align:right; }

/* ---------- 5. images ---------- */

a img { border: 0; }
		
/* ---------- 6. tables ---------- */

table {}
		
caption {}
		
tr {}

th, td {}
		
th {}
		
td {}

/* ---------- 7. forms ---------- */	
		
form {}

#mailingListForm { margin:auto; height:30px; }
.input-email { width:140px; height:16px; color:#808080; border:1px solid #808080; float:left; display:inline;  }
.btn-go { width:35px; height:18px; float:right; display:inline; }
