@charset "utf-8";
/* CSS Document */

/*
Theme Name: Metamorphosis
Theme URI: http://www.wordpress.gordonfrench.com/metamorphosis
Description: Metamorphosis gives you an unmatched flexibility to change every aspect of your site. Not happy with just right a sidebar then change it. Want your own header, then upload and activate or choose one of ours. Want a fancy slider on the home page, well you got one. Bored with white websites, every color can be changed with a few mouse clicks. Into social network, its ready to go. Need a map, there is a dynamic one on your contact page. And finally if you are into selling ads then we have you covered.
Version: 1.1
Author: Gordon French
Author URI: http://www.gordonfrench.com
Tags: 

	This theme was coded by Gordon French,
	whose portfolio can be found at http://gordonfrench.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* ------------------------------------- Main Structure ------------------------------------------------------- */


/* no need to change the my-wrapper it simple allows everything to be centered */
.my-wrapper			{ width:100%; }

/* width of frame determines width of content area. */
.my-frame			{ width:1050px; text-align:left; background-color:#FFF; padding:0px 40px; margin-bottom:30px;
						border-left:1px solid #CCC; border-right:1px solid #CCC; border-bottom:1px solid #CCC; position:relative;}

/* Post Images */
img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline;}
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline;}
.aligncenter	{ display: block; margin-left: auto; margin-right: auto; } 
.alignright { float: right; }
.alignleft { float: left;}
/* End Images */

/* required stuff */
img, a img 			{ border:none}
a:active 			{ outline: none;}
a:focus				{ outline: none;}
a					{ text-decoration:none}

/* basic styleing */
h1, h2, h3, h4, h4, h6	{ padding:0; margin:0}


/* ------------------------------------- Header --------------------------------------------------------------- */
.header-wrap		{ height:150px; width:1050px; }
#my-header			{ position:relative; height:80px; width:1050px; left:-40px; margin-bottom:-1px; padding:5px 40px 5px 40px; }
#blogTitle			{ position:relative; margin:0px 0px 0px 0px; padding:0px; font-size:200%;}
#homeLink 			{ color:#424242;}
#homeLink:hover		{ color:#900;} 

#my-desc			{ position:relative; color:#999; font-style:italic}

#my-logo			{ position:relative; width:50px; height:50px; float:left; margin:7px 10px 0px -5px;}

