/*
Theme Colors
	#0D4972				navy blue
	#F38426				orange
	#F5F5DC				beige
Regular Colors
	white
	red
	green
	yellow
*/



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*GENERAL HTML AND BODY*/
* {
	padding: 0 0 0 0;
	margin:0 0 0 0;
	}				/*Start off with a clean slate*/
*:focus {
	outline: 0 0 0 0;
	}

body {
	font-family: georgia, times, 'Times New Roman', serif;
	background-color:#F5F5DC;		/*Theme Beige*/
	font-size:100%;
	width: 100%;
	height: 100%;
}									/*Reset everything for the page i.e. the body*/



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*ENLARGED PICTURE*/
#piclargeholder {
	background-image: url('Images/bbg.png');
	width: 100%;
	height: 100%;
	z-index: 99;
	float:left;
	position:fixed;
	top: 0;
	left: 0;
	display: none;
	}								/*This is a large (100% by 100%) hidden transparent div, that houses the enlarged picture*/

#piclarge {
	margin: 5% auto;
	background-color:black;
	border: 8px #D3D3D3 solid;		/*lightgray or light gray or grey*/
	width: 570px;					/*Must be specified because the 'large picture' is of specific width*/
	-moz-border-radius: 16px;		/*Optional*/
	}								/*This div holds the IMAGE and its EXPLAINING text*/

#piclarge img{
	padding:1.75%;					/* = 10 px*/
	border:0 none;					/*Firefox shows border as its a LINK*/
	}								/*the LARGE image*/

#piclarge p{
	text-align:center;
	margin: 0 0 0 0;
	}								/*center the text*/



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*JAVSCRIPT DISABLED*/
noscript div {
	background-color:#0D4972;
	width: 100%;
	padding: 5px 0 5px 0;
	}
noscript p{
	color:red;
	text-align:center;
	}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*THE WRAPPER*/
#wrapper {
	margin: 0 auto;
	width: 1050px;
	background-color:#F5F5DC;		/*Theme Beige*/
}									/*Wrapper holds EVERYTHING: Header, Navigation, Left label, Top curve, Sidebar and footer*/



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*HEADER AND ITS CHILDREN*/
#header {
	overflow:hidden;
	margin: 0 0.48% auto 0.48%; 	/* = 0 5px auto 5px;*/
	background-image: url('Images/pencil.png');
	background-repeat: no-repeat;
	width: 99%;						/* = 1040px*/
	}								/*Contains Logo and Twitter*/
/*Its children*/
#logo {
	width: 45%;						/* = 468px*/
	margin-top:1%;					/* = 10px;*/
	float:left;
	}								/*The logo on the left side*/

#logo img{
	border:0 none;
	}								/*Because logo is surrounded by a link, it gets a border in Firefox by default*/

#twitter {
	width: 50%;						/* = 520px*/
	margin-top: 1%; 				/* = 10px*/
	float:right;
	height: 95px;					/* = 95px, force the height so paper shows*/
	background-image: url('Images/twitter.png');
	}								/*Holds the twitter text*/

#twitter h2 {
	float:right;
	font-size:70%;
	margin:  1.5% 5.76% 0 1%;		/* = 8px 30px 0 5px*/
	}								/*The thing on the right "Follow me on Twitter"*/

#twitter a {	color: #0d4972;					/*Theme Navy Blue*/	
}

#twitter p{
	font-size:115%;
	margin: 0 0 0 0;
	padding-left: 3.8%; 			/* = 20px;*/
	padding-right: 1.57%;			/* = 8px;*/
	color: #0d4972;					/*Theme Navy Blue*/	
	}								/*paragraph text of twitter*/

#twitter h1 {
	color: #f38426;					/*Theme Orange*/
	font-size: 135%;
	margin: 0 0 0 0;
	padding-left: 1.54%; 			/* = 8px*/
	}								/*orange color "Abid was (Yesterday)"*/



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*THE CURVES*/
#lefty {
	width:30px;						/* = about 30px ; cant have percent.... opera acts gay*/	
	background-image: url('Images/lefty.png');
	background-repeat: no-repeat;
	float:left;
	padding: 1.43% 0 1.43% 0; 		/* = 15px 0 15px 0*/
	margin: 5.71% 0 0 0;			/*60px 0 0 0 */
	z-index: 90;
	}								/*the tab on the left*/

