/*
Theme Name: BenRadler
Theme URI: http://benradler.com/
Description: The original BenRadler theme.
Version: 1.1
Author: Ben Radler
Tags: ben, radler, website, development, design, graphic, art

*/

@font-face { font-family: "Century-Goth"; src: url(http://www.benradler.com/b/wp-content/themes/benradler/fonts/centurygothicstrong.ttf) format("truetype"); } 

/* css reset begin */
/* ----------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

body {
	background-color: #333333;
	color: #ccc;
	font: 400 14px 'Calibri', 'Lucida Grande', 'Arial';

	max-width: 100%;
	width: 100%; 
	
}

ol, ul {
	list-style:decimal;
	text-indent: 0px;
	margin: 0;
	padding: 0px 0px 0px 50px;
}
blockquote, q {
	quotes:"\203A";
	margin-left: 50px;
	padding-left: 15px;
	border-left: 1px dotted #ccc;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* css reset end */


/*Main Div Stuffs*/
/* ----------- */

#candyWrapper {
	width: 97%;
}

#main {
	padding: 30px 0px 0px 340px;  /*Top Right Bottom Left*/
	min-height: 0px;
	background-color: #333333;
	width:auto;

}

	#main a:hover {
/* 		-webkit-box-shadow:#000 0 2px 10px; */
/* 		-moz-box-shadow:#000 0 2px 10px; */

	}
	
	#main a img:hover {
		-webkit-box-shadow:rgb(0,0,0) 0 2px 10px;
		-moz-box-shadow:rgb(0,0,0) 0 2px 10px;
		-webkit-transition:all 0.2s;
		-moz-transition-duration:0.2s;		
	}

	#main .adHeading {
		font-size:15px; 
		margin-bottom:10px; 
		font-weight:bold; 
		font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;		
		font-family: "Century-Goth";
		color:white;
	}

	#main .subHeading {
		font-size:x-large; 
		font-weight:bold; 
		font-family: 'century gothic', 'trebuchet ms', arial, sans-serif; 
		font-family: "Century-Goth";
		color:white;
	}
	
	#main .subHeading.right {
		float:right;
	}
	
	#main .subHeading a {
		color: white;
	}
	
	#main .subHeading a:hover {
		text-decoration: underline;
	}
	
	#main .olderPosts, .olderPosts a, .olderPosts a:visited { 
		color: white;
		font-size: 16px;
	}

	#main .olderPosts a:hover {
		color: white;
		text-decoration: underline;
	}

#mainTitle {
	/*text-decoration: underline;*/
	font-size:xx-large;
	font-weight: bolder;
	text-align: right;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-family: "Century-Goth";
	color: #fff;
	float: left;
	margin-bottom: 10px;
	display: block;
}


.date {
	float: left; 
	width: 2.0em;
	font: 600 1.3em arial, sans-serif;
	padding-right: 5px;
	text-align: right;
	color: #31c4f5;
}
	
	
.contentBlockPlain { /* main; a content block without the bottom right graphic */
	margin-left: 38px;
	margin-bottom: 25px;
	border-left: solid 1px #3a3a3a;
	padding: 0 30px 15px 5px;/*Top Right Bottom Left*/

}

	
	.contentBlockPlain .header {
		font-size:medium; 
		margin-top:60px;
	}
	
	.contentBlockPlain a {
		color: #ff493c;
	}

	.contentBlockPlain a:hover {
		text-decoration: underline;
	}

.contentBlockNoBorder {
	margin-left: 38px;
	margin-bottom: 25px;
	border-left:none;
	padding: 0 30px 15px 5px;/*Top Right Bottom Left*/

}
	
	.contentBlockNoBorder .header {
		font-size:medium; 
		margin-top:60px;
	}
	

.contentBlockNoBorder .videoCaption {
	padding-top:5px; 
	text-align:center;
}

	.contentBlockNoBorder .videoCaption a {
		color: #ff493c;
	}

	.contentBlockNoBorder .videoCaption a:hover {
		text-decoration: underline;
	}
	
.contentBlock { /* used to be .main */
	line-height: 22px;
	margin-left: 40px;
	margin-bottom: 25px;
	border-left: solid 1px #3a3a3a;
	padding: 0 30px 15px 5px; /*Top Right Bottom Left*/
	background: #333 url('images/corner.jpg') no-repeat bottom right;
	font-family: "Arial";
}

	.contentBlock a {
		color: #ff493c;
	}
	
	.contentBlock a:visited {
		color: #ff493c;
	}
	
	.contentBlock img {
		-webkit-border-radius:2px;
		-moz-border-radius: 2px;
/* 		border: 2px solid #fff; */
	}
	
