/*
Theme Name: John Friedman Financial
Theme URI: http://www.johnfriedmanfinancial.com
Description: Theme created for John Friedman
Author: Example7
Author URI: http://www.example7.com
Version: 1.0

  Table of Contents  
  -----------------
  0. Normalize - modified from: http://necolas.github.com/normalize.css/
  1. Global
  2. Header
  3. Post
  4. Post Top
  5. Post Bottom
  6. Comments
  7. Sidebar
  8. Page
  9. Footer

  Colors
  ------
  Black       #343434
  Blue        #325f9c
  Orange      #c68718
  Purple      #5f329c
  Red         #9c3232
  Green       #338452
  Grey light  #f8f8f8
  Grey med    #d1d1d1
  Grey dark   #939393

*/










/* ====================================================================
   Normalize
   ==================================================================== */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body, figure, form { margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]), [hidden] { display: none; }

a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
b, strong { font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ''; content: none; }
small { font-size: 75%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

img { border: none; -ms-interpolation-mode: bicubic; }
img#wpstats { display: none; } 
svg:not(:root) { overflow: hidden; }

button, input, select, textarea { font-family: sans-serif; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }










/* ====================================================================
   Global
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

body { 
  background-color: #FFF; 
}

#wrap { 
  padding: 0 15px; 
}

#header { 
  clear: both; 
  width: 960px; height: 140px; margin: 0 auto; padding: 0; 
}

#container { 
  clear: both; overflow: auto; 
  width: 910px; margin: 0 auto; padding: 20px 25px; 
  border: 1px solid #d1d1d1; 
  box-shadow: 2px 2px 6px -1px #d1d1d1; -moz-box-shadow: 2px 2px 6px -1px #d1d1d1; 
  -webkit-box-shadow: 2px 2px 6px -1px #d1d1d1; -khtml-box-shadow: 2px 2px 6px -1px #d1d1d1; 
  border-radius: 10px; -webkit-border-radius: 10px; 
}

#footer { 
  clear: both; 
  width: 960px; margin: 0 auto; padding: 20px 0; 
}

/* -------------------[ Fonts and Type ]------------------- */

body, html { 
  color: #343434; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 21px; 
}

a:link, a:visited, a:active { color: #325f9c; text-decoration: none; }
a:hover { color: #343434; text-decoration: none; }

.small { 
  display: block; 
  width: 770px; margin-left: auto; margin-right: auto; padding: 25px 0 10px 0;
  font-size: 11px; line-height: 13px; text-align: center !important; 
}

#content ul li { 
  margin: 0 0 0 -15px; padding: 0 0 3px 0;
  list-style: disc; list-style-position: outside; 
}

#content ol li { 
  margin: 0 0 0 -15px; padding: 0 0 3px 0;
  list-style-type: decimal; list-style-position: outside; 
}

p, .p { margin: 0 0 12px 0; }

hr {
  clear: both; display: block; 
  width: 100%; height: 1px; margin: 40px 0 5px 0; padding: 0; 
  color: #d1d1d1;
}

blockquote { 
  clear: both; 
  margin: 25px 50px 25px 30px; padding: 15px 20px 10px 20px; 
  background-color: #f8f8f8;
  font-size: 13px; line-height: 18px;
}

/* -------------------[ Images ]------------------- */

.alignleft, img.alignleft { 
  clear: both; float: left; display: inline; 
  margin: 0 15px 10px 0; 
}

.alignright, img.alignright { 
  clear: both; float: right; display: inline; 
  margin: 0 0 10px 15px; 
}

.aligncenter, img.aligncenter { 
  display: block;
  margin-left: auto; margin-right: auto; 
}

.alignnone, img.alignnone { 
  margin: 0 0 5px 0; 
}

.wp-caption { 
  margin: 0; padding: 0; 
  font-size: 12px; line-height: 15px; letter-spacing: 0px; text-align: center; 
}

.wp-caption-text {
  margin: 0 15px 0 15px; 
}

/* -------------------[ Spacers ]------------------- */

.break0 { clear: both; display: block; height: 1px; }
.break1 { clear: both; display: block; height: 10px; }
.break2 { clear: both; display: block; height: 20px; }
.break3 { clear: both; display: block; height: 30px; }
.break4 { clear: both; display: block; height: 40px; }
.break5 { clear: both; display: block; height: 50px; }
.break6 { clear: both; display: block; height: 60px; }
.break7 { clear: both; display: block; height: 70px; }
.break8 { clear: both; display: block; height: 80px; }
.break9 { clear: both; display: block; height: 90px; }










/* ====================================================================
   Header
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

#logo  { 
  float: left; 
  width: 400px; margin: 40px 0 0 0; 
}

#social-menu  { 
  float: right; 
  width: 560px; 
  text-align: right; 
}

#social  { 
  clear: both; 
  height: 70px; margin: 30px 0 0 0; 
}

#social img  { 
  margin: 0 7px 0 0; 
}

#menu  { 
  clear: both; 
  color: #939393;
}

/* -------------------[ Nav Menu ]------------------- */

#nav, #nav ul, #nav li { 
  margin: 0; padding: 0; 
  list-style: none; 
}

