/* 
* Author: David Organ - www.webcraft.co.nz
* Date Created: 5/3/09
* Project: Hare Krishna School Website
*/

/* YUI CSS DEFAULTS */
body{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}


/* GLOBAL STYLES */

html, body {
background-image: url(images/graphics/bodyBg.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
margin: 0 0 5px 0;
font-size: 19px;
color: #314d98; /*topmenu blue*/
font-family: "Times New Roman", Times, serif;
}

h2 {
margin: 0 0 5px 0;
font-size: 16px;
color: #314d98; /*topmenu blue*/
font-family: "Times New Roman", Times, serif;
}

h2 a{
margin: 0 0 5px 0;
font-size: 22px;
color: #314d98; /*topmenu blue*/
font-family: "Times New Roman", Times, serif;
}

h2 a:hover {
	text-decoration: underline;
} 

h3 {
margin: 0 0 5px 0;
font-size: 14px;
color: #314d98; /*topmenu blue*/
font-family: "Times New Roman", Times, serif;
}

h3 a{
margin: 0 0 5px 0;
font-size: 14px;
color: #314d98; /*topmenu blue*/
font-family: "Times New Roman", Times, serif;
}

p {
margin: 0 0 10px 0;
font-size: 12px;
line-height: 20px;
color: #214061;
font-family: Arial, Helvetica, sans-serif;
}

a:link, a:visited, a:hover, a:active {
text-decoration: none;
}

p strong {
font-weight: bold;
}

p a {
color: #214061;
}

p a:hover {
color: #9e8b75; /* light brown */
text-decoration: underline;
}

li strong {
font-weight: bold;
}

strong {
font-weight: bold;
}

em {
	font-style: italic;
}

small {
	color: #214061;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

/* PAGE ELEMENT STYLES */

.clear {
clear: both;
}

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

#headerHome {
width: 1003px;
height: 138px;
background-image: url(images/graphics/headerBg.jpg);
background-repeat: no-repeat;
}

#header {
width: 1003px;
height: 138px;
background-image: url(images/graphics/headerContent.jpg);
background-repeat: no-repeat;
}

/* Search Form Styles Begin */

#header #pageSearch{
float: right;
width: 300px;
margin: 7px 5px 0 0;
}

#header form#searchform label {
float: left;
margin: 4px 5px 0 0;
font-size: 12px;
line-height: 18px;
color: #214061;
font-family: Arial, Helvetica, sans-serif;
}

#header form#searchform input{
width: 110px;
height: 12px;
padding: 3px;
font-size: 12px;
line-height: 18px;
color: #214061;
font-family: Arial, Helvetica, sans-serif;
}

#header form#searchform input#searchsubmit {
width: 60px;
height: 20px;
color:#214061;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}

/* Search Form Styles End */

/* Top Menu Begins */

#topmenu {
float: right;
width: 768px;
margin: 74px 15px 0 0;
padding: 0;
font-family: "Times New Roman", Times, serif;
}

#topmenu li a{
float: left;
width: 100px;
height: 25px;
padding: 0;
margin: 0;
text-align: center;
font-size: 19px;
color: #314d98; /*topmenu blue*/
}

#topmenu li a:hover{
background-image: url(images/graphics/topmenuHover.jpg);
background-repeat: no-repeat;
background-position: center 18px;
}

#nav, #nav ul{
position:relative;
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
text-align: center;
background-image: url(images/graphics/topdropBg.png);
}

#nav a{
display:block;
padding:0;
text-decoration:none;
}

#nav a:hover{
}

#nav li{
float:left;
position:relative;
width: 100px;
}

#nav ul {
position:absolute;
display:none;
width: 150px;
top:25px;
}

#nav li ul a{
width: 150px;
height:auto;
float:left;
padding: 10px 0 0 0;
color: #314d98; /*topmenu blue*/
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

#nav ul ul{
top:auto;
}	

#nav li ul ul {
left: 100px;
margin: 0 0 0 1px; /* Gap between drop down menus */
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

