/*
Theme Name:     Justin-Klein.com (Suffusion)
Theme URI:      http://justin-klein.com
Author URI:     http://justin-klein.com
Description:    Child theme for Suffusion with www.Justin-Klein.com customizations
Author:         Justin
Template:       suffusion
*/


/***************************************************/
/*                    Share bar                    */
/***************************************************/
.addthis_toolbox{
    position:fixed;
    margin-left:-90px;
    top:150px;
    z-index:599;
    width:63px;
    opacity:0.4;
    filter:alpha(opacity=40);
}

.addthis_toolbox:hover{
    opacity:1.0;
    filter:alpha(opacity=100);
}


/***************************************************/
/*                    General                      */
/***************************************************/

/*This rule was originally bundled with the plugin, but it messed up the login forms in twentyfourteen on iPhone & Android*/
.widget_loginlogout #user_pass, .widget_autoconnect_premium #user_pass,
.widget_loginlogout #user_login, .widget_autoconnect_premium #user_login{
	height:18px;
}

/*Apparently transparency on the right side of the 'featured image' bar doesn't work anymore,
 * seemingly because he was using older/invalid CSS...*/
.sliderImage div{
    opacity:0.7;
}

body {
    background-color: #363640;
    background-image:  url(img/background.jpg) ;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top center;
}
 
/*This is *PART* of my rotating banner image; outputting the URL itself is done by a filter inline.*/
#header-container {
    background-repeat: no-repeat;
    background-position: top center;
}

/*Twitter widget*/
.suf-twitter-avatar{
	height: 30px;
	width: 30px;
	border: 0;
	padding: 0;
}

/*Twitter widget (text size like the recent comments widget)*/
.widget-suf-follow-twitter .fix{
    font-size:10px;    
    line-height:11px;
}

/*For PageSpeed: it wants dimensions on every image*/
.wp-smiley{
	width: 15px;
	height: 15px;
}

/*Flags in comments, added by my own suffusion filter*/
.suff_flag{
	width: 16px;
	height: 11px;
}

/*Hide "allowed tags" added in older Suffusion versions (not needed after 3.9.2) */
.form-allowed-tags{
	display:none;
}

/*Fix for Suffusion over 3.5.7*/
.single-attachment #container{
	padding-left: 0;
	padding-right: 0;
}

/*Fix specifically for the Resume page in Suffusion 3.9.5, when auto-generate CSS is on (the theme has a bug...)*/
.page-id-4135 #container{
    padding-left: 0;
    padding-right: 0;
}


/*Resize the main navbar widget area to make room for my Google Translate hack*/
#right-header-widgets{
    width:30%    
}
#nav ul{
    width:69%;
}

/*Less padding around posts*/
.post{
    padding-left: 10px;
    padding-right: 10px;
}

/*Slightly smaller text*/
.entry{
    font-family: Verdana,Arial;
    font-size:12px;
    line-height:16px;
}

/*Slightly less space below posts on the main page*/
#content .entry-content{
	margin-bottom:0;
}

/* Small margin above the bylines above each post (make room to add a likebutton there) */
.title-container .postdata{
	margin-top:5px;
}

/*My own tag styles, so I can output them manually without relying on Suffusion's "custom styles" css*/
.justin-tags{
	float:left;
	text-align:left;
	color:#AAAAAA;
}
.justin-tags a{
	color: #999999;
	font-weight:bold;
}

dfn{
    border-bottom:dotted 1px #0000FF;
    cursor:help;
    font-style:normal;
}

.fpfcredit{
    color: #404040;
}

.footerBtn{
	width:80px;
	height:15px;
	border:0;
}

.SideBarImage{
    margin:4px 0;
	border:0;    
	width:150px;
	height:113px;
}

/*Featured: Move the numbered links over the featured image to save vertical space*/
#sliderIndex {
    margin-top:-35px;
    padding-left: 5px;
    z-index:20;
    position:relative;
}

/* After upgrading to Suffusion 3.9.2, the margin/padding rules above were overridden; fix it for "later" versions of Suffusion */
.show-border #sliderIndex{
	margin-top: -31px;
	padding-left: 5px;
}

/* After upgrading to 4.4.4, padding was introduced below it again - remove it*/
#featured-posts.index-below{
    padding-bottom:0;
}

/* After upgrading to 4.4.4, there was a delay until the featured-posts box would get sized; set its size immediately*/
#featured-posts{
    height:214px;
}


