/* CSS Document */


/*  Main Styles 
---------------------------------------------------------------------------------*/

html, body {
	background:#fff url(images/bg-ie.png) no-repeat; /* Gives the illusion of the header being at 100% width in IE */
	font-family: "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#666;
	margin:0;
	padding:0;
}


#content {
	background:#fff url(images/bg-gradient.png) repeat-x;
	padding:0px;
	margin:0px;
	min-width:800px; /* The page starts to have horiz scrolling when the browser gets reduced to 800 pixels wide */
	_width:800px; /* A hack, alas.  To prevent floats from wrapping, and otherwise freaking out, in IE */
}


#nav a:link, #nav a:visited {
	color:#666;
	text-decoration:none;
}

#nav a:hover {
	color:#e76f00;
	text-decoration:none;
}

#main {
	padding: 30px 20px 20px 20px;
	margin:0;
	clear:both;
}

/*#content > #main {
	padding-top:70px; 
}
*/
#main a:link, #main a:visited {
	color:#35556b;
	text-decoration:none;
}

#main a:hover {
	color:#e76f00;
	text-decoration:underline;
}

#main a.sm:link, #main a.sm:visited {
	font-size:11px;
	color:#35556b;
	text-decoration:none;
}

#main a.sm:hover {
	font-size:11px;
	text-decoration:underline;
	color:#e76f00;
}

#main #left {
	float:left;
	width:370px; /* This is how wide the left column is in pages with columns */
	
}

#left > p {
	padding-right:30px; /* This puts a little padding between the content in the left column, which should always be text (the most important info is here and will almost never need hscrolling to view), and the right.  Using margins/padding on the actual columns themselves broke the layout. IE doesn't need this because it puts a lot of space there anyway*/
}

.first {
	clear:both; /* Fixes the cross-browser spacing issue between headers and content; Firefox doesn't like an explicit clear in a separate div and puts too much space in, and Safari doesn't seem to care one way or another, and IE needs a clear or it looks too cramped*/
}

#main #right {  /* More IE hacks.  :(  Keeps the columns from running all over the place as the window is resized in IE. */
	_float:right;
	_width:360px;	/* Keeps the right column from being fluid (photos start looking wonky) */
}

#main > #right {
	margin-left:370px; /* This clears the amount of space needed for the left column for the right column so no float is needed in non-IE browsers */
	max-width:350px; /* Keeps the right column from being fluid */
	}


#main #left-classes {
	float:left;
	_width:380px;
}

#main > #left-classes {
	position:relative;
	top:-10px;
	width:360px;
}

#main #right-classes {
	_float:right;
	_width:370px;
	}

#main > #right-classes {
	margin-left:370px;
	max-width:360px;
	position:relative;
	top:-10px;
	}


h2 {
	font-size:14px;
	font-weight:bold;
	padding-top:15px;
}

.sm {
	font-size:11px;
}

/*  Masthead 
---------------------------------------------------------------------------------*/

#masthead {
	background:url(images/header.png) no-repeat;
	height:87px;
	min-width:750px;
}


/* Global Navigation
---------------------------------------------------------------------------------*/

#nav {
	background: url(images/menubar-bg.png) repeat-x;
	float:left;
	min-width:750px;	
}

#nav ul {
  margin:0;
  list-style:none;
  text-transform:lowercase;
  position:relative;
  left:-35px;
  }
  
#nav li {
  float:left;
  padding:0;
  background-image:none;
  line-height:normal;
  text-indent:0;
  }

#nav .at {
	padding:8px;
	color:#e76f00;
	font-weight:bold;
	}

#nav a {
  display:block;
  padding:8px;
  background:url(images/unselected-bg.png) repeat-x;
  text-decoration:none;
  white-space:nowrap;
  }
  
 #nav .divider-first {
	background:url(images/divider-first.png) no-repeat;
	height:30px;
	width:15px;
}
 
  
#nav .divider {
	background:url(images/divider.png) no-repeat;
	height:30px;
	width:5px;
}

#nav .divider-large {
	background:url(images/divider-large.png) no-repeat;
	height:30px;
	width:15px;
}
    
#nav .divider-last {
	background:url(images/divider-last.png) no-repeat;
	height:30px;
	width:15px;
}
	
/*  HomePage Left Section
---------------------------------------------------------------------------------*/
#welcome {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/welcome.png');
	margin:0 12px 12px 0px;
	width:224px;
	height:30px;
	float:left;
}

#left > #welcome {
	background:url(images/welcome.png) no-repeat;
	margin:0px;
	padding:0 12px 10px 0px;
	width:224px;
	height:30px;
	float:left;
}