.contentBlock .title {
	color: #fff;
	display: block;
	font: 600 18px 'century gothic', 'trebuchet ms', arial, sans-serif;
	margin: 0 0 0px 0;	
}

	.contentBlock .title a {
		color: white;
	}
	
	.contentBlock .title a:hover {
		-webkit-transition:all 0.2s;
		-moz-transition-duration:0.2s;
		text-shadow:0px 0px 5px #000;
	}
	
.contentBlock .titleLarge {
	color: #fff;
	display: block;
	font: 600 24px 'century gothic', 'trebuchet ms', arial, sans-serif;
	margin: 0 0 0px 0;	
}
	
.contentBlock .postInfo {
	color: #fff;
	display: block;
	font-size: 10px;
}

	.contentBlock .postInfo a {
		color: white;
	}
	
.contentBlock .thePost {
	margin-bottom: 10px;
}

.contentBlock.site { /* special contentBlock for WEBSITES page; one for each site */
	height:125px;
	white-space:normal;
}

	.contentBlock.site a { /*changes contentBlock's link style*/
		color: #ff493c;
	}
	
	.contentBlock a:hover {
		text-decoration: underline;
	}
	
.contentBlock .urlTitle { /*title for each website*/
	font: 600 18px 'century gothic', 'trebuchet ms', arial, sans-serif;
}

	.contentBlock .urlTitle a {
		color: #adeb31;
		/*color: #31c4f5;*/
		text-decoration: none;
	}
	
	.contentBlock .urlTitle a:hover {
	text-decoration: underline;
	}

.contentBlock .urlTitle1 {
	font: 600 18px 'century gothic', 'trebuchet ms', arial, sans-serif;
	
}	

	.contentBlock .urlTitle1 a {
		color:#31c4f5;
		text-decoration: none;
	}
	
	.contentBlock .urlTitle1 a:hover {
	text-decoration: underline;
	}


/*wordpress <code> styling (can also do <pre>)*/
code {
	margin-left: 15px;
	background-color: black;
	color: green;
	padding: 5px;
	border-bottom: 1px solid white;	
	width:100%;
}

.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}

.emailForm {
	font-weight: bold;
	font-size: 16px;
}

.footer {
	text-align: center;
	font-size: 10px;
	color: #666666;
	background-color: #333333;
	padding: 10px 10px;
}

	.footer a, .footer a:visited {
		color: #666666;
	}

	.footer a:hover, .footer a:active {
		text-decoration: underline;
	}




/*NAV*/
/* ----------- */

#navWrapper {
	background: #333333 url('images/fade1.jpg') no-repeat right;
	width:285px; /*adjusts width of nav */
	text-align: right;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-family: "Century-Goth";
	float: left;
	height: 100%;
}
	
	

#nav {
	min-height: 650px;
	height: 100%;
	width:100%;
	padding:120px 0px 0px 0px; /*Top Right Bottom Left*/
	font-weight: bold;
}
	#nav .ben {
		color: #adeb41;
		font-size:35px;
		text-shadow:#000 0 2px 0;
	}
	
	#nav .radler {
		padding-right: 30px;
		color: #31c4f5;
		font-size:35px;
		text-shadow:#000 0 2px 0;
		
	}
		
#logo {
	padding: 0px 0px 0px 0px; /*Top Right Bottom Left*/
	margin-right:30px;
	height: 65px;
	width: 70px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:rgb(0,0,0) 0 2px 10px;
	-moz-box-shadow: 0px 2px 10px #000;
	
}
	#logo img {
		-moz-border-radius:5px;
	}

.nav {
	padding: 1px 30px 1px 0px;
	color: #aaaaaa;
	display: block;
	font: 400 20px 'trebuchet ms', arial, sans-serif;
	text-decoration: none;
}

	a.nav:hover {
		background: #222222;
		color: #cf0;
		text-decoration: none;
		-webkit-transition:all 0.2s;
		-moz-transition-duration:0.2s;
	}

.navHere {
	padding: 1px 30px 1px 0px;
	display: block;
	text-decoration: none;
	font: 400 20px 'trebuchet ms', arial, sans-serif;
	color: #cf0;
	background: #222;
}
	
	a.navHere:hover {
		color: #cf0;
		text-decoration: none;
	}