#nav li { 
  float: right; 
  margin: 0 4px; 
}

#nav li a, #nav li a:link, #nav li a:visited { 
  margin: 0; padding: 0; 
  color: #343434; font-size: 14px; line-height: 14px; font-weight: normal;  
}

#nav li a:hover, #nav li.nav a:active { 
  margin: 0; padding: 0; 
}

#nav li a.roll-home:hover, ul#nav li.current-home a { 
  color: #325f9c; 
}

#nav li a.roll-about:hover, ul#nav li.current-about a { 
  color: #c68718; 
}

#nav li a.roll-services:hover, ul#nav li.current-services a { 
  color: #5f329c; 
}

#nav li a.roll-next:hover, ul#nav li.current-next a { 
  color: #9c3232; 
}

#nav li a.roll-faq:hover, ul#nav li.current-faq a { 
  color: #338452; 
}

#nav li a.roll-blog:hover, ul#nav li.current-blog a { 
  color: #c68718; 
}

#nav li a.roll-contact:hover, ul#nav li.current-contact a { 
  color: #325f9c; 
}










/* ====================================================================
   Post
   ==================================================================== */

#blog_header { 
  clear: both; 
  width: 910px; height: 67px; margin: 0 0 30px 0; padding: 0;
  background: url(images/header_blog.png) no-repeat 0 0; 
}

#blog_header_subscribe { 
  float: right; 
  width: 121px; height: 20px; margin: 25px 25px 0 0; 
}

#sidebar { 
  clear: both; float: left; 
  width: 180px; margin: 0; padding: 0; 
}

#post { 
  float: right; 
  width: 700px; margin: 0; padding: 0; 
}










/* ====================================================================
   Post Top
   ==================================================================== */

#post h1 { 
  margin: 0 0 2px 0; 
}

#post h1 a { 
  color: #343434; font-weight: normal;  
}

#post h1 a:hover { 
  color: #325f9c;
}

.post-date { 
  font-size: 14px; 
}











/* ====================================================================
   Post Bottom
   ==================================================================== */

.post-bottom { 
  font-size: 13px; line-height: 18px; 
}

.post-bottom a { 
  font-weight: normal; 
}

.post-bottom-box { 
  clear: both; overflow: auto; 
  width: 680px; margin: 20px 0 0 0; padding: 9px 10px; 
  background-color: #E9EEF4;  
}

.back-to-blog { 
  clear: both; display: block; 
  margin: 20px 0 0 0; 
  color: #939393; font-size: 12px; 
}

.back-to-blog a { 
  color: #939393; 
}

.back-to-blog a:hover { 
  color: #325f9c; 
}










/* ====================================================================
   Comments
   ==================================================================== */

/* -------------------[ Reply Box ]------------------- */

#comment-form { 
  clear: both; overflow: auto; 
  width: 600px; margin: -10px 0 40px 0; padding: 30px 88px 10px 0; 
  border-top: 1px solid #d1d1d1; 
  background-color: #FFF; 
  text-align: left; 
}

.comment-title { 
  clear: both; float: left; 
  width: 90px; margin: 0; padding: 0 10px 10px 0; 
  text-align: right;  
}

.comment-input  { 
  float: left; 
  padding: 0 0 10px 0; 
}

#comment-form input { 
  width: 390px; 
}

#comment-form textarea { 
  width: 390px; height: 90px; 
}

#comment-form input, #comment-form textarea { 
  padding: 2px 5px; 
  border: 1px solid #d1d1d1; 
  border-radius: 5px; -webkit-border-radius: 5px; 
}

.comment-submit { 
  clear: both; display: inline-block; 
  width: 80px !important; margin: 5px 0 0 100px; padding: 5px 10px !important; 
  border-radius: 11px; border: 4px solid #FFF; -moz-border-radius: 22px; -webkit-border-radius: 22px; 
  font-size: 14px; font-weight: normal; letter-spacing: 0.03px; text-decoration: none; text-align: center; 
}

a.comment-submit { 
  background-color: #d1d1d1 !important; 
}

.comment-submit:hover { 
  border: 1px solid #d1d1d1; 
  background-color: #FFF !important; 
}

/* -------------------[ Comments ]------------------- */

.comment-content { 
  margin: 0; padding: 0; 
  font-size: 14px; line-height: 22px; 
}

