/********************************************
   AUTHOR:  			Erwin Aligam 
   WEBSITE:   			http://www.styleshout.com/
	TEMPLATE NAME: 	Bright Side of Life
   TEMPLATE CODE: 	S-0005
   VERSION:          1.0          	
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* top elements */
* { padding: 0; margin: 0; }

body {
	margin: 0;
	padding: 0;
	font: .70em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;
	color: #666666; 
	background: #A9BAC3 url(bg.gif) repeat-x;
	text-align: center;
}

/* links */
a { 
	color: #4284B0;
	background-color: inherit;
	text-decoration: none;
}
a:hover {
	color: #9EC068;
	background-color: inherit;
}

/* headers */
h1, h2, h3 { font-family: 'Trebuchet MS', Arial, Sans-serif; color: #6297BC; }
h1 { font-size: 1.5em; } 
h2 { font-size: 1.4em; }
h3 { font-size: 1.3em; }

p, h1, h2, h3 {
	margin: 10px 15px;
}
ul, ol {
	margin: 10px 30px;
	padding: 0 15px;
	color: #4284B0;
}
ul span, ol span {
	color: #666666; 
}

/* images */
img {
	border: 2px solid #CCC;
}
img.no-border {
	border: none;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}
a img {  
  border: 2px solid #568EB6;
}
a:hover img {  
  border: 2px solid #CCC !important; /* IE fix*/
  border: 2px solid #568EB6;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #4284B0; 
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 15px;
 	padding: 0 0 0 20px;  	
  	background: #FAFAFA;
	border: 1px solid #f2f2f2; 
	border-left: 4px solid #4284B0;   
	color: #4284B0;
	font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif; 
}

/* form elements */
form {
	margin:10px; padding: 0;
	border: 1px solid #f2f2f2; 
	background-color: #FAFAFA; 
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding: 2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:300px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	margin: 0; 
	font: bold 1em Arial, Sans-serif; 
	border: 1px solid #CCC;
	background: #FFF; 
	padding: 2px 3px; 
	color: #4284B0;	
}

/* search form */
form.searchform {
	background: transparent;
	border: none;
	margin: 0; padding: 0;
}
form.searchform input.textbox { 
	margin: 0; 
	width: 120px;
	border: 1px solid #9EC630; 
	background: #FFF;
	color: #333; 
	height: 14px;
	vertical-align: top;
}
form.searchform input.button { 
	margin: 0; 
	padding: 2px 3px; 
	font: bold 12px Arial, Sans-serif; 
	background: #FAFAFA;
	border: 1px solid #f2f2f2;
	color: #777;	
	width: 60px;
	vertical-align: top;
}

/***********************
	  LAYOUT
************************/
#wrap {
	width: 100%;
	max-width: 820px;
	height: 100%;
	margin: 0 auto;	
	text-align: left;
}

#content-wrap {
	clear: both;
	margin: 0; padding: 0;	
	background: #FFF;
	overflow:hidden;
}

/* header */
#header {
	position: relative;
	height: 85px;	
	background: #FFF url(headerbg.gif) repeat-x 0% 100%;	
}
#header h1#logo {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	text-transform: lowercase;
	top: 0; left: 5px;	
}
#header h2#slogan {
	position: absolute;	 
	top:37px; left: 95px;
	color: #666666;
	text-indent: 0px;
	font: bold 11px Tahoma, 'trebuchet MS', Sans-serif; 
	text-transform: none;	
}
#header form.searchform {
	position: absolute;
	top: 0; right: -12px;	
}

/* main */
#main {
	float: left;
	margin-left: 15px;
	padding: 0;
	width: 50%;		
}
.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 15px 0 15px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* sidebar */
#sidebar {
	float: left;
	width: 23%;
	margin: 0;	padding: 0; 
	display: inline;		
}
#sidebar ul.sidemenu {
	list-style:none;
	margin:10px 0 10px 15px;
	padding:0;		
}
#sidebar ul.sidemenu li {
	margin-bottom:1px;
	border: 1px solid #f2f2f2;
}
#sidebar ul.sidemenu a {
	display:block;
	font-weight:bold;
	color: #333;	
	text-decoration:none;	
	padding:2px 5px 2px 10px;
	background: #f2f2f2;
	border-left:4px solid #CCC;	
	min-height:18px;
}

* html body #sidebar ul.sidemenu a { height: 18px; }

#sidebar ul.sidemenu a:hover {
	padding:2px 5px 2px 10px;
	background: #f2f2f2;
	color: #339900;
	border-left:4px solid #9EC630;
}
#sidebar img { margin-left: 20px; }

/* rightbar */
#rightbar {
	float: right;
	width: 23%;
	padding: 0; margin:0;		
}

/* Footer */
#footer { 
	clear: both; 
	color: #FFF; 
	background: #A9BAC3; 
	border-top: 5px solid #568EB6;
	margin: 0; padding: 0;   
	font-size: 95%;		
}
#footer a { 
	text-decoration: none; 
	font-weight: bold;	
	color: #FFF;
}
#footer .footer-left{
	float: left;
	width: 65%;
}
#footer .footer-right{
	float: right;
	width: 30%;
}
.description { margin-bottom: 0; padding-bottom: 10px; }