/*  Custom Border Boxes
---------------------------------------------------------------------------------*/

/* Default styling. Used when JavaScript is unsupported */
.cbb {
	padding:0 10px;
	margin:1em 0;
	border:1px solid #999;
	}


/* Insert the custom corners and borders for browsers with sufficient JavaScript support */
.cb {
	margin:0;
	}
	
/* Rules for the top corners and border */
.bt {
	background:url(images/box.png) no-repeat 100% 0;
	margin:0 0 0 17px;
	height:17px;
	/*height:8px;*/
	}
			
.bt div {
	height:17px;
	width:17px;
	position:relative;
	left:-17px;
	background:url(images/box.png) no-repeat 0 0;
	}

/* Rules for the bottom corners and border */
.bb {
	background:url(images/box.png) no-repeat 100% 100%;
	margin:0 0 0 17px;
	height:17px;
	/*height:5px;*/
	}
.bb div {
	height:17px;
	/*height:5px;*/
	width:17px;
	position:relative;
	left:-17px;
	background:url(images/box.png) no-repeat 0 100%;
	z-index:4;
	}

/* Insert the left border */
.i1 {
	padding:0 0 0 11px;
	background:url(images/borders.png) repeat-y 0 0;
	}
	
/* Insert the right border */
.i2 {
	padding:0 11px 0 0;
	background:url(images/borders.png) repeat-y 100% 0;
	}
	
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#e3e3e3;
	border:1px solid #e3e3e3;
	border-width:1px 0;
	padding:0px;
	}


/*  HomePage Right Section / Photo & News Box Styles
---------------------------------------------------------------------------------*/

.box-bg-photo {
	background: url(images/mainphoto.jpg);
	height:225px;
	position:relative;
	top:-8px;
	z-index:5;
}

.box-annotations {
	text-align:right;
	padding:10px 12px 0px 0px;
	font-size:11px;
	background:#e3e3e3;
	margin-top:-10px;
}

.box-bg {
	background:#fff;
	border:5px solid #fff;
	position:relative;
	top:-8px;
	margin-bottom:3px;
	padding-top:3px;
}

.box-header {
	background: #fff url(images/header-whatsnew.png) no-repeat;
	height:38px;
	position:relative;
	top:-8px;
}


.iconlink .text {
	position:relative;
	bottom:8px;
	left:6px;
	height:20px;
	width:40px;
}

.iconlink:hover {
	color:#e76f00;
	text-decoration:none;
}

.iconlink {
h: expression(onmouseover=new Function("this.style.color='#e76f00';"),
                       onmouseout=new Function("this.style.color='#35556b';"));
					   }
					   
.box-bg > .iconlink {
	padding:0px 0px 3px 15px;
}

					   
.clear {
	clear:both;
	}
	
.clearR{
	clear:right;
}

.clearL{
	clear:left;
}

/*  About Sean Styles
---------------------------------------------------------------------------------*/
#seandockery {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/seandockery.png');
	margin:0 12px -10px 0px;
	width:327px;
	height:38px;
	float:left;
}

#left > #seandockery {
	background:url(images/seandockery.png) no-repeat;
	margin:0px;
	padding:0 12px 12px 0px;
	width:327px;
	height:38px;
	float:left;
}

.box-bg-photosean {
	background: url(images/sean.jpg);
	height:500px;
	position:relative;
	top:-8px;
	margin-bottom:-17px;
	z-index:5;
}


/*  About Charity Styles
---------------------------------------------------------------------------------*/
#charitylebron {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/charitylebron.png');
	margin:0 12px -10px 0px;
	width:342px;
	height:39px;
	float:left;
}

#left > #charitylebron {
	background:url(images/charitylebron.png) no-repeat;
	margin:0px;
	padding:0 12px 12px 0px;
	width:342px;
	height:39px;
	float:left;
}

.box-bg-photocharity {
	background: url(images/charity.jpg);
	height:500px;
	position:relative;
	top:-8px;
	margin-bottom:-17px;
	z-index:5;
}


/*  Schedule Styles
---------------------------------------------------------------------------------*/
#title-schedule {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/title-schedule.png');
	margin:0px 12px 12px 6px;
	width:269px;
	height:26px;
}

#main > #title-schedule {
	background:url(images/title-schedule.png) no-repeat;
	padding:0 12px 12px 6px;
	width:269px;
	height:26px;
}


/*  Classes Styles
---------------------------------------------------------------------------------*/
#title-classes {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/title-classes.png');
	margin:0 12px 12px 6px;
	width:502px;
	height:32px;
}