.commentlist ol { 
  float: left; 
  width: 650px; margin: 0; padding: 0; 
}

.comment-author, .comment-date { 
  font-weight: bold; 
}

.comment-text { }

.commentlist li { 
  width: 650px; margin: 0 0 20px -40px; padding: 15px; 
  list-style: none; 
}

.even, .alt { 
  margin: 0; padding: 0; 
  border: 1px solid #d1d1d1; 
  border-radius: 5px; -webkit-border-radius: 5px; 
}










/* ====================================================================
   Sidebar
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

.widget, .widgettext, .textwidget, widget_text { list-style: none; }

#sidebar { 
  /* not recommended: position: fixed; top: 260px; */
  font-size: 14px; line-height: 18px; text-align: left;
}

#sidebar ul li { 
  list-style: none; 
}

#sidebar ul { 
  margin: 0; padding: 0; 
}

#sidebar li {
  font-size: 14px; line-height: 18px; 
}

/* -------------------[ Expanding Content ]------------------- */

.togList { 
  margin: 0 0 10px 0; 
}

.togList dt { 
  cursor: pointer; cursor: hand; 
}

.togList dt span { 
  margin: 0; padding: 0; 
}

.togList dd { 
  margin: 2px 0 10px 0; padding: 0; 
}

.togList dd li { 
  color: #939393; margin: 0 0 3px 0;  
}

html.isJS .togList dd { 
  display: none; 
} 

.togList dd li a { 
  color: #939393; font-weight: normal; 
}

.togList dd li a:hover { 
  color: #325f9c;
}

/* -------------------[ About The Blog ]------------------- */

.about-link:link, .about-link:active, .about-link:visited { 
  color: #343434; 
}

.about-link:hover { 
  color: #325f9c;
}

/* -------------------[ Search ]------------------- */

#searchwrap { 
  width: 180px; margin: 25px 0; 
}

#searchform { 
  display: inline; overflow: hidden; 
  margin: 0; padding: 3px 0; 
  border: none; 
  background-color: #FFF; 
}

#searchbox { 
  display: inline; 
  width: 140px; margin: 0; padding: 3px 0 3px 4px; 
  border: 1px solid #d1d1d1; 
  border-radius: 5px; -webkit-border-radius: 5px; 
  background: #FFF !important; 
  color: #939393; font-size: 10px; 
}

/* -------------------[ Up to Top Link ]------------------- */

.top-link:link, .top-link:active, .top-link:visited { 
  color: #939393; font-size: 12px; 
}

.top-link:hover { 
  color: #325f9c;
}










/* ====================================================================
   Page
   ==================================================================== */

#content { 
  clear: both; 
  width: 910px; margin: 0; padding: 0; 
}

h1 { 
  margin: 0 0 12px 0; padding: 0;
  font-size: 22px; font-weight: normal; letter-spacing: 0.03em; 
}

h2 { 
  float: left; width: 500px; 
  height: 70px; 
  margin: 0; padding: 21px 0 0 18px;
  color: #FFF; font-size: 32px; font-weight: normal; letter-spacing: 0.03em; text-transform: uppercase; 
}

h2 a:link, h2 a:visited, h2 a:hover { 
  color: #FFF; font-weight: normal; 
}

h3 { 
  margin: 0 0 12px 0; padding: 0;
  font-size: 24px; font-weight: normal; letter-spacing: 0.03em; 
}

#content-video { 
  float: right; display: block; 
  border: none; 
  width: 359px; height: 202px; margin: 13px 3px 0 0; padding: 0 0 25px 25px; 
}

#content-video-blog-about { 
  clear: both; float: right; 
  width: 359px; height: 202px; margin: 0 0 12px 8px; padding: 0; 
  border: 2px solid #D4961B; border-radius: 4px; -webkit-border-radius: 4px; 
}

/* -------------------[ Home ]------------------- */

#content-home { 
  clear: both; 
  width: 910px; margin: 0; padding: 0; 
}

/* ----- Video Layout ----- */

#home-video { 
  clear: both; 
  width: 910px; height: 325px; margin: 20px 0; padding: 0; 
}

/* ----- Video Tabs ----- */

#home-tabs { 
  float: left; 
  width: 415px; height: 325px; margin: -15px 0 0 -40px; padding: 0; 
}

#hometab ul, #hometab li { 
  margin: 0; padding: 0; 
  list-style: none; 
}

li.hometab01 a, li.hometab02 a, li.hometab03 a, li.hometab04 a, li.hometab05 a { 
  display: block; overflow: hidden;  
  width: 415px; height: 65px; 
  text-indent: -10000px; 
}

