@import url("http://www.matthewlofton.com/index.php?site/sitebg.css");
/*	-------------------------------------------------------------
	Matthew Lofton, Site Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	.author		Matthew Ortiz
	.version	1.12
	.url		Matthewlofton.com
	-------------------------------------------------------------	*/

/*	-------------------------------------------------------------
	Matthew Lofton, Table of Contents
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	1. =General Styles
	2. =Header
		2a. = Nav
	3. =Main =Content
	4. =Breadcrumbs, all
	5. =Pagination
	6. =Thumbnail nav
	7. =PAD Styles
	8. =Local Sports
	9. =Blog
		9a. =Sidebar_Blog
	10. =Comments
	11. =Search Results
	12. =Contact Form
	13. =IE6
*/

/*	-------------------------------------------------------------
	1. =General Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	html {font-size:100.01%}
	body {font-size:62.5%; font-family:verdana; }
	#container {width:850px; margin:0px auto 0 auto;  padding:10px 0px; overflow:hidden; *width:857px;}
	.clear {clear:both;}
/*	-------------------------------------------------------------
	2. =Header & =Footer
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
		#head h1 a {
			display:block; 
			overflow:hidden; 
			height:102px; 
			width:539px; 
			background:url(images/matthewLofton.gif) no-repeat; 
			text-indent:-999em; 
			margin:0px auto;
			}
		.mainHeader {text-align:center; margin-bottom:2px;}
		#theBar {height:26px; position:absolute; width:100%; top:136px; z-index:300}
		#footer {font-size:.95em; margin-top:30px; text-align:center;}
		
		/*-------------------------------------------------------------
		2a. =Nav
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/		
		#nav {
			background-color:#E6E6E6;
			float:left; 
			padding:4px 4px 4px 4px; 
			width:850px; 
			margin-top:24px; 
			text-align:center; 
			z-index:400; 
			position:relative; 
			overflow:hidden;}
		#nav li {display:inline;}
		#nav li a {
			font:normal 14.2px verdana; 
			letter-spacing:0px; 
			text-decoration:none; 
			color:#656565; 
			border-right:1px solid #B4B4B4; 
			padding:0px 11px;}
		#nav li a:hover {color:#000;}
		#nav li.on a {color:#000;}
	/* ~~~~~~~~~~ SubNav ~~~~~~~~~~~~~~ */
		#subnav {
			text-align:center; 
			margin:0px auto 0px auto; 
			padding:15px 0px 0px 0px; 
			background:url(images/navOn.gif) no-repeat 240px 0px; 
			width:850px; 
			height:31px;}
		#subnav li {display:inline; }
		#subnav li a {color:#656565;  border-right:1px solid #b4b4b4; text-decoration:none; padding:0px 5px;}
		#subnav li a:hover {color:#000; text-decoration:underline;}
		#subnav li.subOn a {font-weight:bold; color:#000;}
		#subnav li a {font-size:.9em;}

/*	-------------------------------------------------------------
	3. =Main =Content
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	#content {margin-top:30px;}
	#sidebar {width:170px; float:left;}
	/* ~~~~~~~~~~ Main ~~~~~~~~~~ */
	#main {width:600px; margin:0px 38px 0px 25px; float:left;}
	#main.photoadayFull {width:790px;}
	#main.photoadayFullMonth {width:790px !important; margin:0px auto; float:none;}
	#main.photoadayFullYear {width:530px !important; margin:0px auto; float:none;}
	
	#main img {margin-bottom:10px;}
	#main_image {text-align:center;}
	#imgDescription {letter-spacing:.05em;}
	#main p {margin-bottom:15px; font-size:1.1em; line-height:1.2em; }
	#main .title {font-size:1.1em; letter-spacing:2px; font-weight:normal; margin-bottom:20px;}
	#main strong {font-weight:bold;}
	.imageBG {text-align:center;}