#nav li ul li {
width: 150px;
border-bottom: 1px #9e8b75 dotted;
background-image: none;
line-height: 15px;
padding-bottom: 6px;
text-align: center;
}

#nav li ul li a:hover {
color: #9e8b75; /* light brown */
background-image: none;
}

li.current_page_item a {

}
/*  Top Menu Ends*/

#leftNavbar {
float: left;
width: 216px;
margin: 35px 0 0 0;
background-image: url(images/graphics/leftNavMid.jpg);
background-repeat: repeat-y;
font-family: "Times New Roman", Times, serif;
}

#leftNavbar ul {
width: 200px;
margin: 0 8px 0 13px;
}

#leftNavbar li {
width: 190px;
/* height: 25px; */
padding: 2px 0px 10px 0px;
border-bottom: 1px #9e8b75 dotted;
}

#leftNavbar li a {
display: block;
margin: 10px 0 0 5px;
color: #314d98; /*topmenu blue*/
text-decoration: none;
}

#leftNavbar li a:hover {
color: #9e8b75; /* light brown */
text-decoration: none;
}

#leftNavbar li.headingLink {
height: 22px;
padding: 0 0 0 5px;
margin: -7px 0 0 0;
font-size: 19px;
color: #314d98; /*topmenu blue*/
background-image: url(images/graphics/leftLinkUnderline.jpg);
background-repeat: no-repeat;
background-position: -5px 18px;
border-bottom: none;
text-decoration: none;
}

#leftNavbar li.headingLink a {
height: 22px;
padding: 0 0 0 0;
margin: -7px 0 0 0;
font-size: 19px;
color: #314d98; /*topmenu blue*/
background-image: url(images/graphics/leftLinkUnderline.jpg);
background-repeat: no-repeat;
background-position: -5px 18px;
border-bottom: none;
text-decoration: none;
}

#leftNavbar li.headingLink a:hover {
color: #9e8b75; /* light brown */
}

/* sub category styles for left menu begin */

#leftNavbar ul ul{
width: 200px;
margin: 0 8px 0 15px;
}

#leftNavbar ul ul li {
width: 175px;
height: 25px;
border-bottom: none; /* 1px #9e8b75 dotted */
}

#leftNavbar ul ul li a {
display: block;
margin: 10px 0 0 5px;
color: #8594bc; /* light blue */
text-decoration: none;
}

#leftNavbar ul ul li a:hover {
color: #9e8b75; /* light brown */
text-decoration: none;
}


/* sub category styles end */

.leftNavbarTop {
width: 216px;
height: 26px;
background-image: url(images/graphics/leftNavTop.jpg);
background-repeat: no-repeat;
}

.leftNavbarBottom {
width: 216px;
height: 26px;
background-image: url(images/graphics/leftNavBottom.jpg);
background-repeat: no-repeat;
}

#content.content {
float: left;
width: 600px;
margin: 54px 0 0 30px;
}

#content.content h1 {
display: block;
width: 480px;
height: 35px;
font-size: 19px;
color: #314d98; /*topmenu blue*/
background-image: url(images/graphics/titleLine.jpg);
background-repeat: no-repeat;
background-position: -5px 18px;
}

#content.content ul li{
margin: 0px 0px 0px 15px;
font-size: 12px;
line-height: 20px;
color: #214061;
font-family: Arial, Helvetica, sans-serif;
list-style: disc;
}

#content.content p.quote {
text-align: center;
font-weight: bold;
margin: 5px 0 5px 0;
}

#content.content img.centreImg {
margin: 0 130px 0 130px;
}

#content.content ul#uniform {
width: 500px;
}

#content.content ul#uniform li{
float: left;
width: 120px;
margin: 0 10px 0 0;
font-size: 12px;
line-height: 16px;
color: #214061;
font-family: Arial, Helvetica, sans-serif;
background-image: none;
border: none;
}

.images {
float: left;
width: 222px;
min-height: 600px;
margin: 54px 0 0 35px;
}

.images img {
width: 210px;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #314d98;
}



/* ################## Homepage Styles Begin ################## */