/*Featured: Make excerpt text smaller so more can fit*/
.sliderImage > div > p{
    font-size:11px;
    line-height:12px;
}

.sliderImage img{
	width: 618px;
	height: 200px;
}

/*Text for "latest update: today" in my widgets*/
.txtRecentChng{
    color:#CC4444;
}

/*Paypal donate button*/
.donateButton input{background:none;border:0;}

/*Reduce of the footer section */
#cred table{
    margin-top:3px;
}

/*He made the footer taller in Suffusion 3.9.5; restore to previous size*/
#cred{
	height: 36px;
	overflow: visible;
}

/* Fix for pathetic IE7, which always renders a background/border around checkboxes...*/
#subscribe, #subscribe-reloaded{
	background-color:transparent;
	border:none;
}

/* Fix for subscribe-to-comments */
#commentform .subscribe-to-comments label{
	float:none;
}

/*So long URLs etc don't overflow forever*/
.comment{
	overflow:hidden;
}

/*For the subscribe-to-comments management page*/
#subscribe-reloaded-action-p label{
    display:inline;
}


/***************************************************/
/*                    Guestbook                    */
/***************************************************/
#gbSignWrap #captcha_code_label{
	border:0;
	text-align:left;
	width:auto;
	font-weight:normal;
}


/***************************************************/
/*                    Travellog                    */
/***************************************************/
#SideBarJustin{float:left; padding: 5px; margin-right:10px; width: 265px;}
#travellogMain{height:450px;width:655px;overflow:visible;}
#kmlMenuOut{margin-top:18px;}
#clickHere{top:252px;left:210px;}
#kmlMenuOut INPUT{
    /*for stupid IE*/
   border:0;
   padding:0;
   margin-top: 0;
   margin-bottom: 0;
   background-color:#000000;
}

.page-id-4136 #container{
    padding-left: 0;
    padding-right: 0;    
}

.page-id-4136 .kmlFolderBtn{
    display:inline-block;
    width:9px;
    height:9px;
    background: transparent url('page-travellog/img/plus.gif') top left no-repeat;
    border:0;
}

.page-id-4136 .kmlFolderEmpty{
    display:inline-block;
    width:9px;
    height:9px;
    border:0;
}

.page-id-4136 #kmlMenuOut{
/*KMLMap fills with checkboxes for its menu*/
    font-family:    Arial, Verdana;
    font-size:      8pt;
    display:        none;
    white-space:    nowrap;
    overflow:       hidden;
    width:          100%;
}

.page-id-4136 #jKMLMap{
/*KMLMap fills this div with the GoogleMap*/
    width:         100%;
    height:        100%;
    white-space:   nowrap;
    font-size:     8pt;
}

.page-id-4136 #clickHere{
/*"Click here for more maps" */
/*ITS POSITION must be specified in the theme's css, so it's right next to the combobox*/
    position:absolute;
    width:210px;
    height:32px;
    z-index:1;
    display:none;
}

.page-id-4136 #travellogMain{
    /*Main content area of travellog; very similar to main-col.*/
    /*NOTE: HEIGHT AND WIDTH MUST BE SPECIFIED SOMEWHERE*/
    /*(I have it in style.css, so it can be done per-theme)*/
    float:          left;
}

.page-id-4136 .fldr{
/*Indentation for each folder in our sidebar*/
    margin-left: 10px;
}

.page-id-4136 .fldr .mrkr{
/*Indentation for each marker in its parent folder*/
    margin-left: 10px;
}

.page-id-4136 .haslnk:link{
/*Diff between menuitems whose markers have links and those which dont*/
    font-style:italic;
}

/***************************************************/
/*                Bloglisting Page                 */
/***************************************************/
#blogListing{
    margin-left:10px;
}
#blogListing .relevanssiExcerpt{
	white-space:normal;
	font-size:90%; 
	font-style:italic; 
	color:#555555; 
	border-bottom:1px solid #111111
}
#blogListing .listingLeft{
    /*Slightly less emphasis on the date/country section*/
   color:#555555;
   white-space:nowrap;
}
#blogListing .listingCenter{
	white-space:nowrap;
}
#blogListing .listingRight{
	opacity:0.25;
	filter:alpha(opacity=25);
	font-size:85%;	
	white-space:nowrap;
}
#blogListing tr{
    line-height:9px; /*Must be 9, not 0, to satisfy stupid IE7*/
    height:16px;
}
/*This is still needed to color-code private entries on the BlogListing page!*/
.qTiplevel1, .qTiplevel1:visited, .qTiplevel1:link{
    color:#184F86;/*#DEDEDE;*/
    font-style:italic;
}
.qTiplevel2, .qTiplevel2:visited, .qTiplevel2:link{
    color:#184F86;/*#FF4444;*/
    font-style:italic;
}
.qTiplevel3, .qTiplevel3:visited, .qTiplevel3:link{
    color:#184F86;/*#009900;*/
    font-style:italic;
}
.qTiplevel4, .qTiplevel4:visited, .qTiplevel4:link{
    color:#184F86;/*#0000FF;*/
    font-style:italic;
}
.qTippublic, .qTippublic:visited, .qTippublic:link{
    /*default link color*/
}


