/* catalinamagazine.com 8/9/04 */

/* This stylesheet does not _have_ to be edited, but it can be. */
/* Changes made here will be reflected site-wide. */
/* These comments will help identify what the code does */
/* and what pages it will affect. */



/* basic settings */

body,html {
	height: 100%;
	background: #ffffff;
	margin: 0px;
	padding: 0px;
}

h4 {
	font: 12pt verdana, arial, helvetica, sans-serif;
	color: #ffffff;
	margin: 0px;
}

h3 {
	font: 14pt verdana, arial, helvetica, sans-serif;
	color: #000000;
	margin: 0px;
}

h2 {
	font: 24pt verdana, arial, helvetica, sans-serif;
	color: #ffffff;
}

h1 {	
	font: 36pt verdana, arial, helvetica, sans-serif;
	color: #ffffff;
	margin: 0px;
}

a:link, a:visited, a:hover, a:active {
	color: #000000;
}

p, ul {
	font: 10pt verdana, arial, sans-serif;
}



/* sections */

/* code used on all pages */


#content {			/* this determines the width of the content */
	display: block;
	width: 750px;
	font: 10pt verdana, arial, sans-serif;
	margin: 0px auto;
	padding: 0px;
	background: url(../images/article_bg.gif);	/* makes right-hand grey border on article pages */	
}


#logo h1 {
	height: 160px;
	width: 750px;
	/* change the jpg file below to update the logo site-wide */
	background: url(../images/catalina_logo.gif) top left no-repeat; 
	text-indent: -9999px; /* hide text */
	margin: 0px;
	padding: 0px;
}


#departments {		/* grey-on-pink buttons: for the mind, etc. */
	float: left;
	width: 750px;
	margin: 0px;
	padding: 0px;
}

.department {
	float: left;
	width: 150px;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #ffffff;
}

.department img {
	display: block;
	bottom: 0;
	margin-top: 1px;
	padding: 0px;
	border: none;
}


#promos {			/* banners: events, latina leadership award, etc. */
	position: relative;
	float: left;
	width: 748px;
	margin: 0px;
	padding: 0px;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

.promo {
	position: relative;
	float: left;
	font: bold italic 8pt verdana, arial, helvetica, sans-serif;
	color: #b9b9b9;
	text-align: left;
	height: 110px;
	width: 149px;
	background: #ffffff;
	margin: 0px;
	padding: 0px;
	border-top: 3px solid #cccccc;
	border-right: 1px solid #cccccc;
}

.promo p img {
	position: relative;
	margin: 0px;
	padding: 0px;
}

.promo a {
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}

.promo img {
	display: block;
	border: none;
}

#lastpromo {
	border-right: none;
	width: 148px;
}

#greybar {
	display: block;
	float: left;
	height: 20px;
	width: 750px;
	background: #cccccc;
	border: 0px 0px 0px 0px;
	margin-bottom: 0px;
	padding: 0px;
}

#bottomnavbar {			/* grey bar at bottom, says "Privacy Statement" */
	display: block;
	float: left;
	height: 20px;
	width: 750px;
	background: #cccccc;
	border-top: 1px solid #ffffff;
	margin-bottom: 0px;
	padding: 0px;
}

#bottomnavbar ul {
	display: block;
	float: left;
	width: 750px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#bottomnavbar li {
	display: block;
	float: left;
	padding: 0px;
	margin: 0px;
}

#bottomnavbar li a:link, #bottomnavbar li a:visited {
	display: block;
	float: left;
	text-decoration: none;
	text-align: center;
	font: bold 8pt verdana, arial, helvetica, sans-serif;
	color: #ffffff;
	height: 20px;
	width: 750px;
	line-height: 175%;
	margin: 0px;
	padding: 0px;
}

#bottomnavbar li a:hover, #bottomnavbar li a:active {
	color: #000000;
}



/* code used only on homepage */


#topnavbar {			/* top grey bar: about us, advertise with us, etc. */
	height: 20px;
	background: #cccccc; /* #b96364; */
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}

#topnavbar ul {
	list-style-type: none;
	text-align: left;
	margin: 0px;
	padding: 0px;
}

#topnavbar li {
	display: block;
	float: left;
	padding: 0px;
	margin: 0px;
}

#topnavbar li a:link, #topnavbar li a:visited {
	display: block;
	float: left;
	text-decoration: none;
	text-indent: 4px;
	font: bold 8pt verdana, arial, sans-serif;
	color: #ffffff;
	height: 20px;
	width: 149px;
	line-height: 175%;
	border-right: 1px solid #ffffff;
}

#topnavbar li a:hover, #topnavbar li a:active {
	color: #000000;
}

#topnavbar li a#topnavbarlast {
	border-right: 1px solid #cccccc; 
}

#homepagerow {
	display: block;
	width: 750px;
	margin: 0px;
	padding: 0px;
}

#subscribe {			/* subscribe section on homepage */
	height: 240px;
	width: 149px;
	background: #f7e7e7;
	border-right: 1px solid #ffffff;
	margin: 0px;
	padding: 0px;
}

#subscribe p {
	font: bold italic 8pt verdana, arial, helvetica, sans-serif;
	text-align: center;
	margin: 0px;
	padding-top: 4px;
}

#subscribe img {
	display: inline;
	padding: 0px;
	border: none;
}

#subscribe a {
	text-decoration: none;
}


#webextra {				/* weekly recipe section on homepage */
	display: block;
	height: 240px;
	width: 149px;
	border-right: 1px solid #ffffff;
	background: #f7e7e7; 
	margin: 0px;
	padding: 0px;
}

#webextra img {
	float: left;
	border: none;
	padding: 0px;
	margin: 0px;
}

#webextra p {
	width: 140px;
	font: italic 8pt verdana, arial, helvetica, sans-serif;
	text-align: left;
	padding: 0px 4px;
}

