/* -- CSS Styling by Joshua Tan -- */

/* ----- (0) REMOVE BLOGGER BANNER ----- */
#navbar-iframe {
	display: none !important;
}

/* ----- (1) LAYOUT ----- */

body {
	background-color: rgb(240,247,254);
	color: #707070;
	font-size: 11px;
	font-family: Tahoma, Trebuchet MS, Arial;
}

#container {
	width: 700px;
	margin: 0 auto;
}

#top {
	height: 20px;
	padding: 10px;
}

#leftColumn {
	width: 122px;
	float: left;
}

#leftSlidingBar {
	margin: 0;
	padding: 0;
	width: 122px;
	overflow: hidden;
}
	#leftSlidingBar a {
		color: #111ABF;
	}
	.leftSlidingBar_header a {
		background: url('http://www.jsquaredtm.com/blogimg/leftSlidingBar_header.png') no-repeat;
		display: block;
		width: 122px;
		height: 20px;
	}
	img.leftSlidingBar_profilePic {
		margin-left: 32px;
		margin-top: 0px;
		padding: 4px;
		width: 50px;
		height: 50px;
		display: block;
		border: 1px solid #a0a0a0;
	}
	.leftSlidingBar_bodyTitle {
		width: 122px;
		overflow: hidden;
		text-transform: uppercase;
		font-size: 9px;
		font-weight:bold;
		text-shadow: 0px 1px 0px #d9dbff;
	}
		.leftSlidingBar_bodyTitle a {
			background: url('http://www.jsquaredtm.com/blogimg/leftSlidingBar_bodyTitle.png') no-repeat;
			display: block;
			width: 122px;
			height: 20px;
			padding-left: 25px;
			line-height:20px;
			text-shadow: 0px 1px 0px #d9dbff;
		}
		.leftSlidingBar_bodyTitle a:hover {
			background-position: 0 -20px;
			color: #016001;
			text-shadow: 0px 1px 0px #d9dbff;
		}
	.leftSlidingBar_body {
		background: url('http://www.jsquaredtm.com/blogimg/leftSlidingBar_body.png') repeat-y;
		margin: 0;
		width: 122px;
		height: auto;
		text-shadow: 0px 1px 0px #d9dbff;
	}
		.leftSlidingBar_body p {
			margin: 0px 10px auto 12px;
			padding-top: 10px;
			text-transform: none;
			font-size: 9px;
			font-weight: normal;
			color: #707070;
			text-shadow: 0px 1px 0px #d9dbff;
		}
		.leftSlidingBar_body a {
			color: #111ABF;
			text-shadow: 0px 1px 0px #d9dbff;
		}
		.leftSlidingBar_body a:hover {
			color: #8187F7 !important;
			text-shadow: 0px 1px 0px #d9dbff;
		}
		.leftSlidingBar_body ul {
			margin: 0px 9px 0px 27px;
			padding: 10px 0px 10px 0px;
			text-transform: none;
			font-size: 9px;
			font-weight: normal;
			color: #707070;
			text-shadow: 0px 1px 0px #d9dbff;
		}
	.leftSlidingBar_footer a {
		background: url('http://www.jsquaredtm.com/blogimg/leftSlidingBar_footer.png') no-repeat;
		display: block;
		width: 122px;
		height: 33px;
	}
	.searchBox {
		background: url('http://www.jsquaredtm.com/blogimg/searchBox.png') no-repeat top;
		width: 122px;
		height:155px;
		float: left;
	}
		.searchBox p {
			color: #111ABF;
			font-weight: bold;
			text-transform: uppercase;
			font-size: 9px;
			padding-top: 7px;
			text-shadow: 0px 1px 0px #d9dbff;
		}
		
#head {
	background: url('http://www.jsquaredtm.com/blogimg/head_banner.png') no-repeat top;
	width: 540px;
	height: 240px;
	float: right;
}

	.head_description {
		width: 470px;
	}

		.head_description p {
			margin-top: 25px;
			color: #ddedfc;
			text-shadow: 0px -1px 0px #034889;
		}

		.head_description a {
			color: #F7FBFE;
			font-weight: bold;
		}
		.head_description a:hover {
			color: #DDEDFC;
			font-weight: bold;
		}
		
#content {
	background: url('http://www.jsquaredtm.com/blogimg/content_body.png') repeat-y;
	width: 540px;
	text-align: justify;
	float: right;
}
	table.postTitleBox {
    	border-width: 2px 0px 0px 0px;
    	border-spacing: 2px;
    	border-style: solid solid solid solid;
    	border-color: #5da9f4;
    	border-collapse: collapse;
	}
	table.postTitleBox th {
    	border-width: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	border-style: inset inset inset inset;
    	border-color: #ac7d34;
    	background-color: #badbfc;
	}
	table.postTitleBox td {
    	border-width: 0px 0px 0px 0px;
    	padding: 8px 0px 8px 0px;
    	border-style: inset inset inset inset;
    	border-color: #ac7d34;
    	background-color: #badbfc;
    	font-size: 11px;
    	color: #0080ff;
	}
.post {
	margin-top: 0px;
	padding: 0 0 0 3px;
}