/***************************************************/
/*                  Recent Comments                */
/***************************************************/
.recentCommentsWidget{
    font-size:10px;    
    line-height:11px;
    padding-bottom:5px;
    margin-bottom:5px;
}
.borderbottom{
    border-bottom:1px solid #222222;
}
.recentCommentsWidget .avatar{
    float:left;
    margin-left:0;
}


/***************************************************/
/*               Projects-Listing                  */
/***************************************************/
#projectsTable{
    border: 1px solid #333333;
    line-height:15.5px;
    border-spacing:0;
    border-collapse:collapse;
}
#projectsTable td{
    border-bottom:1px solid #333333;
}
#projectsTable p{
    margin-top: 12px;
    margin-bottom: 0;
}
#projectsTable img{
    width:240px;
    height:180px;
    vertical-align:middle;
}
#projectsTable a > img{
    border: 0;
}
#projectsTable ul{
    margin: 5px 0 0 0;	
}
#projectsTable .descrip{
    padding: 0 4px;
	vertical-align: top;
}


/***********************************************/
/*         Photo Galleries (including POTD)    */
/***********************************************/
.gallery-item { float: left; margin: 6px 0 0 0; text-align: center; }
.gallery-icon img { padding:3px; background-color:#ffffff; border: 1px solid #ccc; }
.gallery-caption { margin: 0 0 0 0; font-size: 75%; line-height:100%; }
.jk-pg .gallery-caption {padding: 0 0 5px 0;}

/*For fancybox "PG" shortcode galleries specifically*/
#fancybox-wrap{margin-top:-17px;}
.fancybox-title-inside{padding-bottom:4px;padding-top:1px;line-height:1.25;}
.jkFancyBoxCounter{position:absolute; left:3px; top:-20px; color:white; text-shadow:1px 1px 1px #000;}

/***********************************************/
/*              Gallery/Video pages            */
/***********************************************/
.galleryWrap{
    width:285px;
    height:235px;
    float:left;
    border:1px solid black;
    padding:4px;
    background-color:#333333;
}
.galleryImg{
    padding:4px;
    border: 1px solid #000; 
    background-color:#FFFFFF; 
    margin:auto;
	width:150px;
    height:113px;
}
.galleryImg img{
    border:0;
	width:150px;
    height:113px;
}
.galleryImg a{
    display:block;
}
.galleryTxt{
    margin-top:3px;
    text-align:center;
    line-height:12.5px;
}
#galleryBody{
    width:590px;
    margin-left:auto;
    margin-right:auto;
}
#galleryHead{
    float:left;
    width:100%;
}
.galleryPageLinks{
    width:100%;
    font-weight:bold;
    font-size:14px;
    text-align:center;
}

/***************************************************/
/*    Attachments (& POTD, no longer attachments)  */
/***************************************************/
#VidPlayerFlash
{ /*For embedded flash videos on the "Videos" page (height is vid+a bit more for the controlbar)*/
    float:none;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 10px;
    width:720px;
    height:540px;
}

.attachment #photo, .single-jgk_potd #photo, .single-jgk_video #photo
{
    background:#f5f5f5;
    padding:5px;
    border:1px solid #ccc;
    margin-bottom: 20px;
}

/*These override the background for the "date" on the main front page for potd & video types;
 *Rather than showing the date (text), I show a background image that represents the post type.
 */
.jgk_potd .date{ background: url(img/camera-48x48.png) no-repeat; }
.jgk_video .date{ background: url(img/video-48x48.png) no-repeat; }

#photo-spacer
{
    padding: 20px 0;
    width: 100%;
    text-align:center;
    overflow: hidden;
}