#main > #title-classes {
	background: url(images/title-classes.png) no-repeat;
	padding:0 12px 12px 6px;
	width:502px;
	height:32px;
}


.box-header-classes {
	background: #fff url(images/header-classes-bg.png) repeat-x;
	height:38px;
	position:relative;
	top:-8px;
}

.box-header-classes .text {
	padding:12px 8px 8px 8px;
	color:#fff;
	font-weight:bold;
}

.box-header-classes .location {
	color:#fff;
	
}

.desc-classes {
	margin: 0px 12px 0px 12px;
	font-size:11px;
}

.desc-classes ul {
 list-style-type: none; 
 margin-left: 0;
 padding-left: 0;
}

.desc-classes ul li {
padding-left: 0;
}

.fineprint {
	font-size:10px;
	color:#aaa;
}

/* Styles for boxes with different borders */
.two { margin-bottom:15px;}
.two .i1,
.two .i2 { background-image:url(images/borders-fade.png); }
.two .bt,
.two .bt div { background-image:url(images/box-fade.png); }
.two .bb,
.two .bb div { background-image:url(images/box-fade.png); height:65px; }

/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.two .i3 {
	background:#fff;
	border:1px solid #fff;
	border-width:1px 0;
	padding:0px;
	}

/*  Photos Styles
---------------------------------------------------------------------------------*/
#title-photos {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/title-photos.png');
	margin:0 12px 12px 6px;
	width:595px;
	height:26px;
}

#main > #title-photos {
	background: url(images/title-photos.png) no-repeat;
	padding:0 12px 12px 6px;
	width:595px;
	height:26px;
}

#main #photos-left {
	float:left;
	width:180px; /* This is how wide the left column is in pages with columns */
}
/* 
#left > p {
	padding-right:30px; This puts a little padding between the content in the left column, which should always be text (the most important info is here and will almost never need hscrolling to view), and the right.  Using margins/padding on the actual columns themselves broke the layout. IE doesn't need this because it puts a lot of space there anyway
}

.first {
	clear:both; /* Fixes the cross-browser spacing issue between headers and content; Firefox doesn't like an explicit clear in a separate div and puts too much space in, and Safari doesn't seem to care one way or another, and IE needs a clear or it looks too cramped
}*/

#photos-left ul {
 list-style-type: none; 
 margin-left: 18px;
 padding-left:0;
}

#photos-left ul li {
padding-bottom: 8px;
}


#main #photos-right {  /* More IE hacks.  :(  Keeps the columns from running all over the place as the window is resized in IE. */
	_float:right;
	_width:550px;	/* Keeps the right column from being fluid (photos start looking wonky) */
}

#main > #photos-right {
	margin-left:200px; /* This clears the amount of space needed for the left column for the right column so no float is needed in non-IE browsers */
	max-width:550px; /* Keeps the right column from being fluid */
	}

.photos {
	width:500px;
	height:385px;
	background:url(images/photos-bg.gif) no-repeat;
	position:relative;
	bottom:7px;
}

/*  Videos Styles
---------------------------------------------------------------------------------*/
#title-videos {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/title-videos.png');
	margin:0 12px 12px 6px;
	width:423px;
	height:26px;
}

#main > #title-videos {
	background: url(images/title-videos.png) no-repeat;
	padding:0 12px 12px 6px;
	width:423px;
	height:26px;
}

#container-single {
	width: 600px;
	padding-top:12px;
}

#main > #container-single {
	padding-top:0px;
}

#container-single ul {
 list-style-type: none; 
 margin-left: 18px;
 padding-left:0;
}

#container-single p {
	margin-left:18px;
}

#container-single ul li {
padding-bottom: 8px;
}


/*  Music Styles
---------------------------------------------------------------------------------*/
#title-music {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/title-music.png');
	margin:0 12px 12px 6px;
	width:94px;
	height:26px;
}

#main > #title-music {
	background: url(images/title-music.png) no-repeat;
	padding:0 12px 12px 6px;
	width:94px;
	height:26px;
}


/*  Links Styles
---------------------------------------------------------------------------------*/
#title-links {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/title-links.png');
	margin:0 12px 12px 6px;
	width:88px;
	height:26px;
}

#main > #title-links {
	background: url(images/title-links.png) no-repeat;
	padding:0 12px 12px 6px;
	width:88px;
	height:26px;
}



/*  Contact Styles
---------------------------------------------------------------------------------*/
#title-contact {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/title-contact.png');
	margin:0 12px 12px 6px;
	width:390px;
	height:26px;
}

#main > #title-contact {
	background: url(images/title-contact.png) no-repeat;
	padding:0 12px 12px 6px;
	width:390px;
	height:26px;
}