.content_contentBox {
	width: 434px;
	margin:10px 0 30px 14px;
	float: left;
	text-shadow: 0px 1px 0px #d9dbff;
}
.content_contentBox p {
	margin: 10px 0px 10px 15px !important;
	margin: 10px 0px 10px 5px;
	font-size:11px;
	text-align:justify;
	text-shadow: 0px 1px 0px #d9dbff;
}
#contentFooter {
	background: url('http://www.jsquaredtm.com/blogimg/content_footer.png') no-repeat;
	height: 85px;
	width: 540px;
	float: right;
	text-align: center;
	margin-bottom:30px;
}
	#contentFooter p {
		margin: 40px 30px 10px 30px;
		font-size:10px;
		text-align:left;
	}
		
/* ----- (2) Styling ----- */
.underline {
	text-decoration: underline;
}

h1 {
	margin: 20px 30px 7px 30px;
	font-weight:bold;
	font-size:15px;
	color:#ddedfc;
}

	h1 a {
		text-decoration: none;
		color: #ddedfc;
		text-shadow: 0px -1px 0px #034889;
	}

	h1 a:hover {
		text-decoration: none;
		color: #FFFFFF;
		text-shadow: 0px -1px 0px #034889;
	}
	
.postTitle a {
	color: #056bce;
	font-size: 20px;
	font-weight: bold;
	padding-left: 15px;
	text-shadow: 0px 1px 0px #d9dbff;
}
	.postTitle a:hover {
		color: #3b91e6;
		font-size: 20px;
		font-weight: bold;
		padding-left: 15px;
		text-shadow: 0px 1px 0px #d9dbff;
	}
.postTitleDescription {
	color: #037DF4;
	font-size: 10px;
	font-weight: bold;
	padding-left: 15px;
	text-shadow: 0px 1px 0px #d9dbff;
}

.numberOfComments {
	color: #037DF4;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 0px 1px 0px #d9dbff;
}

/* ----- (3) Search Bar ----- */	
input {
	border: 2px solid #104373;
	background: #DDEDFC;
	width:75px;
	color: #104373;
	float: left;
	margin:5px 10px 5px 20px;
}

input.searchBar {
	background: #000066; 
	border: 2px outset #0000FF; 
	color: #DDEDFC; 
	font-weight: bold;
	width: 79px;
	margin: 0px 10px 5px 22px;
}
/*!!!!!!!!!!!!!!!!!!STOPPED CLEANING UP HERE!!!!!!!!!!!!!!!!!!*/


.clear {
clear: both;
}

img {
border: 0px;
}

p {
margin: 10px 30px 10px 30px;
}

.yellow_span {
color: #30a230;
font-weight:bold;
}

.green {
color: #0741FD;
}

.green a:hover {
color: #6683e0;
}

.joshblackboxtitle {
color: #4A75FF;
font-size: 2em;
}

.joshblackboxcontent {
color: #A2B8FF;
font-size: 1em;
}

.date {
color: #0a3194;
text-decoration:overline;
padding: 10px 0 20px 0;
}

.postmeta {
color: #6683e0;
border-top: 1px solid #016001;
margin-top: 15px;
padding: 4px 0 0 0;
}

.date a, .postmeta a {
border-bottom: 1px dotted #016001;
}

.bookmarklet {
margin: 0;
padding: 0;
text-align: center;
}

.bookmarklet img {
margin-bottom: -4px;
padding: 1px;
border: none;
}

.light_green {
color:#4F62F6;
}

#menu_left p {
	margin: 25px 0px 0px 25px;
	font-size:9px;
	color:#111ABF;
	font-weight:bold;
	text-transform: uppercase;
}



.login_box_2 p {
	color:#010660;
}

#top p {
	margin: 95px 0px 0px 154px;
	font-size:9px;
}

.content_box p {
	margin: 10px 5px 10px 5px;
	font-size:10px;
	text-align:left;
}

a {
text-decoration: none;
color: #343cac;
}

a:hover {
text-decoration: none;
}



/*----- MENU ----- */








.feedlist {
list-style: none;
list-style-type: none;
list-style-image: none;
}

.feedlist ul {
}

.feedlist ul li {
padding-left: 25px;
}

.li_active a:active  {
background-position:  0 -40px;
color:#fff;
}

/*----- IMAGES ----- */

a img{
border: none;
}

img.left,img.center,img.right {
padding: 4px;
border: 1px solid #a0a0a0;
}

img.left {
float: left;
margin: 0px 12px 5px 0px;
}

img.right {
float: right;
margin: 0px 30px 5px 0px;
}

img.normal {
margin-left: 0px;
margin-top: 0px;
padding: 4px;
display: block;
border: 1px solid #a0a0a0;
}

.flickr img {
float: left;
margin: 0px 12px 5px 15px;
padding: 4px;
border: 1px solid #a0a0a0;
}

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #8ec1ff;
padding: 5px;
left: -1000px;
border: 3px solid #2063b7;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

/*-----BLACK BOX HOVER IMAGE EFFECT by Joshua Tan-----*/
p.padding
{
padding-top:5px;
padding-bottom:5px;
padding-right:25px;
padding-left:25px;
}

.joshblackbox{
		float:left;
		width:430px;
		border:1px solid #b5b5b5;
		overflow:hidden;
	}
	.details{
		float:left;
		width:430px;
		background:#000;
		color:#fff;
		text-align:center;
              
	}
#style-1{position:relative;}
	#style-1 img{
		opacity:1
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	#style-1 .details{
		position:absolute;
		top:0;
		bottom:0;
		right:0;
		left:0;
		opacity: 0;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	
	#style-1 .details:hover{
		opacity: .85;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}