#searchBox			{ position:absolute; top:15px; left:835px;}
.searchBTN			{ position:absolute; top:0; left:232px;}
.searchInput		{ width:250px; color:#999}

#socialLinks		{ text-align:right; position:absolute; top:60px; left:290px; width:800px;}
#socialLinks a	{ filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; }
#socialLinks a:hover{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; }



/* ------------------------------------- Navigation --------------------------------------------------------------- */
.my-nav							{ position:absolute; padding:5px; height:20px; border-top:1px solid #CCC; 
									border-bottom:1px solid #CCC; list-style:none; z-index:5; width:1040px;}
.my-nav ul						{ position:relative; padding:0px; margin:0px; list-style:none; z-index:20}
.my-nav li						{  }
.my-nav ul li 					{ float:left;}/* pages GREEN */
.my-nav li ul li 				{ display:block; position:relative; }/*level 1 */ 
.my-nav li ul li ul li 			{ position:relative; display:none; padding-top:7px;}/*level 2 */
.my-nav li ul li li li  		{ position:absolute; padding-top:4px;  }/*level 3*/ 

.my-nav li ul li:hover 			{ display:block;}
.my-nav li ul li li:hover 		{ display:block; }
.my-nav li ul li li li:hover 	{ display:block;}
.my-nav li ul li:hover li 		{ display:block;}

.my-nav li a					{ position:relative; color:#424242; padding:2px 7px; margin:10px 5px;}
.my-nav li ul li a:hover		{ color:#900; }
.my-nav li ul li li a:hover		{ color:#c37005; }
.my-nav li ul li li a			{ background:url(images/white.png) repeat; }




/* ------------------------------------- Footer --------------------------------------------------------------- */
.my-footer			{ position:relative; min-height:70px; padding:5px; clear:both; border-top:1px solid #CCC}

.my-lowerWidgets	{ position:relative; left:-15px; width:1080px; font-size:80%; }
.lowerWidget		{ min-height:50px; float:left; width:335px; margin:10px 10px 0px; padding:5px 0px;}
.widgetFrame		{ padding:0px 5px 0px 0px; font-size:90%; margin-bottom:-10px;}

#top-widget			{ width:1050px; padding:0px 0px 5px 0px; margin:0px 0px 10px 10px; border-bottom:1px solid #CCC; }
#top-widget .lowerWidget {  width:340px;  margin:0px; padding:5px 10px 0px 0px;}

#top-full-widget	{ width:1050px; padding:0px 0px 5px 0px; margin:0px 0px 10px 15px; }
#low-full-widget	{ width:1050px; padding:0px 0px 5px 0px; margin:5px 0px 5px 15px; }

.my-link			{ position:absolute; width:1090px; left:0px; margin-top:5px; font-size:80%; text-align:right; text-shadow: #FFFFFF 0px 0px 4px;}
.my-link img		{ position:relative; top:5px;}
.my-link a			{ color:#424242; font-weight:bold}		.my-link a:hover	{ color:#ccc}

.my-lowerWidgets			{ font-size:80%; min-height:80px;}
.my-lowerWidgets a			{ color:#424242;}
.my-lowerWidgets a:hover	{ color:#900;}



/* ------------------------------------- Content --------------------------------------------------------------- */
.my-mainContent			{ position:relative; width:700px; padding:5px; left:-5px; float:left; font-size:90%; font-family:"Verdana", Geneva, san-serif; clear:both; }
.post .postTitle		{ color:#FA1A0A;}
.post .postTitle a		{ color:#FA1A0A;}
.post .postTitle a:hover{ color:#900;}

.entry					{ color:#333}

.post,. page				{ color:#333}
.post a, .page a			{ color:#4c678f}
.post a:hover, .page	a:hover	{ color:#900;}

.my-date				{ color:#999; font-style:italic; font-size:80%}
.postmetadata			{ color:#999; font-size:75%; border-bottom:1px solid #CCC; padding-bottom:5px; margin-bottom:25px;}
.navigation				{ font-family:Arial, Helvetica, sans-serif; color:#CCC; font-size:90%;}
.navigation a			{ color:#424242;}
.navigation a:hover		{ color:#900;}

.postmetadata .pagenav 				{ list-style:none;}
.postmetadata .pagenav 	ul			{ margin:0; padding:0; list-style:none; float:left}
.postmetadata .pagenav .page_item	{ margin:0px 5px 0px 0px;}



/* ------------------------------------- Sidebar --------------------------------------------------------------- */
/* the width oof the sidebar must be less then the width of the frame minus the 
   width of the content are minus any padding. In this example the frame is 1000
   the content is 670px + 5px padding on each side totaling 680px. Therefore the
   sidebar width must be less then or equal to 320px. The side bar has a width of 
   300px and a padding of 5px on each side totaling 310px, that will give us a
   margin of 10px between the content and the sidebar.
*/   
.my-sidebarRight	{ position:relative; width:310px; padding:5px 0px 5px 15px; float:right; left:10px; }

.sidebarTitle		{	}
.sidebar h2			{ font-size:130%;}
.sidebar			{ font-size:90%;}
.sidebar a			{ color:#424242;}
.sidebar a:hover	{ color:#900;}



/* ------------------------------------- Slider on Index --------------------------------------------------------------- */
.my-slider			{ position:relative;  border:1px solid #CCC; margin:10px 0px 20px; height:310px; overflow:hidden}
.slider-image		{ position:relative; height:280px; width:260px; margin:0px 15px 0px 0px; overflow:hidden}

.sliderTitle a		{ color:#424242;}
.sliderTitle a:hover{ color:#900;}

#boxFrame			{ position:absolute; z-index:4; top:13px; left:940px;}
#boxFrame .box		{ width:15px; height:15px; background-color:#dedede; float:right; margin:2px; font-size:60%; z-index:5; position:relative}



.featuredPost		{ position:absolute; padding:15px; width:1020px; background-color:#FFF; height:280px;  top:0; left:0; z-index:1}
.slider-content		{ position:absolute; left:290px; top:10px; height:285px; width:740px; }
.slider-content p 	{ line-height:170%;}



/* Entry Lists */
html>body .entry ul 			{ margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 10px; text-indent: -10px;}
html>body .entry li 			{ margin: 7px 0 8px 10px;}
.entry ul li:before 			{ content: "\00BB \0020"; color:#7a7a7a;}
.entry ol 						{ padding: 0 0 0 35px;margin: 0;}
.entry ol li 					{ margin: 0;padding: 0;}

.my-lowerWidgets ul ul li:before 					{ content: "\00BB \0020"; color:#bcbbbb;}
.my-lowerWidgets ul, .my-lowerWidgets ul ol 		{ margin: 0; padding: 0; }
.my-lowerWidgets ul li 								{ list-style-type: none; list-style-image: none; margin-bottom: 15px;}
.my-lowerWidgets ul p, .my-lowerWidgets ul select 	{ margin: 5px 0 8px;}
.my-lowerWidgets ul ul, .my-lowerWidgets ul ol 		{ margin: 5px 0 0 10px;}
.my-lowerWidgets ul ul ul, .my-lowerWidgets ul ol 	{ margin: 0 0 0 10px;}
.my-lowerWidgets ul ol li 							{ list-style: decimal outside;}
.my-lowerWidgets ul ul li, .my-lowerWidgets ul ol li{ margin: 3px 0 0;padding: 0;}

.sidebar ul ul li:before 			{ content: "\00BB \0020"; color:#bcbbbb;}
.sidebar ul, .sidebar ul ol 		{ margin: 0; padding: 0; }
.sidebar ul li 						{ list-style-type: none; list-style-image: none; margin-bottom: 15px;}
.sidebar ul p, .sidebar ul select 	{ margin: 5px 0 8px;}
.sidebar ul ul, .sidebar ul ol 		{ margin: 5px 0 0 10px;}
.sidebar ul ul ul, .sidebar ul ol 	{ margin: 0 0 0 10px;}
.sidebar ul ol li 					{ list-style: decimal outside;}
.sidebar ul ul li, .sidebar ul ol li{ margin: 3px 0 0;padding: 0;}
/* End Entry Lists */




/* Comments */
#commentform input { width: 170px;padding: 2px;margin: 5px 5px 1px 0;}

#commentform { margin: 5px 10px 0 0;}
#commentform textarea { width: 100%; padding: 2px;}
#respond:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#commentform #submit {margin: 0 0 5px auto;float: right;}

#respond a				{ }
#respond a:hover		{ }

.commentlist			{ font-size:90%;}
.commentlist .photo		{ float:left; padding:3px 5px 0px 3px}
ol.commentlist 			{ left:-20px; margin:3px 0px; padding:0px}
.commentlist li			{ list-style:none; margin:10px 0px; padding:5px;}
.commentlist a			{ }
.commentlist .url		{  font-weight:bold; font-style:normal}


.commentlist .reply		{ margin-bottom:5px; font-size:80%}
.commentlist .reply a	{  }
.commentlist .reply a:hover	{ }
.comment-meta			{ position:relative; top:3px;}
.comment-meta a			{ font-size:80%}

.pinglist				{ position:relative; left:0px; width:730px; padding:0px; font-size:80%;}
.pinglist li			{ list-style:none}
.pinglist .says			{ display:none; }
.pinglist .comment-meta	{ display:none;}
.pinglist p				{ display:none;}
.pinglist .reply		{ display:none;}
.pinglist .vcard		{ padding:3px 10px;}
.pinglist a				{ color:#7a7a7a}
.pinglist a:hover		{ color:#555555;}
/* Close Comments */

/* ------------------------------------- WP-Admin --------------------------------------------------------------- */

.arial				{ font-family:Arial, Helvetica, sans-serif}
.verdana			{ font-family:Verdana, Geneva, sans-serif}
.georgia			{ font-family:Georgia, "Times New Roman", Times, serif}
.times				{ font-family:"Times New Roman", Times, serif}
.tahoma				{ font-family:Tahoma, Geneva, sans-serif}

tagline			{ font-size:85%; color:#a6a6a6; font-weight:normal; position:relative; top:-14px; left:50px;}
tagline	a		{ color:#a6a6a6; text-decoration:none}
tagline	a:hover	{ color:#242424; text-decoration:none}

.settingsArea	{ background-color:#ffffff; padding:10px; width:940px; border:1px solid #e3e3e3; margin:10px 0px; position:relative;}
.savedBox		{ position:relative; width:940px; border:2px solid #229585; background-color:#c2f7f0; padding:10px;  margin:20px 0px 0px}
.errorBox		{ position:relative; width:940px; border:2px solid #f7a468; background-color:#f7d8c2; padding:10px; margin:20px 0px 0px}
.highlight		{ border:2px solid #f7a468; background-color:#f7d8c2}	

.imageList		{ background-color:#edeef0; width:600px; height:400px; overflow-x:hidden; overflow-y:scroll; border:1px solid #e3e3e3}
.imageList img	{ margin:5px; border:2px solid black}
.imageList img:hover	{ border:2px solid #c0ddfd}

.imageUpload	{ position:absolute; top:10px; left:630px; width:300px;}
.wrap h3		{ font-size:130%; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; margin-bottom:5px;}