/*	-------------------------------------------------------------
	4. =Breadcrumbs, all & =pagination
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	/* ~~~~~~~~~~~~~ General Breadcrumb Style ~~~~~~~~~~~~~~~ */
	.breadcrumb {position:relative; margin-bottom:15px;}
	.breadcrumb h2 {font-size:2em; font-weight:bold; float:left;}
	.breadcrumb a {display:block; float:right; width:100px; padding:5px; background-color:#FFD; color:#000; text-decoration:none; margin-left:2px;}
	.breadcrumb a:hover{background-color:#EEE;}
	
	/* ~~~~~~~~~~~~~ Full Image breadcrumbs ~~~~~~~~~~~~~ */
	.photoBread li {display:inline; color:#444}
	.photoBread li a {text-decoration:none; color:#444}
	.photoBread li a:hover {color:#000; text-decoration:underline;}
	
/*	-------------------------------------------------------------
	5. =pagination
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	
	/* ~~~~~~~~~~~~~  PAD Pagination (square, boxes at the bottom of the page) ~~~~~~~~~~~~~~~ */
	#monthView {text-align:center;}
	#monthView h2 {float:none;}
	.breadcrumb h2 {float:none; text-align:center;}
	#monthView a {float:left; background:none; width:inherit; color:#777; margin-right:-100px;}
	#monthView a:hover {color:#000; text-decoration:underline;}
	#yearView {text-align:center;}
	#yearView h2 {float:none;}

	/* ~~~~~~~~~~~~~  pagination link style ~~~~~~~~~~~~~~~ */
	#paginating p, #paginating p a {color:#656565; line-height:15px; text-align:center;}
	#paginating p a {text-decoration:none; }
	#paginating p strong {color:#000; font-weight:normal; padding:0px 4px;}

/*	-------------------------------------------------------------
	6. =thumbnail nav
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	/* ~~~~~~~~~~~~~ Thumbnails 1 col and 2 col ~~~~~~~~~~~~~ */
	.galleria{list-style:none;width:170px}
	.galleria li{display:block;width:71px;height:71px; padding:2px; background:#646464; overflow:hidden;float:left;margin:0 10px 10px 0}
	.galleria li a{display:none}
	.galleria li.hover {background-color:#000;}
	.galleria li div{position:absolute;display:none;top:0;left:180px}
	.galleria li div img{cursor:pointer}
	.galleria li.active div img,.galleria li.active div{display:block}
	.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:71px;height:71px}
	.galleria li .caption{display:block;padding-top:.5em}
	* html .galleria li div span{width:400px} /* MSIE bug */
	.threeImg .galleria li {height:inherit; width:inherit;}
	.threeImg .galleria li img.thumb {height:inherit; width:inherit;}

	/*  ~~~~~~~~~~~~ Homepage thumbs ~~~~~~~~~~~~~ 
		1 col, 3 images high	*/
	.threeImg li a {display:block;  background-color:#646464; width:158px; overflow:hidden; padding:2px; text-align:center; margin-bottom:5px;}
	.threeImg li a:hover {background-color:#000;}
	.threeImg li img {height:103px; width:158px;}

/*	-------------------------------------------------------------
	7. =PAD Styles
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	/* ~~~~~~~~~~~~ Full Page PAD image ~~~~~~~~~~~~ */
	.p-a-d {position:relative;}
	#previous, #next {width:75px;overflow:hidden; text-align:center; position:absolute; top:25%;}
	#previous {left:20px;}
	#next {right:20px;}
	#previous a img, #next a img {padding:2px; background:#646464; margin-bottom:3px;}
	#previous a:hover img, #next a:hover img {background-color:#000;}
	.p-a-d #main.imgFull  {margin:0px auto; width:600px; float:none;}
	.imgFull .breadcrumb h2 {text-align:center; float:none;}
	.imgFull .caption {text-align:center; margin-bottom:10px;}

	/* ~~~~~~~~~~~~ PHOTO OF THE DAY NAVIGATION ~~~~~~~~~~~~ */
	.pad {width:110px; float:left; text-align:center; overflow:hidden; margin:10px;}
	.pad a {text-decoration:none; color:#000;}
	.imgName {display:block; font-size:9px; margin-bottom:4px;}
	#main .pad img {margin-bottom:2px;}
	.pad a img {border:0px; padding:2px;}
	.pad a:hover {color:#333;}
	.pad a:hover img {background-color:#333;}
	
	/* ~~~~~~~~~~~~ PAD year view pagination~~~~~~~~~~~~ */
	#yearNav {border-top:1px solid #DDD; text-align:center; float:none; height:26px; margin-top:15px;}
	.yearNumber {list-style-type:none; margin:10px auto 0px auto; padding:0px; width:502px;}
	.yearNumber li {display:inline;}
	.yearNumber li a {text-decoration:none; color:#555; display:block; float:left; padding:2px; border:1px solid #555; margin-right:2px;}
	.yearNumber li a:hover {background-color:#ccc; color:#FFF; border-color:#000;}
	.yearNumber li.on a {background-color:#e79224; color:#FFF;}
	.yearNumber li.navNext a {margin-right:10px;}
	.yearNumber li.navPrev a {margin-left:10px;}

	/* ~~~~~~~~~~~~ MONTHLY SIDEBAR ~~~~~~~~~~~~ */
	#sidebar .pad img {height:71px; width:71px; padding:0px; margin:0px; border:1px solid #646464}
	#sidebar .pad {float:left; width:71px; height:83px; overflow:hidden; padding:2px;  margin:0px 5px 10px 5px;}
	.archiveLinks {text-align:center; margin-top:5px; }
	.archiveLinks h4 {margin-bottom:0px;}
	.archiveLinks ul {width:150px; clear:both; float:none; text-align:center; margin:5px 0px 0px 345px;}
	#photoComments {border-top:1px solid #ccc; padding-top:5px;}

/*	-------------------------------------------------------------
	8. =Local Sports
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	.sportCategory {margin-bottom:25px;}
	.sportGames {margin:5px 10px 10px 10px;}
	.sportCategory h3 {border-bottom:1px solid #646464; display:block}
	.sportCategory h3 a {font:bold 12pt arial; text-decoration:none; color:#333;}
	.sportCategory h3 a:hover {color:#000;}
	.sportCategory ul li a {text-decoration:none; color:#646464; line-height:15px; font-size:11px;}
	.sportCategory ul li a:hover {color:#000; text-decoration:underline;}
	.sportsMore {margin:5px 0px 0px 0px; text-align:right;}
	.sportsMore a {color:#999; font-style: italic; font-size:9px;}
	.sportsMore a:hover {color:#000}
	.sports .photoBread {margin-bottom:10px;}
	#localSports #sidebar {padding-top:21px;}

/*	-------------------------------------------------------------
	9. =Blog
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	.blog .title a {color:#333; text-decoration:none; font:normal 17px verdana; letter-spacing:0px;}
	.blog .title a:hover {color:#000}
	.blog h2 {margin:0px !important;}
	.blog .post {color:#777;}
	.blog .footer {border-top:1px dotted #ccc; clear:both; margin-top:27px;}
	.blog .readMore a {font:normal 11px verdana;}
	.blog .readMore a:hover {}
	.blog .post {margin-bottom:25px;}
	.blog .postFull .footer {padding:1px 0px;}
	/*	-------------------------------------------------------------
		9a. =Sidebar_Blog
		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/	
		#blog .sidetitle {font:normal 13px verdana; border-bottom:1px solid #777; text-transform:uppercase; margin-bottom:15px;}
		#blog #sidebar ul {margin:0px 0px 35px 5px;}
		#blog #sidebar ul li {list-style-type: disc; color:#777; margin:4px 0px 0px 10px;}
		#blog #sidebar ul li a {text-decoration:none; color:#777; line-height:14px; font-size:11px;}
		#blog #sidebar ul li a:hover {text-decoration:underline; color:#000;}
		.pagecount {display:block; clear:both; margin:5px 0px 0px 5px;}
		.findIt {margin-bottom:10px;}
		.searchinput {border:1px solid #777; color:#777;}

		#blog #sidebar #connections {margin-left:0px;}
		#blog #sidebar #connections li {list-style-type:none; margin-left:0px; padding-left:15px;}
		#connections li {background:url(images/connections.png) no-repeat;}
		#connections li.rss {background-position:0px 2px;}
		#connections .twitter {background-position:0px -15px;}
		#connections .dailymile {background-position:0px -33px;}
                #connections .facebook {background-position:0px -50px;}	
	
/*	-------------------------------------------------------------
	10. =Comments
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	.startComments {font:bold 1.8em trebuchet ms; border-bottom:1px solid #ccc; margin-bottom:10px}
	.comment .posted {width:120px; color:#777; float:left;}
	.date {color:#999; margin-bottom:15px;}
	.comment .uComment {width:468px; margin:0px 0px 0px 120px !important;}
	.comment .uComment p {line-height:15px !important;}
	.comment { margin:0px;padding:10px 0px 0px 5px; border-bottom:1px dotted #ccc;  font:normal 11px arial;}
	.Even {background-color:#e5e5e5;}
	.paginate {display:block; clear:both;}
	.blog_section {font:bold 1.3em trebuchet ms; margin:5px 0px 2px 120px;}
	#comment_form {width:475px; margin-left:120px;}
	#comment_form input[type="text"], #comment_form textarea {width:476px; border:1px solid #999; padding:3px 2px; color:#777; font:normal 12px/13px arial }
	#comment_form input[type="submit"] {width:150px; border:1px solid #777; color:#777; background-color:#f0f0f0; padding:3px 0px;}
	#comment_form input[type="submit"]:hover {color:#000; border-color:#000; background-color:#DDD}
/*	-------------------------------------------------------------
	11. =Search Results
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	.searchResults dt {margin-top:10px;}
	.searchResults dt a {color:#555; text-decoration:none; font:bold 13px arial;}
	.searchResults dt a:hover {color:#000;}
	.searchResults dd {margin:3px 0px 0px 10px;}
	
/*	-------------------------------------------------------------
	12. =Contact Form
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	.contact label{display:block; margin-bottom:2px; font-weight:bold;}
	.contact input, .contact textarea {width:250px; border:1px solid #999; padding:2px; font:normal 12px arial; color:#555;}.
	
/*	-------------------------------------------------------------
	13. =IE6 Warning Error Message
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
	#ie6Warning {
		background: #FC6;
		border: 1px solid #bbbbbb;
		padding: 5px;
		font-size:110%;
		margin-bottom:5px;
	}
	#ie6Warning a {color:red; text-decoration:none;}
	#ie6Warning a:hover {color:#9D6419;}
	#ie6Warning h2 {
		background: url(http://www.matthewlofton.com/images/ie6-warning.gif) 0 50% no-repeat;
		padding-left: 40px;
		font-size:30px;
		margin-bottom:5px;		
	}

/* Misc */
#pages #main_image {width:600px; float:left; margin-right:20px;}
#main iframe {margin-top:20px;}