/*
Title: South Philly Bar and Grill
Style: General stylesheet
Author: Tome Wilson - tome@creativewebgroup.net
Last Updated: March 24, 2010
*/

/* ---[ css reset ]--------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, textarea, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
:focus {outline: 0}
body {line-height: 1}
ol, ul {list-style: none}


/* ---[ link styles ]--------------------- */
a {color: #e1a507; text-decoration: none}
a:visited {color: #e1a507}
a:hover {color: #e1a507; text-decoration: underline}


/* ---[ structure ]--------------------- */
html, body {background: #06482c url(images/shell/background.png) repeat-x; height: 100%; text-align: center; font-size: 0}
#center-on-page {width: auto; text-align: center}

#container {margin: 0 auto; width: 785px}


	/* ---[ header ]--------------------- */
	#header {width: 785px; height: 397px; display: block}
		#header-left {width: 496px; float: left}


			/* ---[ top-navigation ]--------------------- */
			#top-navigation {width: 496px; height: 44px; display: block; background: transparent url(images/shell/top-navigation.png) no-repeat}

				#top-navigation ul {list-style: none}
				#top-navigation li {float: left}

				#top-navigation a.about, 
				#top-navigation a.menu, 
				#top-navigation a.news, 
				#top-navigation a.press, 
				#top-navigation a.contact {float: left; display: block; height: 44px; text-indent: -999999px; background: transparent url(images/shell/top-navigation.png) no-repeat}
				
				#top-navigation a.about {background-position: 0 0; width: 104px}
				#top-navigation a.about:hover {background-position: 0 -44px}

				#top-navigation a.menu {background-position: 0 104px; width: 69px}
				#top-navigation a.menu:hover {background-position: -104px -44px}
			
				#top-navigation a.news {background-position: 0 173px; width: 143px}
				#top-navigation a.news:hover {background-position: -173px -44px}
			
				#top-navigation a.press {background-position: 0 316px; width: 68px}
				#top-navigation a.press:hover {background-position: -316px -44px}
			
				#top-navigation a.contact {background-position: 0 384px; width: 112px}
				#top-navigation a.contact:hover {background-position: -384px -44px}

		#header-right {width: 289px; float: right}


/* ---[ middle-area ]--------------------- */
	
#main {width: 785px; background: transparent url(images/shell/main-background.png) repeat-y}


	/* ---[ content-area ]--------------------- */

	#content {width: 497px; background: transparent url(images/shell/drop-shadow.png) no-repeat; padding: 15px 0 10px 15px; float: left; display: block; text-align: left; font: normal 13px/1.4em Arial, Helvetica, sans-serif; color: #fff}

		em, .em {font-style: italic}
		strong, .strong {font-weight: bold}
		.big {font-size: 115%}
		.small {font-size: 75%}
		.l {float: left}
		.r {float: right}
		.clear {clear: both}
		.center {text-align: center}

		p {padding: .5em 0}

		#content ul {padding: .35em 0 .35em .35em; margin-left: 10px; list-style-type: none; text-align: left}
		#content li {padding: .15em 0 .35em 1.5em; background: transparent url(images/icons/star.gif) 0 3px no-repeat}

		.hr {width: auto; height: 1px; font-size: 1px; display: block; border-top: 1px dotted #e1a507; margin: 10px 0}
		
		.column1, .column2 {float: left; width: 240px; display: block; margin-right: 10px}
		.column2 {margin-right: 0}

		.photoL {float: left; margin: 3px 8px 0 0}
		.photoR {float: right; margin: 3px 0 0 10px}

		.border {border: 2px solid #fff}

		blockquote {padding: .35em 0 .35em 30px; background: transparent url(images/graphics/start-quote.png) no-repeat 0 0}
		blockquote p {background: transparent url(images/graphics/end-quote.png) no-repeat bottom right}

		#gallery {text-align: center; padding: .5em 0}
			#gallery img {border: 2px solid #fff}
			#gallery img:visited {border: 2px solid #fff}
			#gallery img:hover {border: 2px solid #e1a507}


		/* ---[ rss feed ]--------------------- */
		#rss-box {width: 497px; display: block}
		#rss-box ul {padding: 0; margin: 0; list-style-type: none}
		#rss-box li {padding: 0 0 1em 0; background: none !IMPORTANT}
		#creditfooter {display: none}
		.headline {font: normal 21px/1.15em Arial, Helvetica, sans-serif}


		/* ---[ font colors ]--------------------- */
		.black {color: #000 !Important}
		.white {color: #fff !Important}
		.yellow {color: #e1a507 !Important}
		.green {color: #06482c !Important}
		.red {color: #900028 !Important}


		/* ---[ headings ]--------------------- */
		h1 {font: bold italic 31px/1.05em Arial, Helvetica, sans-serif; letter-spacing: -1px; color: #fff; padding-bottom: .35em}
		h2 {font: bold italic 25px/1.35em Arial, Helvetica, sans-serif; letter-spacing: -1px; color: #e1a507}
		h3 {font: normal 21px/1.25em Arial, Helvetica, sans-serif; color: #fff; padding: .35em 0}
		h4 {font: bold 15px/1.25em Arial, Helvetica, sans-serif; color: #fff; padding: .35em 0}


/* ---[ right side ]--------------------- */

#sidebar {width: 246px; display: block; float: right; padding: 40px 7px 0 20px; text-align: left; background: transparent url(images/shell/sidebar-top.png) no-repeat; font: normal 12px/1.6em Arial, Helvetica, sans-serif; color: #000}
	#hours {display: block; padding-left: 10px; height: 47px}
	.sign {padding: 10px; margin: 8px 0 4px 0; background: #e1a507 url(images/shell/sidebar-signs.png) repeat-x; border-top: 1px solid #000; border-bottom: 1px solid #000; font: normal 14px/1.35em Arial, Helvetica, sans-serif}


	/* ---[ sidebar contact form ]--------------------- */
	
	#contact-form {}
	#contact-form form {border-top: 1px solid #f1d387; border-bottom: 1px solid #f1d387; padding: 13px 10px; margin: 6px 0 10px 1px}
	#contact-form legend, #contact-form label {display: none}
		#contact-form .inputText {font: normal 12px/1em Arial, Helvetica, sans-serif; color: #06482c; background: #fdfdfd; width: 210px; height: 12px; padding: 6px; margin-bottom: 9px; border: 1px solid #000}
		#contact-form .send {background: transparent url(images/shell/lets-go.png) no-repeat; width: 93px; height: 24px; border: 0; cursor: pointer; margin-left: 130px}
		#contact-form .formsend {display: none}


/* ---[ footer ]--------------------- */

#footer {border-top: 1px solid #fff; padding: 20px 0 10px 105px; margin: 15px 0 0 0; font: normal 12px/1.6em Arial, Helvetica, sans-serif; background: transparent url(images/shell/mini-logo.png) 0 10px no-repeat}



/* ---[ feedback contact form ]--------------------- */

#feedback form {margin: 0; padding: 0; font-size: 100%; width: auto}
#feedback form fieldset {clear: both; font-size: 100%; border-color: #fff; border-width: 1px 0 0 0; border-style: solid none none none; padding: 10px; margin: 0}
#feedback form fieldset legend {font: bold 16px/1.25em Arial, Helvetica, sans-serif; color: #fff; margin: 0; padding: .35em}
#feedback label {font-size: 100%}
#feedback label u {font-style: normal; text-decoration: underline}
#feedback input, select, textarea {font-family: Arial, Helvetica, sans-serif; font-size: .9em; color: #000}
#feedback textarea {overflow: auto}
#feedback form div {clear: left; display: block; width: 480px; height: 1%; margin: 5px 0 0 0; padding: 1px 3px}
#feedback form div fieldset {clear: none; border: 1px solid #666; margin: 0 0 0 144px; padding: 0 5px 5px 5px; width: 197px}
#feedback form div fieldset legend {font-size: 100%; padding: 0 3px 0 9px}
#feedback form div.required fieldset legend {font-weight: bold; color: #e1a404}
#feedback form div label {display: block; float: left; width: 150px; padding: 3px 5px; margin: 0 0 5px 0; text-align: right}
#feedback form div.optional label, label.optional {font-weight: normal}
#feedback form div.required label, label.required {font-weight: bold; color: #e1a404}
#feedback form div label.labelCheckbox, form div label.labelRadio {float: none; display: block; width: 200px; height: 1%; padding: 0; margin: 0 0 5px 142px; text-align: left}
#feedback form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {margin: 0 0 5px 0; width: 170px}
#feedback form div img {border: 1px solid #000}
#feedback form div input, form div select, form div textarea {width: 200px; padding: 1px 3px; margin: 0}
#feedback form div input.inputFile {width: 211px}
#feedback form div select.selectOne {width: 211px; padding: 1px 3px}
#feedback form div select.selectMultiple {width: 211px}
#feedback form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {display: inline; height: 14px; width: 14px; background: transparent; border-width: 0; padding: 0; margin: 0 0 0 140px}
#feedback form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {background-color: #ccc; color: #000; width: auto; padding: 0 6px; margin: 0}
#feedback form div.submit div input.inputSubmit, form div.submit div input.inputButton {float: right; margin: 0 0 0 5px}
#feedback form div small {display: block; margin: 0 0 5px 142px; padding: 1px 3px; font-size: .75em; height: 1%}
#feedback form fieldset legend {line-height: 150%}
#feedback form input, form select, form textarea {background-color: #fff}
#feedback div.optional label:before {content: ''}
#feedback div.required label:before {content: ''}
#feedback form div label.labelCheckbox, form div label.labelRadio, label.labelCheckbox, label.labelRadio {display: block; width: 190px; height: 1%; padding: 4px 0 0 18px; text-indent: -18px; line-height: 120%}
#feedback form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {margin: 0}
#feedback form div fieldset input.inputText, form div fieldset input.inputPassword, form div fieldset input.inputFile, form div fieldset textarea.inputTextarea {width: 160px; margin: 0 0 0 18px; margin: 0 0 0 -124px}
#feedback form div label.compact {display: inline; width: auto; padding: 4px 10px 0 0; text-indent: 0; margin: 0}
#feedback form div.wide label {float: none; display: block}
#feedback form div label.wide {width: 348px}
#feedback form div.wide input.inputText, form div.wide input.inputPassword, form div.wide input.inputFile, form div.wide select, form div.wide textarea {width: 344px; margin: 0}
#feedback form div.notes p, form div small {line-height: 125%}
#feedback form div.wide small {margin: 0 0 5px 0}
#feedback .formsend {display: none}