/********************************************

   AUTHOR:  			Erwin Aligam 

   WEBSITE:   			http://www.styleshout.com/

	TEMPLATE NAME: 	BluePigment

   TEMPLATE CODE: 	S-0016

   VERSION:          1.0	

	DATE:          	July-31-2007

 *******************************************/ 

 

/********************************************

   HTML ELEMENTS

********************************************/ 



/* top elements */

* { padding: 0; margin: 0; border: 0; }



body {

	margin: 0; 	padding: 0;

	font: normal 12px/1.7em  verdana, tahoma, sans-serif;	 

	text-align: center;

	background: #001342 url(headerbg.jpg) repeat-x 0 0;

	color: #F2F9FF;

}



/* links */

a {

	color: #003366;

	background-color: inherit;

	text-decoration: none;		

}

a:hover {

	color: #FAA34B; 

	background-color: inherit;

	text-decoration: underline;	

	border: none;

}



/* headers */

h1, h2, h3 {

	font: bold 1em 'Trebuchet MS', Tahoma, Arial, Sans-serif;

	color: #fff;

}

h1 { font-size: 2.5em; } 

h2 { font-size: 2em; text-transform:uppercase;}

h3 { font-size: 1.8em; }



p, h1, h2, h3 {

	left: 0px;

	top: 0px;

}



ul, ol {

	margin: 10px 30px;

	padding: 0 15px;	

}




/* form elements */

form {

	margin: 10px 15px; 

	padding: 10px;

	border: 1px solid #0065C6; 

	background-color: #1E89DC; 

}

fieldset {

	margin: 0;

	padding: 0;

	border: none;

}

label {

	display:block;

	font-weight:bold;

	margin: .4em 0;	

}

input {

	padding: .3em;

	border: 1px solid #eee;

	font: normal 1em Verdana, sans-serif;

	color:#777;

}

textarea {

	width: 55%;

	padding: .3em;

	font: normal 1em/1.5em Verdana, sans-serif;

	border: 1px solid #eee;

	height: 10em;

	display:block;

	color:#777;

}

input.button { 

	font: bold 1em Arial, Sans-serif; 

	margin: 0;

	padding: .25em .3em;

	color: #FFF;

	background: #A2CC00;

	border: 2px solid #8EB200;

}



/* search form */

.searchform {

	background-color: transparent;

	border: none;	

	margin: 0 0 0 10px; padding: 0 0 1.5em 0;	

	width: 18em;	

}

.searchform p { margin: 0; padding: 0; }

.searchform input.textbox { 

	width: 11em;

	color: #777; 

	padding: .4em; 

	border: 1px solid #E5E5E5;

	vertical-align: top;

}

.searchform input.button { 

	width: 60px;

	vertical-align: top;

}



/***********************

	  LAYOUT

************************/



#header-content, #content, #nav {

/*

The width value below sets the total width of the design. It's default value is set to 93%

which means that it will take up 93% of the browser window's width. You can also set it to a 

different percentage	value (90%, 85%, etc.). This design is fluid layout by default, but you

can turn it into a fixed width layout by setting a pixel value to the width (e.g. 900px, 950px).

*/

	width: 93%;	

}



/* box */

.box {

	margin: 10px 0;	

	padding: 10px 10px 20px 10px;		

	border: 5px solid #1F8ADE;

	background: url(boxbg.jpg);		

}



/* header */

#header {

	height: 178px;

	text-align: left;	

}

#header-content {

	position: relative;

	margin: 0 auto; padding: 0;

}

#header-content h1#logo-text a {

	position: absolute;

	margin: 0; padding: 0;



	/* change the values of top and left to adjust the position of the logo*/

	top: 30px; left: 10px;	

}

#header-content h1#logo-text span {

	color: #68B5F0;	

}

#header-content #slogan {

	position: absolute;	

	font: bold 16px 'Trebuchet Ms', Sans-serif;

	text-transform: none;

	color: #FFF;	

	margin: 0; padding: 0;

	

	/* change the values of left and top to adjust the position of the slogan */

	top: 100px; left: 125px;

}



/* header links */

#header-content #header-links {

	position: absolute;

	top: -117px; right: -55px;	

	color: #fff;

	font: bold 15px "Trebuchet MS", Tahoma, Sans-serif;	

}

#header-content #header-links a {	

	color: #93C9F4;

	text-decoration: none;	

}

#header-content #header-links a:hover {

	color: #fff;		

}





/* Navigation */

#nav-wrap {

	float: left;

	width: 100%;

	background: url(menubg.jpg) repeat-x left bottom; 

	clear: both;

}

#nav {

	clear: both;	

	margin: 0 auto;

	padding: 0;		

}

#nav ul {

	float: left;

	list-style: none;

	text-transform: uppercase;

	margin: 0;

	padding: 0;	

	height: 64px;		

}

#nav ul li {

	float: left;

	margin: 0; padding: 0;

	height: 64px;

}

#nav ul li a {

	display: block;

	float: left;

	width: auto;

	margin: 0;

	padding: 0 15px;

	color: #FFF;

	font: bold 15px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;

	text-decoration: none;	

	letter-spacing: 1px;	

}