/*Comments*/
/* ----------- */

#commentWrapper a {
	color: #eeeeee ;
	font-weight: bolder;
}

	#commentWrapper a:hover {
		text-decoration: underline;
	}

#comments {
	font-size: 18px;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-family: "Century-Goth";
	color: white;
}


#postComment {
	font-size: 18px;
	font-family: 'century gothic', 'trebuchet ms', arial, sans-serif;
	font-family: "Century-Goth";
	color: white;
}

.commentText {
	
}

.commentBox {
	border-left: 1px solid grey; 
	border-bottom: 1px solid grey;
	-webkit-border-radius:2px; 
	-moz-border-radius:2px;
	padding-left:10px; 
	margin-left:25px; 
	margin-bottom:20px; 
	width:50%
}

	
	
	
/*JQUERYTools Apple Overlay Effect Styling*/
/* ----------- */

/* default close button positioned on upper right corner */
.apple_overlay div.close {
/* 	background-image:url(../images/index/overlays/close.png); */
	background-image:url(../images/index/overlays/close1.png);
	position:relative; right:25px; top:-25px;
	cursor:pointer;
	height:35px;
	width:35px;
	z-index: 1000;
}

/* the overlayed element */
.apple_overlay {
	display:none;	/* initially overlay is hidden */
	background-image:url(images/index/overlays/black.png);	/* growing background image */
	width:640px; /* width after the growing animation finishes height is automatically calculated */	
	padding:35px;	/* some padding to layout nested elements nicely  */
	font-size:11px;	/* a little styling */
	text-align: center;
}

.apple_overlay black {
	display:none;	/* initially overlay is hidden */
	background-image:url(images/index/overlays/black.png);	/* growing background image */
	width:640px;  /* width after the growing animation finishes height is automatically calculated */
	padding:35px;	/* some padding to layout nested elements nicely  */

	/* a little styling */	
	font-size:11px;
	color: black;
	text-align: center;
}

div.apple_overlay.blackVert {
	background-image:url(images/index/overlays/blackLG.png);		
	color:#fff;
	text-align: center;
}

	div.apple_overlay.blackVert img {
		margin-top:0px; /* adjust this to move images up and down in their respective overlay once clicked */
		-webkit-border-radius:4px;
		-moz-border-radius: 4px;
	}
	
	div.apple_overlay.blackVert span {
		line-height: 15px;
	}
	
	div.apple_overlay.blackVert p {
		font-weight: bold;
		font-size: 14px;
		margin: 5px 5px;
	}
	
	div.apple_overlay.blackVert a {
		color: #fff;
	}	
	div.apple_overlay.blackVert a:hover {
		text-decoration: underline;
	}	



.triggers {
	margin-top:10px;
	text-align:left;
}

	.triggers img {
		background-color:#fff;
		padding:0px;
		border: solid 1px #666666;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
	}
	
	.triggers img:hover {
/* 		border: solid 3px #999999; */
		-webkit-box-shadow:#000 0 2px 10px;
		-moz-box-shadow:#000 0 2px 10px;
		-webkit-transition:all 0.2s;
		-moz-transition-duration:0.2s;
	}	
	
	
/*JQUERYTools Accordion Styling*/
/* ----------- */
.accordionWrapper {
	font: 400 18px arial, sans-serif;
	width: 600px;
	margin-left: 15px;
	margin-right: auto;
	padding-left:15px;
	}
	
.accordionButton {	
	width: 600px;
	float: left;
	background: #222222;
	border-bottom: 1px solid #444444;
	cursor: pointer;
	padding: 10px;
	color: #fff;
	font-size: 1.5em;
	}
	
	.accordionButton:hover {
		background-color: #111111;
		text-decoration: underline;
	}
	
.accordionContent {	
	padding: 20px;
	margin-left: 10px;
	width: 560px; /* make this 580px to fill entire div width */
	float: left;
	background: #333333;
	display: none;
	color: #d2d2d2;
	font-size: 14px;
}

	.accordionContent ul {
		list-style: disc;
	}

img.accordionPic {
	width: 200px;
	height: 145px;
	float:left; 
	padding:2px; 
	margin-right: 20px; 
	border:solid 1px #d2d2d2;

}





.gallery-item {
	width: 175px !important;
}