#image-previous
{
    font-size: 11px;
    text-align:left;
    width: 33.3%;
}
    
#image-center
{
    font-size: 11px;
    text-align:center;
    width: 33.3%;
}

#image-next
{
    font-size: 11px;
    text-align:right;
    width: 33.3%;
}
        
#image-addcomment
{
    text-align: right;
}

#image-title
{
    text-align: left;
}

#image-notes
{
    width:70%;
    vertical-align:top;
    padding-top: 10px;
    text-align: left;
}
    
#image-exif
{
    font-size: 12px;
    text-align:right;
    padding-top:10px;
    width:25%;
    vertical-align:top;
}

#potdMeta .light-box{
    margin:0 auto;
    border:1px solid #ccc;
    padding:10px 20px;
    width:70%;
}

#comWrap{
    text-align:left;
}

/*After updating to wordpress core 3.3.1, my attachment template layouts broke.*/
/*These rules are copied from Suffusion's get_zero_sidebars_template_widths()*/
.attachment #container, .single-jgk_potd #container, .single-jgk_video #container { padding-left: 0; padding-right: 0; }
.attachment .entry img, .single-jgk_potd .entry img, .single-jgk_video .entry img { max-width: 99%; }
.attachment .wp-caption, .single-jgk_potd .wp-caption, .single-jgk_video .wp-caption { max-width: 99%; }
.attachment .entry .wp-caption img, .single-jgk_potd .entry .wp-caption img, .single-jgk_video .entry .wp-caption img { max-width: 100%; }
.attachment #main-col, .single-jgk_potd #main-col, .single-jgk_video #main-col {  width: 100%; }


/***************************************************/
/*                       Ads                       */
/***************************************************/

/*Paid ad (right now, only on a couple of the Projects page below the Google Ad)*/
.paid-ad{
	text-align:center;
	margin-left:auto;
	margin-right:auto; 
	margin-bottom: 6px; 
	width:468px;
	padding-left: 6px;
	padding-right: 6px; 
	border: solid 1px #222222; 
	-moz-border-radius:5px 5px 5px 5px
}

/* Google Ads, at the end of posts */
#GoogleAd {
    margin-left:auto;
    margin-right:auto;
    width:468px;
	position:relative;
	z-index:0;
}


/***************************************************/
/*                 Facebook LikeBox                */
/***************************************************/

/*Inner "Like Box" iFrame*/
.fb-likebox-iframe{
	position:relative;
	top:-1px;
	left:-1px;
	border:none;
	overflow:hidden;
}

/*Small "Like Box" (used on my project pages)*/
.fb-likebox-small{
	position:relative;
	overflow:hidden;
	width:260px;
	height:60px;
	border:1px solid #666666;
	margin-right: auto;
	margin-left: auto;
}

/***************************************************/
/*                WP Plugin Projects               */
/***************************************************/
.faq-a{
	display:none;
}
.faq-q{
	color: #227ad1;
	cursor:pointer;
}
.faq-q:hover {
	text-decoration:underline;
}

table#features th {
    border: thin solid #555555;
    padding: 3px;
}
table#features td {
    padding: 3px;
	min-width: 50px;
    text-align: center;
}
table#features td.feat{
	border-bottom: thin solid #555555;
	text-align:left;
}
table#features td.price{
	border: thin solid #555555;
	text-align:left;
}
table#features td.ok {
    background-color: #00a600;
}

table#features td.no {
    background-color: #9e0000;
}

.BigButtonWrap{
	text-align:center;
	font-size:120%;
	width:100%;
}

.BigButton{
	background-color:#222222;
	padding:4px 6px;
	border:1px solid #888888;
	display:block;
	margin-right:auto;
	margin-left:auto; 
}

.BigButton:hover{
	border:1px solid #880000;
	background-color:#444444;
	text-decoration: none;
}

/*For the "click for more info" links on the wp-fb-ac project page*/
.jgk-moreinfo-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; -moz-opacity:0.5; opacity:.50; filter:alpha(opacity=50); }
.jgk-moreinfo-box{display:none; position:fixed; top:100px; left:25%; width:50%; background-color:#fff; padding:5px; color:black;z-index:999;}
.jgk-moreinfo-lnk{color:#555;text-decoration:none;font-size:80%;border-bottom: 1px dotted #0000FF;cursor: help;font-style: italic;}
.jgk-moreinfo-lnk:hover{text-decoration:none;}
.jgk-moreinfo-lnk:visited{color:#555;}