/**
 * CSS by Sean Harvey of SilverStripe
 */

/*******************************/
/** Typography and editor CSS **/
/*******************************/

/*
 * This file is used for the typography on the site
 * as well as the WYSIWYG editor for SilverStripe.
 */

/*
 * Note that pixel font size is being used for this layout.
 * It is far more accurate to do this than em, which causes
 * problems with nested elements. IE7 supports resizing the
 * text on zooming now, so it's not a big issue to not use
 * em values for font sizes.
 *
 * A note to anyone not familiar with this CSS: I am using
 * unit-less line-height values, which is perfectly valid.
 * http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
 */

/* Global resets */
.typography * {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
}

/* add some padding to the WYSIWYG editor for readability */
.mceEditor {
  padding: 10px;
}

/* We have do this because the <a> tag doesn't normally
  inherit the font size as a <p> tag would */
.typography a {
  font-size: inherit;
}

/* Various styling */
.typography blockquote {
  padding: 5px;
  padding-left: 20px;
  border: 1px solid #a6d64c;
  border-left: 7px solid #a6d64c;
  margin-left: 0;
  margin-bottom: 20px;
}
  .typography blockquote * {
    margin-bottom: 0 !important;
  }
.typography pre {	
  font-family: "Courier New", Courier, monospace;
  color: #a6d64c;
  border: 1px solid #a6d64c;
  border-right: 7px solid #a6d64c;
  padding: 10px;
  margin: 20px 0;
}
.typography hr {
  margin: 10px 0;
}

/* Paragraph and list items style
 * Had to set #container to only set styles on website or otherwise its also in the CMS
 */
#container .typography p,
#container .typography ul li,
#container .typography ol li {
  color: #fff;
  line-height: 1.5;
}

  .typography p.breadcrumbs {
    color: #fff;
  }
  .typography p {
    margin-bottom: 20px;
  }
  /* Lists specific styling */
  .typography ul,
  .typography ol {
    margin-left: 10px;
    margin-bottom: 20px;
  }
    .typography ul li,
    .typography ol li {
      margin: 4px 10px;
      line-height: 1.4;
    }
      .typography ul li {
       list-style-type: disc;
      }
      .typography ol li {
        list-style-type: decimal;
      }

/* Comments styles */
#PageComments li {
	list-style-type: none;
	background: #eee;
	padding: 10px 0 0 10px;
}
	#PageComments p {
		color: #fff;
	}
		#PageComments .info {
			padding-bottom: 10px;
			color: #fff;
		}
			#PageComments .info * {
				font-size: 11px;
			}
				#PageComments .info a {
					font-size: inherit;
				}
  
/* Header styles */
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
	margin-bottom: 10px;
	color: #FFFFFF;
}
	.typography h1 {
		font-size: 36px;
	}
	.typography h2 {
		font-size: 28px;
	}
	.typography h3 {
		font-size: 27px;
	}
	.typography h4 {
		font-size: 18px;
	}
	.typography h5 {
		font-size: 16px;
	}
	.typography h5 {
		font-size: 14px;
	}

/* Table styling */  
.typography table {
	border-collapse: collapse;
	margin-bottom: 15px;
}
	.typography table tr td {
		padding: 15px;
		border-spacing: 10px;
		color: #fff;
		line-height: 1.5;
		text-align: top;
	}
		.typography table tr td h3 {
			color: #ffffff;
			font-size: 16px !important;
		}
			.typography table tr td h3 * {
				font-size: inherit;
			}

			.typography table tr td a {
				color: #FFDF4A;
			}	
				
#ImageGallery table tr td {
	border: 0;
	padding: 5px;
}

#Content .typography img {
	border: 10px solid #fff;
}
	/* Recaptcha form */
	#recaptcha_area table {
		background: #ffffff;
	}
		#recaptcha_area img {
			border: 0 !important;
		}

/* Alignment styles */
.typography .left {
	text-align: left;
}
.typography .center {
	text-align: center;
}
.typography .right {
	text-align: right;
}
.typography img.right {
	float: right;
	margin: 0 0 15px 20px;
}
.typography img.left {
	float: left;
	margin: 0 20px 15px 0;
}
.typography img.center {
	margin: 0 auto 10px;
	display: block;
	text-align: center;
}