#lefty p{
	font-family: georgia, times, 'Times New Roman', serif;
	width: 33%; 					/* = 10px*/
	margin: 0 16% 0 50%;			/* = 0 5px 0 15px*/
	color: #0D4972;					/*Theme navy blue*/
	}								/*text on the left; padding to keep it aligned*/

#topy {
	width: 97.1%;					/* = 1020 px*/
	height: 37px;					/* = 37 px*/
	float:right;
	background-image: url('Images/topy.png');			/*The curved top background*/
	background-repeat: no-repeat;
	}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*NAVIGATION*/
/*#nav is held inside the wrapper right under the header, and contains navigation links*/
/*It has two children: navsearch and navlinks*/
#nav {
	overflow:hidden;
	width:100%;
	}								/*Holds ALL navigation*/

#nav img {
	border:0 none;
	outline: 0;
	}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*NAVIGATION LINKS - a child of #nav*/
#navlinks {
	float:left;
	margin:0 0 0 9%;			/*0 0 0 94px;*/
	width: 61%;					/*640.5px*/
	list-style-type:none;
	}			/*Holds all navigation links except search*/

#navlinks li {
	float:left;
	margin:3.12% 7.8% 0 0;		/*20px 50px 0 0;*/
	}

#navlinks a {
	padding: 20px 25px 0px 25px;
	color:#0D4972; 				/*Theme navy blue*/
	font-size: 100%;
	text-decoration: none;
	background-image: url('Images/tabs.png');	/*This is a CSS sprite which gets positioned as you hover*/
	}
	
#navlinks a:hover{font-style:normal;}
#navli1 a {
	background-position: 0 39px;
	}
#navli1 a:hover {
	background-position: -205px 39px;
	}
#navli2 a {
	background-position: 0 78px;
	}
#navli2 a:hover {
	background-position: -205px 78px;
	}
#navli3 a:hover {
	background-position: -205px 0px;
	} /*Note that background position for navli3 non hover is 0, 0*/
#navli4 {
	margin:0 0 0 0 !important;
	position:relative;
	top:10px;
	}
#navli4 a {
	background: none !important;
}

.currentpage {color: red !important; }



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*NAVIGATION SEARCH*/
/**/
#navsearch {
	float:right;
	margin:0px 2.86% 0 0;		/*0px 30px 0 0;*/
	position:relative;
	width: 16%;
	top: 8px;
	list-style-type:none;
	}

.textbox {
	font-family: 'Lucida', 'Lucida Grande', 'Trebuchet MS', 'Calibri', 'Monaco', arial, sans-serif;
	margin: 0 0 0 10px;
	color: #F38426;
	border:0 none;
	padding: 4px 0px 4px 25px;
	font-size:90%;
	background: transparent url('Images/search.png') no-repeat scroll;
	}

.textbox:focus {
	background-color: transparent;
/*	background-image: url('Images/search.png');*/
	background-position: left -25px;
	}

form fieldset {border:0 none; outline: none;}

.button {font-family: 'Lucida', 'Lucida Grande', 'Trebuchet MS', 'Calibri', 'Monaco', arial, sans-serif;
margin: 0 10px 0 0;
padding: 2px 5px 2px 5px;
background-color: #0D4972;
color: #F38426;
border:0 none;
font-size:14px;
}

#searchresults {
	clear:both;
	z-index:98;
	background-color:#0D4972;
	color:#F5F5DC;
	left:72%;
	top: 31%;
	position:fixed;
	overflow: auto;
	opacity: 0.90;
	width: 24%;
	padding: 5px;
	display:none;
	-moz-border-radius: 8px;
	}
#searchresults h1 {font-size:1em;}
#searchresults li, #searchresults p {font-size:0.9em; list-style-type:none; margin-top:5px; color:#F5F5DC !important;}
#searchresults span {color:#F38426;}

#navli5 .button {display:none;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*CONTENT AND ITS CHILDREN (MAINCONTENT AND SIDEBAR)*/
#content{
	background-image: url('Images/manila.png');
	overflow:hidden;
	width:1020px;
	margin: 0 ;
	float:left;
	}
#maincontent{
	width:750px;
	float:left;
	margin: 0 0 0 20px;
	background-image: url('Images/paper.png');
	background-repeat: repeat-y;
	-moz-border-radius:32px;
	}

#sidebar {
	float:right;
	width:240px;
	margin:0 10px 0 0;
	}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*SIDEBAR's CHILDREN*/
#sidebar p {
	font-size: 0.8em; margin: 8px 0 8px 0;
	}

#sidebar a {color: red;}

