/* 
NOTE: 
This style sheet is for the Feral Cat Coalition website.
Currently, common.css and print.css are the same. So when you change one, save-as to make the same changes to the other.
Note that margins in the text are 17px.
*/

/* 
COLOR PALETTE
ffffff = white
000000 = black
333333 = dark gray (body copy type)
320548 = plum purple
e08749 = medium orange
b85f21 = deep burnt orange
cfd3d6 = light gray
687688 = smoky blue
THIS WAS THE ORIGINAL PURPLE, BUT SHERI THOUGHT IT LOOKED TOO MUCH LIKE DARK BLUE: 26294c = deep purple
*/

* { padding: 0; margin: 0; }

html { min-height: 100%; margin: 0; }

body { background: url('bg-1x420.gif') repeat-x 0 0 #cfd3d6; text-align: center; }

a:link, 
a:visited { color: #320548; text-decoration: underline; }
a:hover { color: #320548; text-decoration: none; }

.clear { clear: both; height: 0; margin: 0; }

blockquote { margin-left: 17px; }

#container-all { position: relative; margin: 0 auto; width: 960px; text-align: left; z-index: 1; }

#header { position: relative; width: 960px; height: 210px; margin: 0; }

#container-main { position: relative; top: -110px; width: 960px; margin: 0; }

#right { background: #fff; float: right; width: 768px; border-left: 1px solid #320548; border-right: 1px solid #320548; border-bottom: 1px solid #320548; }

#conveyor-belt { position: absolute; top: 27px; width: 768px; }

#right #content-col-1-home { background: #fff; position: relative; left: 17px; width: 734px; padding: 0 0 12em 0; font: .75em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #333; }

#right #content-col-1 { background: #fff; position: relative; left: 17px; width: 734px; padding: 0 0 1.3em 0; font: .75em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #333; }

#right #content-col-1-home { top: 128px; }

/* NOT USING RIGHT NOW, BUT MAYBE LATER:
#right #content-col-2 { background: #fff; position: relative; float: right; width: 208px; margin: 2.5em 17px 0 0; padding: 0 0 2em 0; font: .75em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #333; }*/

#footer { background: #687688; position: relative; width: 768px; font: .75em/1.4em Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #fff; text-align: center; padding-top: 30px; padding-bottom: 33px; }

#left { float: left; width: 173px; }

/* CONTENT AREAS - HOME PAGE AND SUBPAGES */

#content-col-1-home h1, 
#content-col-1 h1 { margin: .5em 0 .9em 0; font: bold 22px/22px Arial, Helvetica, sans-serif; color: #320548; }
#content-col-1-home h2, 
#content-col-1 h2 { margin: 1.3em 0 1.3em 0; font: bold 1.3em/1.4em Arial, Helvetica, sans-serif; color: #320548; }
#content-col-1-home p, 
#content-col-1 p { margin: 0 0 1.3em 0; }

/* BULLETED LISTS */

#content-col-1-home ul, 
#content-col-1-home ol, 
#content-col-1 ul, 
#content-col-1 ol { margin: 0 0 1.3em 17px; }

#content-col-1-home ul li, 
#content-col-1 ul li { list-style: none; background: url('bullet-paw-12x12.gif') no-repeat 0 2px; padding: 0 0 0 1.5em; margin: 0 0 1em 0; }

#content-col-1 ol li { list-style-type: decimal; padding: 0 0 0 0; margin: 0 0 1em 17px; }

#content-col-1-home ol li.primaryordered, 
#content-col-1 ol li.primaryordered { list-style-type: decimal; background: none; padding: 0 0 0 0; margin: 0 0 1em 30px; }

#content-col-1-home ol li.secondaryordered, 
#content-col-1 ol li.secondaryordered { list-style: lower-alpha; background: none; padding: 0 0 0 0; margin: 0 0 1em 30px; }

/* SPECIAL STYLES */

.byline { font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #b85f21; }
.byline a:link, 
.byline a:visited { color: #b85f21; text-decoration: none; }
.byline a:hover { color: #b85f21; text-decoration: underline; }

.small, 
.note, 
.update { font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #333; }

.slug { padding: 1.3em 0 0 0; font: bold 1.2em/1.2em Arial, Helvetica, sans-serif; color: #b85f21; text-transform: uppercase; }

.special, 
.specialitalic, 
.specialstrong, 
.specialstrongitalic { font: 12px/16px Verdana, Arial, Helvetica, sans-serif; color: #b85f21; }
.specialsmall, 
.specialsmallitalic, 
.specialsmallstrong, 
.specialsmallstrongitalic { font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #b85f21; }
.specialstrong, 
.specialstrongitalic, 
.specialsmallstrong, 
.specialsmallstrongitalic { font-weight: bold; }
.specialsmallitalic, 
.specialsmallstrongitalic, 
.specialitalic, 
.specialstrongitalic { font-style: italic; }

/* ILLUSTRATIONS AND SIDEBARS */

#content-col-1 #img-right, 
#content-col-1-home #img-right { position: relative; float: right; padding: 0; margin: 0 0 10px 17px; }
#content-col-1 #img-left { position: relative; float: right; padding: 0; margin: 0 17px 10px 0; }
#content-col-1 #img-right, 
#content-col-1-home #img-right, 
#content-col-1 #img-left { font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #320548; font-weight: bold; }

#content-col-1-home #sidebar-container-250, 
#content-col-1 #sidebar-container-250 { position: relative; float: right; width: 267px; padding: 0; margin: 0 0 10px 0; }
#content-col-1-home #sidebar-container-265, 
#content-col-1 #sidebar-container-265 { position: relative; float: right; width: 282px; padding: 0; margin: 0 0 10px 0; }
#content-col-1-home #sidebar-container-288, 
#content-col-1 #sidebar-container-288 { position: relative; float: right; width: 305px; padding: 0; margin: 0 0 10px 0; }
#content-col-1-home #sidebar-container-300, 
#content-col-1 #sidebar-container-300 { position: relative; float: right; width: 317px; padding: 0; margin: 0 0 10px 0; }

#content-col-1-home #sidebar-250, 
#content-col-1 #sidebar-250 { position: relative; left: 17px; width: 250px; padding: 0; margin: 0; }
#content-col-1-home #sidebar-265, 
#content-col-1 #sidebar-265 { position: relative; left: 17px; width: 265px; padding: 0; margin: 0; }
#content-col-1-home #sidebar-288, 
#content-col-1 #sidebar-288 { position: relative; left: 17px; width: 288px; padding: 0; margin: 0; }
#content-col-1-home #sidebar-300, 
#content-col-1 #sidebar-300 { position: relative; left: 17px; width: 300px; padding: 0; margin: 0; }

#content-col-1 td.pics-caption { position: relative; font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #b85f21; font-weight: bold; padding: 0 0 0 17px; margin: 0; }

/* TABLES */

#content-col-1 table.tshirtsizes { width: 350px; margin: 20px 0 20px 0; font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #333; }

#content-col-1 #container-ctr { position: relative; width: 734px; text-align: center; }

#content-col-1 table.width400, 
#content-col-1 table.width500, 
#content-col-1 table.width600 { position: relative; margin: 0 0 20px 0; font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #333; border: 1px solid #320548; border-collapse: collapse; }

#content-col-1 table.width400 caption, 
#content-col-1 table.width500 caption, 
#content-col-1 table.width600 caption { position: relative; font: 12px/16px Verdana, Arial, Helvetica, sans-serif; color: #320548; font-weight: bold; text-align: left; padding: 0 0 5px 0; margin: 0; }

#content-col-1 table.width400 th, 
#content-col-1 table.width500 th, 
#content-col-1 table.width600 th { color: #b85f21; text-align: center; padding: 3px; margin: 0; border-bottom: 1px solid #320548; }

#content-col-1 table.width400 td, 
#content-col-1 table.width500 td, 
#content-col-1 table.width600 td { text-align: center; padding: 3px; }

#content-col-1 table.width400 td.note, 
#content-col-1 table.width500 td.note, 
#content-col-1 table.width600 td.note { text-align: left; }

#content-col-1 table.width400 { width: 400px; }
#content-col-1 table.width500 { width: 500px; }
#content-col-1 table.width600 { width: 600px; }

/* MENU TOP */

#menu-top { position: relative; height: 27px; overflow: hidden; }
#menu-top ul { position: relative; margin: 0; width: 768px; list-style: none; }
#menu-top li { display: block; position: relative; float: left; height: 27px; font-size: 10px; background: url('sprite-768x437.gif') no-repeat; }	
#menu-top li a { position: relative; height: 27px; cursor: pointer; display: block; overflow: hidden; background: url('sprite-768x437.gif') no-repeat; text-decoration: none; z-index: 1; }
#menu-top li a:hover { text-decoration: none; }
#menu-top li span { position: absolute; left: 0; top: 0; z-index: 0; height: 27px; display: block; background: url('sprite-768x437.gif') no-repeat; overflow: hidden; }

#menu-top li.blank, 
#menu-top li.blank a, 
#menu-top li.blank span { background-position: 0 0; width: 437px; z-index: 50; }
#menu-top li.blank a:hover span, 
#menu-top li.blank:hover a span { background-position: 0 0; z-index: 1; }
#menu-top li.blank-on { background-position: 0 0; width: 437px; z-index: 50; }

#menu-top li.donate, 
#menu-top li.donate a, 
#menu-top li.donate span { background-position: -437px 0; width: 87px; z-index: 49; }
#menu-top li.donate a:hover span, 
#menu-top li.donate:hover a span { background-position: -437px -27px; z-index: 1; }
#menu-top li.donate-on { background-position: -437px -27px; width: 87px; z-index: 49; }

#menu-top li.contact, 
#menu-top li.contact a, 
#menu-top li.contact span { background-position: -524px 0; width: 110px; z-index: 48; }
#menu-top li.contact a:hover span, 
#menu-top li.contact:hover a span { background-position: -524px -27px; z-index: 1; }
#menu-top li.contact-on { background-position: -524px -27px; width: 110px; z-index: 48; }

#menu-top li.faq, 
#menu-top li.faq a, 
#menu-top li.faq span { background-position: -634px 0; width: 61px; z-index: 47; }
#menu-top li.faq a:hover span, 
#menu-top li.faq:hover a span { background-position: -634px -27px; z-index: 1; }
#menu-top li.faq-on { background-position: -634px -27px; width: 61px; z-index: 47; }

#menu-top li.store, 
#menu-top li.store a, 
#menu-top li.store span { background-position: -695px 0; width: 73px; z-index: 46; }
#menu-top li.store a:hover span, 
#menu-top li.store:hover a span { background-position: -695px -27px; z-index: 1; }
#menu-top li.store-on { background-position: -695px -27px; width: 73px; z-index: 46; }

/* MENU LEFT */

#menu	{ position: relative; float: left; top: 125px; width: 100%; list-style: none; background: url('sprite-768x437.gif') no-repeat 0px 0px; }
#menu li	{ position: relative; left: 0; top: 0; float: left; width: 173px; height: 31px; display: block; }
#menu li.bottom	{ width: 173px; height: 32px; background: url('sprite-768x437.gif') no-repeat 0px -374px; }
#menu li a, #menu li strong { position: relative; left: 0; width: 173px; height: 31px; display: block; overflow: hidden; background: url('sprite-768x437.gif') no-repeat 0 0; font-family: Verdana, sans-serif; font-size: 11px; line-height: 31px; text-decoration: none; cursor: pointer; }
#menu li strong	{ cursor: default; }
#menu li a:hover	{ text-decoration: none; }
#menu li span { position: absolute; left: 0; top: 0; width: 173px; height: 31px; display: block; background: url('sprite-768x437.gif') no-repeat 0 0; }
	
#menu li#mn1, #menu li#mn1 a, #menu li#mn1 span	{ background-position: 0px -95px; z-index: 250; }
#menu li#mn1 a:hover span, #menu li#mn1:hover a span, 
#menu li#mn1.on a, #menu li#mn1.on a:hover span, #menu li#mn1.on span	{ background-position: -173px -95px; }
#menu li#mn2, #menu li#mn2 a, #menu li#mn2 span	{ background-position: 0px -126px; z-index: 240; }
#menu li#mn2 a:hover span, #menu li#mn2:hover a span, 
#menu li#mn2.on a, #menu li#mn2.on a:hover span, #menu li#mn2.on span	{ background-position: -173px -126px; }
#menu li#mn3, #menu li#mn3 a, #menu li#mn3 span	{ background-position: 0px -157px; z-index: 230; }
#menu li#mn3 a:hover span, #menu li#mn3:hover a span, 
#menu li#mn3.on a, #menu li#mn3.on a:hover span, #menu li#mn3.on span	{ background-position: -173px -157px; }
#menu li#mn4, #menu li#mn4 a, #menu li#mn4 span	{ background-position: 0px -188px; z-index: 220; }
#menu li#mn4 a:hover span, #menu li#mn4:hover a span, 
#menu li#mn4.on a, #menu li#mn4.on a:hover span, #menu li#mn4.on span	{ background-position: -173px -188px; }
#menu li#mn5, #menu li#mn5 a, #menu li#mn5 span	{ background-position: 0px -219px; z-index: 210; }
#menu li#mn5 a:hover span, #menu li#mn5:hover a span, 
#menu li#mn5.on a, #menu li#mn5.on a:hover span, #menu li#mn5.on span	{ background-position: -173px -219px; }
#menu li#mn6, #menu li#mn6 a, #menu li#mn6 span	{ background-position: 0px -250px; z-index: 200; }
#menu li#mn6 a:hover span, #menu li#mn6:hover a span, 
#menu li#mn6.on a, #menu li#mn6.on a:hover span, #menu li#mn6.on span	{ background-position: -173px -250px; }
#menu li#mn7, #menu li#mn7 a, #menu li#mn7 span	{ background-position: 0px -281px; z-index: 190; }
#menu li#mn7 a:hover span, #menu li#mn7:hover a span, 
#menu li#mn7.on a, #menu li#mn7.on a:hover span, #menu li#mn7.on span	{ background-position: -173px -281px; }
#menu li#mn8, #menu li#mn8 a, #menu li#mn8 span	{ background-position: 0px -312px; z-index: 180; }
#menu li#mn8 a:hover span, #menu li#mn8:hover a span, 
#menu li#mn8.on a, #menu li#mn8.on a:hover span, #menu li#mn8.on span	{ background-position: -173px -312px; }	
#menu li#mn9, #menu li#mn9 a, #menu li#mn9 span	{ background-position: 0px -343px; z-index: 170; }
#menu li#mn9 a:hover span, #menu li#mn9:hover a span, 
#menu li#mn9.on a, #menu li#mn9.on a:hover span, #menu li#mn9.on span	{ background-position: -173px -343px; }	
#menu li#mn10, #menu li#mn10 a, #menu li#mn10 span	{ background-position: 0px -374px; z-index: 160; }
#menu li#mn10 a:hover span, #menu li#mn10:hover a span, 
#menu li#mn10.on a, #menu li#mn10.on a:hover span, #menu li#mn10.on span	{ background-position: -173px -374px; }	
#menu li#mn11, #menu li#mn11 a, #menu li#mn11 span	{ background-position: 0px -405px; z-index: 160; }
#menu li#mn11 a:hover span, #menu li#mn11:hover a span, 
#menu li#mn11.on a, #menu li#mn11.on a:hover span, #menu li#mn11.on span	{ background-position: -173px -405px; }	

/* popup hover menus */
#menu li ul.popup, #menu li ul.popup li ul.popup	{ display: none; position: absolute; width: 366px; w\idth: 365px; z-index: 1000; background: #e08749; border: 1px solid #e08749; }
#menu li ul.popup li	{ left: 0; width: 365px; height: auto; margin: 0 0 1px; }
#menu li ul.popup li.last	{ margin: 0; }
/* level 1 */
#menu li>ul.popup	{ top: 0; left: 173px; }
#menu li:hover ul.popup, #menu li.sfhover ul.popup	{ top: 0; left: 173px; display: block; }
/* level 2 */
#menu li ul.popup li>ul.popup	{ top: -1px; left: 365px; }
#menu li ul.popup li:hover ul.popup, #menu li ul.popup li.sfhover ul.popup	{ top: -1px; left: 365px; display: block; }
#menu li#mn1 ul.popup li a.level3, 
#menu li#mn2 ul.popup li a.level3, 
#menu li#mn3 ul.popup li a.level3, 
#menu li#mn4 ul.popup li a.level3, 
#menu li#mn5 ul.popup li a.level3, 
#menu li#mn6 ul.popup li a.level3, 
#menu li#mn7 ul.popup li a.level3, 
#menu li#mn8 ul.popup li a.level3, 
#menu li#mn9 ul.popup li a.level3, 
#menu li#mn10 ul.popup li a.level3, 
#menu li#mn11 ul.popup li a.level3	{ background: url('menu-arrow-730x23.gif') no-repeat 0 0 #687688; }
#menu li#mn1 ul.popup li a.level3:hover, #menu li#mn1 ul.popup li:hover a.level3, 
#menu li#mn2 ul.popup li a.level3:hover, #menu li#mn2 ul.popup li:hover a.level3, 
#menu li#mn3 ul.popup li a.level3:hover, #menu li#mn3 ul.popup li:hover a.level3, 
#menu li#mn4 ul.popup li a.level3:hover, #menu li#mn4 ul.popup li:hover a.level3, 
#menu li#mn5 ul.popup li a.level3:hover, #menu li#mn5 ul.popup li:hover a.level3, 
#menu li#mn6 ul.popup li a.level3:hover, #menu li#mn6 ul.popup li:hover a.level3, 
#menu li#mn7 ul.popup li a.level3:hover, #menu li#mn7 ul.popup li:hover a.level3, 
#menu li#mn8 ul.popup li a.level3:hover, #menu li#mn8 ul.popup li:hover a.level3, 
#menu li#mn9 ul.popup li a.level3:hover, #menu li#mn9 ul.popup li:hover a.level3, 
#menu li#mn10 ul.popup li a.level3:hover, #menu li#mn10 ul.popup li:hover a.level3, 
#menu li#mn11 ul.popup li a.level3:hover, #menu li#mn11 ul.popup li:hover a.level3	{ background: url('menu-arrow-730x23.gif') no-repeat -365px 0 #370248; }
#menu li ul li a:link, #menu li ul li a:visited, #menu li ul li a { width: 365px; w\idth: 355px; height: auto; padding: 0 2px 0 8px; background: #687688; cursor: pointer; display: block; line-height: 23px; text-decoration: none; font-weight: bold; color: #fff; }
#menu li ul li a:hover, #menu li ul li.on a:link, #menu li ul li.on a:visited { background: #370248; }