#flashGraphic {
width: 934px;
height: 311px;
margin:2px auto 5px auto;
background-image: url(images/graphics/flashGraphic.jpg);
background-repeat: no-repeat;
}

#slideshow {
float: right;
width: 360px;
height: 250px;
margin: 25px 22px 0 0;
border: 3px solid #eee5dc;
}

#homeContent {
width: 934px;
margin: 0 auto;
}

#events {
float: left;
width: 470px;

font-family: "Times New Roman", Times, serif;
}

#events p {
color: #9e8b75; /* light brown */
}

#events img.eventLine{
margin: 0 0 8px 0;
padding: 0;
}

.eventSnip {
width: 470px;
margin: 5px 0 15px 0;
}

.eventSnip h2 a{
color: #314d98; /*topmenu blue*/
}

.eventSnip h2 a:hover{
text-decoration: underline;
color: #9e8b75; /* light brown */
}

.eventSnip a{
color: #314d98; /*topmenu blue*/
}

.eventSnip a:hover{
	text-decoration: underline;
}

.eventSnip span.date {
font-size: 11px;
}

#quickLinks {
float: left;
width: 200px;
height: 300px;
margin: 0 0 0 32px;
font-family: "Times New Roman", Times, serif;
}

#quickLinks ul{
margin: 10px 0 0 0;
}

#quickLinks li{
height: 25px;
border-bottom: 1px #9e8b75 dotted;
}

#quickLinks a {
display: block;
margin: 10px 0 0 5px;
color: #314d98; /*blue*/
}

#quickLinks a:hover {
color: #9e8b75; /*brown*/
}

#contact {
float: left;
width: 200px;
height: 300px;
margin: 0 0 0 32px;
font-family: "Times New Roman", Times, serif;
}

#contact ul{
margin: 10px 0 0 0;
}

#contact li{
min-height: 25px;
margin: 10px 0 0 5px;
border-bottom: 1px #9e8b75 dotted;
color: #9e8b75; /*brown*/
}

#contact li a{
color: #314d98; /*blue*/
}

#contact li a:hover{
color: #9e8b75; /*brown*/
}


#contact li.address{
margin: 5px 0 0 5px;
padding: 0 0 2px 0;
}

#contact img.icons {
float: left;
margin: 0 5px 0 0;
}

/* ################## News Page Styles Start ################## */

.leftCol {
float: left;
width: 216px;
}

.newsClip {
margin: 20px 0 20px 0;
border-bottom: 1px solid #314d98;
}

.newsClip h1 {
color: #314d98; /*topmenu blue*/
}

.newsClip span.date {
color: #9e8b75; /*brown*/
font-size: 11px;
}

.archives {
float: left;
width: 216px;
margin: 35px 0 0 0px;
background-image: url(images/graphics/leftNavMid.jpg);
background-repeat: repeat-y;
font-family: "Times New Roman", Times, serif;
}

.archives a {
display: block;
margin: 10px 0 0 5px;
color: #314d98; /*topmenu blue*/
text-decoration: none;
}

.archives  a:hover {
color: #9e8b75; /* light brown */
text-decoration: none;
}

.archives ul {
width: 200px;
margin: 0 8px 0 13px;
}

.archives li {
width: 190px;
/* height: 25px; */
padding: 2px 0px 10px 0px;
border-bottom: 1px #9e8b75 dotted;
}

.archives li.headingLink {
height: 22px;
padding: 0 5px 0 0;
margin: -7px 0 0 5px;
font-size: 19px;
color: #314d98; /*topmenu blue*/
background-image: url(images/graphics/leftLinkUnderline.jpg);
background-repeat: no-repeat;
background-position: -5px 18px;
border-bottom: none;
text-decoration: none;
}

.archiveNavbarBottom {
width: 216px;
height: 26px;
background-image: url(images/graphics/leftNavBottom.jpg);
background-repeat: no-repeat;
}

.mainDiv {
clear: both;
width: 190px;
min-height: 25px;
margin: 10px 0 10px 15px;
border-bottom: 1px #9e8b75 dotted;
}