#sidebar h1 {
	color: #0d4972;				/*Theme Navy blue*/
	font-size: 1.4em;
	margin:0;
	}
#sidebarbr h1 {
	/*Becase his background is blue!*/
	color: #F5F5DC;				/*Theme beige*/
}

#sidebar img {
	border: 0 none !important;
	outline: 0 !important;
	margin: 0 0 0 0px !important;
	}

#sidebarabout {
	padding: 50px 5px 5px 5px;
	width: 220px;
	overflow: hidden;
	background-image: url('Images/aboutpaper.png');
	background-repeat: no-repeat;
	-moz-border-radius:10px;
	}

#sidebarrss {
	width: 220px;
	float:right;
	overflow: hidden;
	background-color: #f38426;
	margin: 15px 10px 0 0;
	padding: 5px;
	-moz-border-radius:10px;
	}

#sidebarbr {
	/*For the blogroll; br=blogroll*/
	width: 220px;
	float:right;
	overflow: hidden;
	background-color: #0D4972;
	margin: 15px 10px 0 0;
	padding: 5px;
	-moz-border-radius:10px;
	}

#sidebarweb {
	width: 218px;
	float:right;
	overflow: hidden;
	background-color: #F5F5DC;
	border: 1px solid #0D4972;
	margin: 15px 10px 0 0;
	padding: 5px;
	-moz-border-radius:10px;
	}

#sidebarweb li {float:left; margin-right: 10%; list-style-type: none;}
#sidebarweb ul {margin-top: 5%;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*MAINCONTENT's CHILDREN (for maincontent see above)*/
/*For definitions of styles within post or postcontent, see below*/
#content img {/*outline: 2px solid #0d4972; */}

#maincontent h3 {width: 50%; font-size: 1em; margin: 15px 0 0 20%; text-align: center; padding: 3px; background-color: #F5F5DC; color: #0D4972; border: 2px solid  #0D4972}

.post{
	width:680px;
	margin:10px 0 20px 50px;
	}

.postcontent{
	border-bottom:4px solid #0d4972;
	width:625px;
	height: auto;
	overflow: hidden;
	}

.date{
	width:45px;
	max-width:45px;
	height:75px;
	max-height:75px;
	float:right;
	color: #0D4972;
	overflow:hidden;			/*hide if longer*/
	background-image:url('Images/datebg.png');
	position:relative;
	left:-9px
	}

.date h1{
	margin:0 0 0 0;
	font-size: 1.0em;
	text-align:center;
	}
.date h2 {
	margin:0 0 0 0;
	font-size: 0.55em;
	text-align:center;
}

#postnav {
	clear:both;
	padding: 10px 0 0 0;
	height:35px;
	width: 680px;
	background-color:#fff7ba;
	}
#postnav img {border: 0 none; outline: none !important; }
#postnav #old, #postnav #new {text-decoration:none; color:#0D4972;}
/*~~~~*/
#postnav #old {float:right;}
#postnav #new {float:left;}

/*The following defines each post's things*/
.postcontent p {margin: 15px 10px 15px 0; font-size: 0.95em; line-height:1.45em;}
.postcontent h1, .postcontent h1 a {
	color: #0d4972;				/*Theme Navy blue*/
	font-size: 1.3em;
	text-decoration:none;
	}