/* menu tabs */
ul.language {
	z-index: 9999;
	position: absolute;
   margin:0; padding: 0;
   list-style:none;
	right: 0; 
	bottom: 6px !important; bottom: 5px;
	font: bold 13px  Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;	
}
.language li {
   display:inline;
   margin:0; padding:0;
}
.language a {
   float:left;
   background: url(tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
.language a span {
   float:left;
   display:block;
   background: url(tabright.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.language a span {float:none;}
/* End IE5-Mac hack */
.language a:hover span {
	color:#FFF;
}
.language a:hover {
   background-position:0% -42px;
}
.language a:hover span {
   background-position:100% -42px;
}
.language #current a {
   background-position:0% -42px;
	color: #FFF;
}
.language #current a span {
   background-position:100% -42px;
	color: #FFF;
}
/* end menu tabs */

/* 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; }
.green {	color: #9EC630; }
.gray  {	color: #BFBFBF; }

/*.fadein { position:relative; width:100%; max-width:820px; height:inherit; }
.fadein img { position:absolute; left:0; top:0; width:100%; max-width:820px; border: none; }*/

.cycle-slideshow { position:relative; width:100%; max-width:820px; height:inherit; }
.cycle-slideshow img { width:100%; max-width:820px; border: none; }

.style5 {
	color: #666666
}
.style1 {
	color: #666666
}
.breadcrumbs
{
     width:780px;
     margin-top:6px;
     padding: 5px;
     color: #737373;
     font-size: 11px;
     font-weight: bold;
}
.breadcrumbs a
{
     text-decoration: none;
     color: #00305f;
     font-style: italic;
}
.breadcrumbs a:hover
{
     text-decoration: none;
     color: #00305f;
     font-style: italic;
}
#slideshow { height: 240px;}
.gallery-wrap { width: 100%; margin:auto; text-align:center; }
.footer-left { text-align: left}
.footer-right { text-align: right}
.iframeWrapper {
	width: 410px;
	height: 300px;
}
.gallery-wrap p { text-align: center; }

/*Basic Slider*/
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

@media screen and (max-width: 820px) {
#slideshow { height: inherit; }
#main { width: 100%; margin:0; text-align:left }
#rightbar { float: none!important; width: 100%!important; }
#TA_excellent518 { display: none; }
#sidebar { position:absolute; top:0; float:none; width: 100%; display: block}
#sidebar img { display: none;}
#nav {z-index: 22;}
#nav ul { list-style: none; position:absolute; top:80px; margin:0!important; padding:0!important; line-height: 5em;}
#nav li { width: 100%; background:#FFF!important; margin:0!important; padding:0!important; border-bottom: 1px solid #9EC630!important; }
#nav li a { padding: 15px 10px; }
#nav li a:hover {  }
#nav > a {   }
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type {
		display: block;
		position: absolute; 
		right: 10px;
		top: 0;
		background-image: url('../images/nav.png'); 
		background-repeat: no-repeat;
		width: 50px;
		height: 50px;
		margin-top: 20px;
		padding: 0!important;
		z-index: 111;
}
/* first level */
#nav > ul {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		margin:0;
		padding:0;
		margin-top: 80px;
		width: 100%!important;
		z-index:2;
}
#nav > ul.small {
		margin-top: 50px;
}
#nav:target > ul {
		display: block;	
}
#nav > ul > li {
		width: 99.5%;
		float: none;
		margin: 0; padding: 0;	
}
 
/* second level */
 
#nav li ul {
		position: static;
		padding-top: 15px;
}

.searchform { display: none; }
ul.language { position:absolute; left:0 }
#sidebar { position:absolute; top:0; float:none; width: 100%; display: block}
#sidebar img { display: none;}
.footer-left, .footer-right { float: none!important; width: 100%!important; text-align: center!important;}
}
@media screen and (max-width: 480px) {
h1#logo { font-size: 3em!important; }
h1 { font-size: 1.6em; } 
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
p { font-size: 130%; line-height: 1.6em; margin: 15px 20px; text-align:left; }
#main img { float: none; width: 100%; max-width:200px; display:block; border: 0!important; margin:0 auto 10px auto; height:inherit; }
.widSSPBranding img { width: 150px!important; }
.widSSPOverall img { width: 69px!important; }
img.wide-image { width: 100%; max-width:350px!important; border: 0!important;  }
#footer p { font-size: 120%; line-height: 1.5em; margin: 15px 20px; text-align:center;}
a { text-decoration: underline; }
.sidemenu a { font-size: 1.3em; }
.iframeWrapper {
	width: 100%;
	height: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  z-index:1;
}
.iframeWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  border:0;
}
}

@media screen and (max-width: 370px) {
#header { height:100px; }
#nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type {
    top: 10px;
}
#header h1#logo { line-height: 0.8em; padding: 0.2em 0.5em }
}