li.hometab01 a { 
  background: url(images/home-tab1.png) no-repeat 0 0; 
}
li.hometab02 a { 
  background: url(images/home-tab2.png) no-repeat 0 0; 
}
li.hometab03 a { 
  background: url(images/home-tab3.png) no-repeat 0 0; 
}
li.hometab04 a { 
  background: url(images/home-tab4.png) no-repeat 0 0; 
}
li.hometab05 a { 
  background: url(images/home-tab5.png) no-repeat 0 0; 
}

li.hometab01 a:hover, li.hometab02 a:hover, li.hometab03 a:hover, li.hometab04 a:hover, li.hometab05 a:hover { 
  background-position: 0 -65px; 
}
 
li.hometab01 a.active, li.hometab02 a.active, li.hometab03 a.active, li.hometab04 a.active, li.hometab05 a.active { 
  background-position: 0 -130px; 
}

/* ----- Gradient Backgrounds under the Video ----- */

#home-gradient1, #home-gradient2, #home-gradient3, #home-gradient4, #home-gradient5 { 
  float: right; 
  width: 495px; height: 325px; margin: 0; padding: 0; 
}

#home-gradient1 {
  background: url(images/home-gradient1.png) no-repeat 0 0; 
}

#home-gradient2 {
  background: url(images/home-gradient2.png) no-repeat 0 0; 
}

#home-gradient3 {
  background: url(images/home-gradient3.png) no-repeat 0 0; 
}

#home-gradient4 {
  background: url(images/home-gradient4.png) no-repeat 0 0; 
}

#home-gradient5 {
  background: url(images/home-gradient5.png) no-repeat 0 0; 
}

/* ----- Video ----- */

#home-the-video { 
  float: right; display: block;
  width: 530px; height: 298px; margin: -331px 0 0 0; padding: 0;  
  border: none; 
}

/* ----- RSS and Twitter ----- */

#home-rss { 
  clear: both; float: left; 
  height: 22px; margin: 3px 0; padding: 0; 
}

#home-twitter { 
  float: right; 
  width: 285px; height: 25px; margin: 3px 0; padding: 0; 
}

#home-rss img, #home-twitter img { 
  margin: 0 6px -3px 0; 
}

.black-link:link, .black-link:active, .black-link:visited { 
  color: #343434; font-weight: normal; 
}

.black-link:hover { 
  color: #325f9c; font-weight: normal; 
}

/* ----- Bottom Boxes ----- */

#home-box1 { 
  clear: both; 
}

#home-box1, #home-box2, #home-box3 { 
  float: left; 
  width: 250px; height: 210px; margin: 20px 0; padding: 15px 15px 10px 15px; 
  border: 1px solid #d1d1d1; border-radius: 5px; -webkit-border-radius: 5px; 
  box-shadow: 2px 2px 6px -1px #d1d1d1; -moz-box-shadow: 2px 2px 6px -1px #d1d1d1; -webkit-box-shadow: 2px 2px 6px -1px #d1d1d1; -khtml-box-shadow: 2px 2px 6px -1px #d1d1d1; 
}

#home-box1, 
#home-box2 { 
  font-size: 13px; line-height: 18px; 
}

#home-box3 { 
  font-size: 13px; line-height: 16px; 
}

#home-box1, #home-box2 {
  margin-right: 30px; 
}

#home-post1, #home-post2 { 
  width: 250px; height: 185px; margin: 0; padding: 0; 
}

.home-box-post-title {
  font-size: 14px; line-height: 19px;
}

.home-more { 
  height: 20px; 
  text-align: right; 
}

/* -------------------[ About ]------------------- */

#content-about { 
  clear: both; 
  width: 910px; margin: 0; padding: 0; 
  background: url(images/header_about.png) no-repeat 0 0; 
}

/* -------------------[ Services ]------------------- */

#content-services { 
  clear: both; 
  width: 910px; margin: 0; padding: 0; 
  background: url(images/header_services.png) no-repeat 0 0; 
}

/* -------------------[ Next Steps ]------------------- */

#content-next { 
  clear: both; 
  width: 910px; margin: 0; padding: 0; 
  background: url(images/header_next.png) no-repeat 0 0; 
}

/* -------------------[ FAQ ]------------------- */

#content-faq { 
  clear: both; 
  width: 910px; margin: 0; padding: 0; 
  background: url(images/header_faq.png) no-repeat 0 0; 
}

/* -------------------[ Contact ]------------------- */

#content-contact { 
  clear: both; 
  width: 910px; margin: 0; padding: 0; 
  background: url(images/header_contact.png) no-repeat 0 0; 
}














/* ====================================================================
   Footer
   ==================================================================== */

#footer { 
  color: #939393; font-size: 12px; text-align: center; 
}

#footer a { 
  color: #939393; font-weight: normal; 
}

#footer a:hover { 
  color: #325f9c 
}