#webextra a {
	text-decoration: none;
}

.webextrapadding {
	padding: 0px;
}


#coverstory {			/* cover story section on homepage */
	height: 240px;
	width: 450px;
	margin: 0px;
	padding: 0px;
}

#coverstory a{
	text-decoration: none;
	color: #ffffff;
}

#coverstory img {
	float: left;
	padding: 0px;
	margin: 0px;
	border: 0px;
}



/* code used on article pages */


#leftcontent {			
	display: block;
	width: 300px;
}


#leftnavbar {			/* left side navbar: about us, contact us, etc. */		
	display: block;
	float: left;
	height: 106px;
	width: 300px;
	background: #cccccc; 
	margin-top: 10px;
	margin-right: -3px; /* fixes weird IE doubling bug */
}

#leftnavbar ul {
	display: block;
	float: left;
	list-style-type: none;
	text-align: left;
	width: 300px;
	margin: 0px;
	padding: 0px;
}

#leftnavbar li {
	display: block;
	width: 300px;
	padding: 0px;
	margin: 0px;
}

#leftnavbar li a:link, #leftnavbar li a:visited {
	display: block;
	text-decoration: none;
	text-indent: 4px;
	font: bold 8pt verdana, arial, sans-serif;
	color: #ffffff;
	height: 20px;
	width: 300px;
	line-height: 175%;
	border-bottom: 1px solid #ffffff;
}

#leftnavbar li a:hover, #leftnavbar li a:active {
	color: #000000;
}

#leftnavbar li a#leftnavbarlast {
	border-right: 1px solid #b96364;
}


#articlepromo {			/* special formatting for banners on article pages */
	display: block;
	width: 300px;
	background: #ffffff;
}

#articlepromo img {
	border: none;
}


#articlephoto {			/* formatting for photo to left of article */
	float: left;
	width: 300px;
	font: 7pt verdana, arial, helvetica, sans-serif;
	color: #000000;
	text-align: right;
	width: 299px;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}

#articlephoto img {
	float: left;
	margin: 0px;
	padding: 0px;
	border: 0px;
}


#articleheader {		/* header section for articles - large headline text, author info, etc. */
	float: right;
	width: 445px;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 0px;
	padding: 0px;
}

#articleheader p {
	text-align: left;
}

#articleheader h2 {
	font: italic 24px verdana, arial, helvetica, sans-serif;
	line-height: 125%;
	width: 430px;
	color: #f6ccce;
	margin: 0px;
	padding-left: 15px;
}


#locatorheader h2 {
	font: italic 24px verdana, arial, helvetica, sans-serif;
	line-height: 125%;
	width: 750px;
	color: #f6ccce;
	margin: 0px;
	padding-left: 15px;
}


#articleheader h3 {
	margin-top: 4px;
	font-style: italic;
	text-indent: 20px;
}

#articleheader img {
	float: right;
}

.teaser {
	font: 9pt verdana, arial, helvetica, sans-serif;
	padding-left: 20px;
}

.author {
	font-weight: bold;
	padding-left: 20px;
}

	
#article {				/* formatting for article text */	
	float: right;
	width: 445px;
	padding-top: 10px;
	margin-left: -3px;
	padding-bottom: 20px;
}


#locator {				/* formatting for locator iframe */	
	float: right;
	width: 750px;
	padding-top: 10px;
	margin-left: -3px;
	padding-bottom: 20px;
}

#article p {
	text-align: left;
	padding-left: 16px;
	padding-right: 20px;
}

#article h3 {
	font-style: italic;
	padding-left: 20px;
}

.epigraph {				/* this is indented and in italic font, at bottom of articles */
	font-style: italic;
	padding-left: 30px;
	margin: 15px 0px;
}



#copyrightnotice {
	display: block;
	float: left;
	width: 750px;
	text-align: center;
	background: #ffffff;
	margin-right: -3px;
}



/* code used on subscribe pages (magazine and e-newsletter) */

#article form {
	display: block;
	width: 350px;
	padding-left: 18px;
}

#article table {
	width: 100%;
	font-size: 8pt;
	padding: 0px;
	margin: 0px;
}

#article table td {
	height: 25px;
	margin: 0px;
	padding: 0px;
}



/* code used on Latina Award page */

#article .awardhead {
	font: normal 18pt Georiga, "Times New Roman", Times, serif;
	text-align: center;
}

#article .award p {
	text-align: center;
}

#article img {
	display: block;
	margin: 0px auto;
	border: 0px;
}


/* code used on Videos page */

#videoframe {
	float: right;
	width: 428px;
}

.videopadding {
	padding-right: 2px;
}

.videooverflow {
	overflow: auto; 
	height: 525px;
	width: 424px;
	background: #ffffff;
}

.videoclip {
	display: block;
	float: left;
	height: 170px;
	width: 130px;
	font: 8pt verdana, arial, helvetica, sans-serif;
	text-align: center;
	margin: 5px 5px 0px 0px;
	background: #cccccc;
}

.videoclip img {
	display: block;
	margin: 0px auto;
	border: none;
}

.videoclip a {
	padding: 5px;
}

#promo_sonia
{
	display: block;
	width: 150px;
	height: 213px;
	background: #fff url(../images/promo_sonia.jpg) no-repeat 0px 0px;
}

#promo_sonia:hover
{
	background: #fff url(../images/promo_sonia.jpg) no-repeat 0px -213px;
}

#promo_rachel
{
	display: block;
	width: 150px;
	height: 213px;
	background: #fff url(../images/promo_rachel.jpg) no-repeat 0px 0px;
}

#promo_rachel:hover
{
	background: #fff url(../images/promo_rachel.jpg) no-repeat 0px -213px;
}