.topItem {
width: 190px;
height: 25px;
display: block;
margin: 10px 0 0 0;
color: #8594bc; /* light blue */
text-decoration: none;
cursor:pointer;
}

.topItemOver {
width: 190px;
height: 25px;
display: block;
margin: 10px 0 0 0;
color: #9e8b75; /* light brown */
text-decoration: none;
cursor:pointer;

}

.topItemClose {
width: 190px;
height: 25px;
display: block;
margin: 10px 0 0 0;
color: #8594bc; /* light blue */
text-decoration: none;
cursor:pointer;
}


.topItemCloseOver {
width: 190px;
height: 25px;
display: block;
margin: 10px 0 0 0;
color: #9e8b75; /* light brown */
text-decoration: none;
cursor:pointer;
}



.dropMenu {
clear: both;
width: 190px;
display: block;
color: #8594bc; /* light blue */
text-decoration: none;
cursor:pointer;
filter:alpha(opacity=100);
}

.subMenu {
display:block;
}

.subItem {
width: 190px;
height: 25px;
display: block;
margin: 10px 0 0 5px;
color: #8594bc; /* light blue */
text-decoration: none;
cursor:pointer;
border: none;
   
}

.subItem a
{
width: 190px;
height: 25px;
display: block;
margin: 10px 0 0 5px;
color: #8594bc; /* light blue */
text-decoration: none;
cursor:pointer;
font-size: 13px;
}

.subItemOver
{
width: 190px;
height: 25px;
display: block;
margin: 10px 0 0 5px;
color: #8594bc; /* light blue */
text-decoration: none;
cursor:pointer;
font-size: 13px;

}

.subItemOver a {
width: 190px;
height: 25px;
display: block;
margin: 10px 0 0 5px;
color: #8594bc; /* light blue */
text-decoration: none;
cursor:pointer;
font-size: 13px;
}

#space {
clear: both;
}

.clear {
clear: both;
height:7px;
padding-bottom: 10px;
background-image: url(images/graphics/titleLine.jpg);
background-repeat: no-repeat;
}

.clearNoImage {
clear: both;
}

.commentsContainer {
width: 600px;
margin: 0px auto;
padding: 0px 0px 0px 90px;
}

.commentsContainer em {
font-size: 12px;
color: #9e8b75; /*brown*/
}

.commentsContainer a {
color: #314d98; /*topmenu blue*/
}

.comment-author {
padding: 5px 0px;
font-size: 12px;
color: #314d98; /*topmenu blue*/
}

.comment-author cite{
font-size: 14px;
color: #314d98; /*topmenu blue*/
}

span.says {
display: none;
font-size: 12px;
}

.comment-meta {
padding: 2px 0px;
font-size: 12px;
}

.commentmetadata a {
color: #8594bc; /* light blue */
}

textarea#comment {
width: 590px;
padding: 5px;
border: 1px solid #d6d0c8;
}

ol li.comment {
margin: 10px 0px;
border-bottom: 1px solid #d6d0c8;
}

.navigation {
clear: both;
height: 20px;
padding: 10px 0px;
border-top: 1px solid #d6d0c8;
border-bottom: 1px solid #d6d0c8;

}

.navigation  a {
font-size: 16px;
font-family: "Times New Roman", Times, serif;
color: #214061;
}

.navigation a:hover {
color: #9e8b75; /* light brown */
text-decoration: underline;
}


/* ################## News Page Styles End ################## */


/* ################## Homepage Styles End ################## */

#footer {
clear: both;
width: 1003px;
height: 20px;
margin: 10px auto;
color: #9e8b75; /*brown*/
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
}

#footer p {
font-size: 9px;
color: #214061;
}


#footer p a {
font-size: 9px;
color: #214061;
}

#footer p a:hover {
color: #9e8b75; /* light brown */
text-decoration: underline;
}

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 10px;
	display: inline;
}

img.alignleft {
	padding: 4px;
	margin: 0 10px 2px 0;
	display: inline;
}

.alignright {
	float: right;
}

.alignleft {
	float: left
}
/* End Images */