.postcontent h2 {font-size:0.9em; color: #0d4972}
.postcontent h2 a {font-size:0.9em; color: #F38426}
.postcontent blockquote {border-left: 2px solid deeppink; padding: 0 10px 0 10px; text-align: justify; font-size: 0.9em; color: #362a2a}
.postcontent img {max-width: 590px;}
.postcontent ul, ol {list-style-type: circle; padding: 0 0 2% 5%}
.postcontent p a {color: #F38426;}
.postcontent p a:hover {font-style: italic;}
.postcontent table {border-top: 4px solid #0D4972; border-bottom: 4px solid #0D4972; margin: 0 auto; color:#0D4972; width: 85%;}
.postcontent table caption {color:#F38426; font-size: 0.9em}
.postcontent table p{text-align: center; }
.postcontent td {padding: 7px;}
.postcontent td {border-top: 1px solid black;}


.postcontent .results {
	margin-left: 5%;
}

/*If post is password protected:*/
.pwprotpost {
	margin: 0 0 10px 0;
	}

.pwprotinput {background-color: #0D4972; 	border:0 none; 	padding: 4px 5px 4px 5px;
	color: #F5F5DC;
	font-size:12px;
}

.pwprotbutton {font-family: 'Lucida', 'Lucida Grande', 'Trebuchet MS', 'Calibri', 'Monaco', arial, sans-serif;
margin: 0 10px 0 0;
padding: 2px 5px 2px 5px;
background-color: #0D4972;
color: #F38426;
border:0 none;
font-size:14px;
}

/*Comments section*/
#commentholder {width: 80%; padding: 0 0 10px 0; margin: 10px 0 20px 50px; background-color: #ffdf00; color: #0D4972}
#commentholder h1 {font-size: 1.2em; margin: 5px 0 5px 0; padding: 5px}

.generalcomment h1, .admincomment h1 {font-size: 0.9em !important; color: #0D4972}		
.generalcomment p, .admincomment p {font-size: 0.9em; color: #0D4972}

.generalcomment {margin: 0 15px 15px 15px; padding: 2px 2px 2px 2px; background-color:#F38426;}
.admincomment {margin: 0 15px 15px 15px; padding: 2px 2px 2px 2px; background-color:#F5F5DC;}

.generalcomment span img, .admincomment span img{position:relative; float:right; border: 0 none !important; outline: none !important;}


/*Comment form*/
#commentform {width: 95%; margin: 0 0 0 15px; border-top: 2px solid black}
#commentform p {color: #0D4972; font-size: 0.9em;}
#commentform input, #commentform textarea {background-color: #0D4972; padding: 0 0 0 5px;
	color: #F5F5DC; font-family: 'Lucida', 'Lucida Grande', 'Trebuchet MS', 'Calibri', 'Monaco', arial, sans-serif; border: 2px solid black}

#commentform fieldset {margin: 5px 0 5px 0; }
#commentform3 {margin: 40px 0 0 0 !important;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*FOOTER*/
#footer{
	clear:both;
	overflow:hidden;
	position:relative;
	width: 1020px;
	margin: 0 0 40px 30px;
	background-image: url('Images/footer.png');
	background-repeat: no-repeat;
}

#footer ul{
	list-style-type:circle;
/*	padding: 0 0 0 30px;*/
	margin:3px 0 0 0;
	color:#0D4972;
}

#footer li {margin: 0 ; line-height: 1.5em;;}
	

#footer h3 {
	margin: 0 0 0 0;
	font-size:1.2em;
	color: #F38426;
	}

#footer p, #footer a{
color: #0D4972;
	margin:0;
	text-decoration:none;
	font-size:0.9em;
	}		/*to control the gayness*/

#footerposts {
	float:left;
	width: 250px;
	margin: 6.5% 0 0 4%;
	}
#footerhot {
	float:right;
	margin: 6.5% 0 0 0;
	width: 250px;
	clear:none;
	}

#footercomments {
	width: 250px;
	position:absolute;
	top: 26%;
	left: 39%;
	}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
/*GENERAL STYLES*/
p {
	color: #433535;
	font-family: 'Lucida', 'Lucida Grande', 'Trebuchet MS', 'Calibri', 'Monaco', arial, sans-serif;
	}

.white {color:white;}
.red {color:red;}
.green {color:green;}
.yellow {color:yellow;}
.themeblue, .themenavy {color:#0d4972;}
.themeyellow {color:#F5F5DC;}
.themeorange {color:#f38426;}

/*			gravatars
			links
			admincomment vs regular comment
				*/


/*TO DO:
DONE				fix the nav icons
DONE				add reflection to logo
DONE				manila folder background
DONE				add "down colors" for the current page (so you know what page you are on!)
DONE				fix SEARCH box onclick/onfocus
DONE				navigation, on hover do something
DONE				postnav - do something with it
DONE				footer
DONE				comments are being gay (wrong ones loading)
	pretty up the CSS file
	make all into em or percent (em or %)
	comment everything
DONE				make a better search - one that has comment searching, comment author searching, title/post searching, and real ordered results
DONE				remove dupes from search suggestionss
	all mysql queries === "useful error message!!1!!"
	cookies!!1!!1!! for the remember info for comment
	proper ENTER key control for the comment form
	
	redownload blog backup.sql (some new stuff on the blogposts table online that is not on the computer copy)
	
	cgheck all :"href" and "src"
	find all "...abidhasan.com/..."
	fix all broken image links
	make sure images are numbered by BLOGPOST rather than sequentially.
	redo footer
	fix the twitter updater... its being gay
	reupload database
	update the database with newer posts
*/