#nav ul li a:hover, 

#nav ul li a:active {

	color: #333;	

}

#nav ul li#current {	

	background: url(nav-current.jpg) no-repeat center bottom;		

}

#nav ul li#current a {

	color: #333;

}



/* content */

#content-wrap {

	clear: both;

	float: left;

	background: #1183DA;		

	width: 100%;
height: 100%;
}

#content {

	text-align: left;	

	padding: 0; 

	margin: 0 auto;	
	
	height: inherit;
}



/* sidebar */

#sidebar {

	float: right;

	width: 18em;

	margin: 10px 0 10px -21em; padding: 0;		

}

#sidebar h1 {

	font: bold 1.75em 'Trebuchet MS', Tahoma, Arial, Sans-serif;

	padding: .3em 0 .5em 10px; 

	color: #002368;	

}

#sidebar ul.sidemenu {

	list-style:none;

	margin: 0;

	padding: .3em 0 1em 5px;		

	font-family: 'Trebuchet MS', Tahoma, Sans-serif;		

}

#sidebar ul.sidemenu li {

	padding: 0; 

	background: url(sidebullet.gif) no-repeat .3em .5em;		

}



* html body #sidebar ul.sidemenu li { height: 1%; }



#sidebar ul.sidemenu li a {

	display: block;

	font-weight: bold;

	color: #E8F4FF;	

	text-decoration: none;

	padding: .2em 0 .2em 30px;

	line-height: 1.5em;

	font-size: 1.35em;

}

#sidebar ul.sidemenu li a:hover {

	background: #0F7ACC url(sidebullet.gif) no-repeat .25em .45em;	

	color: #FFF;			

}

#sidebar ul.sidemenu ul{

	margin-left: 15px;

}



#sidebar .sidebox {

	margin: 5px 15px 5px 0;

	padding: 0;

	background: url(sidebarsep.jpg) repeat-x left bottom;

}

#sidebar .sep{

	background: url(sidebarsep.jpg) repeat-x left bottom;

	height: 2px;

	margin: 0px 15px 10px 0;

	clear: both;

}



/* main */

#main {

	margin: 10px 23em 10px 0; 

	padding: 0;	

	width: auto;
	height:100%;
}

#main h1 { 

	font: bold 2.8em 'Trebuchet MS', Arial, Sans-serif;

	color: #B1E100;

	letter-spacing: -2px;		

	padding-bottom: 0;	

}

#main h1 a {

	color: #B1E100;

	text-decoration: none;

}



/* footer */

#footer-wrap {

	clear: both;

	border-top: 5px solid #86CC15;

	text-align: left;

	padding: 1.6em 0;	

}

#footer-wrap a {

	text-decoration: none;

	color: #5B9CFF;

	font-weight: bold;

}

#footer-wrap a:hover {

	color: #E8F4FF;	

}

#footer-wrap p {

	padding: 10px 0;

}

#footer-wrap h2 {

	color: #E8F4FF;

	margin: 0;

	padding: 0 10px; 

	text-transform: none;

}



/* footer columns */

#footer-columns {

	color: #5B9CFF;

	margin: 0 auto; 

	padding: 0;	

	width: 90%;	

}

#footer-columns ul {

	list-style: none;

	margin: 10px 0 0 0; 

	padding: 0;	

	background: url(footer-dots.jpg) repeat-x left top;	

}

#footer-columns li {

	background: url(footer-dots.jpg) repeat-x left bottom;		

}

#footer-columns li a {

	display: block;

	font-weight: normal;

	padding: .5em 0 .5em 1em;

	width: 96%;

}

#footer-columns .col3, .col3-center {

	float: left;

	width: 32%;

}

#footer-columns .col3-center { 

	margin: 0 15px; 

}



/* bottom */

#footer-bottom {

	clear: both;

	color: #E8F4FF;	

	margin: 0 auto; 

	padding: 1em 0;

	text-align: center;

}



/* alignment classes */

.float-left  { float: left; }

.float-right { float: right; }

.align-left  {	text-align: left; }

.align-right {	text-align: right; }



/* additional classes */

.clear { clear: both; }

.white {	color: #E8F4FF; }



img.rssfeed {

	border: none; 

	padding: 0 0 5px 0;

	background: transparent;

}



.post-by {

	font-size: .95em;	

	padding-top: 0;

}

.post-footer { 

	text-align: right; 

	background: #1E89DC;

	border: 1px solid #0065C6; 

	padding: 8px 10px;

	margin: 20px 15px 10px 15px;

}

.post-footer .date {

	background: url(clock.gif) no-repeat left center;

	padding-left: 20px; margin: 0 3px 0 3px;

}

.post-footer .comments {

	background: url(comment.gif) no-repeat left center;

	padding-left: 	20px; margin: 0 3px 0 3px;

}

.post-footer .readmore {

	background: url(page.gif) no-repeat left center;

	padding-left: 20px; margin: 0 3px 0 3px;

}