@charset "utf-8";

/* Cal Aggie Christian Association sitewide styles */

/* typography based on: http://24ways.org/2006/compose-to-a-vertical-rhythm/ */

/*** page styles ***/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { 
margin: 0; 
padding: 0; 
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	text-align: center; /* this centers the page in IE 5* browsers. The text is then set to the left aligned default in the #page selector */
	color: #333;
}

html>body { 
	font-size: 12px; 
} 

#page {
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}

#page img {
	border: none;
}

h1 {
	font-size: 1.5em; 
	line-height: 1em; 
	margin-top: 0; 
	margin-bottom: 1em; 
	color: #069;
}

h2 {
	font-size: 1.1667em; 
	line-height: 1.286em; 
	margin-top: 1.929em; 
	margin-bottom: 0.643em; 
	color: #16469d;
}

h3 {
	font-size: 12px;
	color: #333;
}

h4 {
	font-size: 11px;
	color: #333;	
}

a:link {
	color: #069;
}

a:visited {
	color: #5E666F;
}

p {
	line-height: 1.5em; 
	margin-top: 1.5em; 
	margin-bottom: 1.5em;
}

ul, ol {
	padding-left: 25px;
}

hr {
	color: #cccccc;
	height: 1px;
	margin-right: 12px;
}

/* * * content styles * * */

#page .three-column {
	float: left;
	width: 780px;
	margin: 12px 0 12px 0;
	background-image: url(/_img/page/three-column.gif);
	background-repeat: repeat-y;
}

#page #container {
	float: left;
	width: 780px;
}

#page .two-column {	
	margin: 12px 0 12px 0;
	background-image: url(/_img/page/two-column.gif);
	background-repeat: repeat-y;
}

/* column-left */

#column-left {
	float: left;
	width: 192px;
	padding: 0 9px 0 12px;
}

#column-left p.indent {
	padding: 12px 0 4px 24px;
}

/* main content */

#content {
	float: right;
	width: 525px;
}

#content h1 {
	margin-bottom: 10px;
	color: #16469d;
}

#main-content {
	padding: 20px 12px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	float: left;
	width: 525px;
}

#main-content-three-column {
	padding: 20px 12px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	float: left;
	width: 400px;
}

#main-content h2 {
	margin: 30px 0 10px 0;
	color: #16469d;
}

#main-content h3 {
	margin: 25px 0 10px 0;
}

#main-content .highlight h3 {
	margin-top: 0;
}

#main-content li {
	margin-bottom: 10px;
}

#main-content .caption {
	font-size: 10px;
	line-height: 12px;
	color: #666;
}

#main-content .first {
	margin-top: 0;
}

#main-content .pic-left {
	float: left;
	margin: 3px 10px 10px 0;
}

#main-content .pic-right {
	float: right;
	margin: 3px 0 10px 10px;
}

.full-page-override {
	float: left;
	width: 780px !important;
}

.calendar {
	margin-left: -10px;
}

.full-page-override h1 {
	margin-bottom: 10px;
	color: #16469d;
}

.full-page-override p {
	margin-right: 16px;
}


/* * * footer styles * * */

#footer {
	clear: both;
	margin-top: 15px;
	padding: 5px;
	color: #666;
	border-top: 1px solid #ccc;
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
}

#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	text-align: center;
	font-size: .8em;
	line-height: 2em; 
}


/* * * utility styles * * */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}

.fltrt-pp { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
	margin-top: -40px;
}

.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}

.fltrt p { /* use for image captions */
font-size: 0.8333em;
text-align: center;
margin: 8px 0 0 0;
border: 1px solid #333;
padding: 2px 5px 2px 5px;
}

.fltlft p { /* use for image captions */
font-size: 0.8333em;
text-align: center;
margin: 8px 0 0 0;
border: 1px solid #333;
padding: 2px 5px 2px 5px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}

/* textual */

.stronger {
	font-size: 15px;
	line-height: normal;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.inline { display: inline; } 

/* photos or images */

#banner {
	clear: left;
	height: 192px;
	width: 780px;
}

div.photo-right {
	float: right;
	margin: 6px 14px 17px 14px;
}

.photo-right img {
	border: 1px solid #394345;
/*	border: 1px solid #394345 !important; */
}

.photo-right p {
	font-size: 67%;
	text-align: center;
	padding: 2px 5px 2px 5px;
	margin: 3px 0 0 0;
}

div.photo-left {
	float: left;
	margin: 6px 14px 17px 5px;
}

.photo-left img {
	border: 1px solid #394345;
}

.photo-left p {
	font-size: 67%;
	text-align: center;
	padding: 2px 5px 2px 5px;
	margin: 3px 0 0 0;
}

div.photo-center {
	margin: 6px 14px 17px 40px;
}

.photo-center img {
	border: 1px solid #394345;
}

.photo-center p {
	font-size: 67%;
	text-align: center;
	padding: 2px 5px 2px 5px;
	margin: 3px 0 0 0;
}

.icon {
	padding: 24px 40px 0 40px;
}