gistfile1.css

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-32498993-1', 'auto');
  ga('send', 'pageview');

</script>

/* CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS */

#content h1 {font-weight:bold;}  
     /* Section titles on pages like What Is Life Coaching? */

#content h2 {font-style:italic !important;}  
     /* Titles on tagline boxes such as on the home page and for the section titles under each individual blog post */

#content h6 {font-style:italic;}  
     /* Main titles on normal pages (with the double parallel line next to them), note that I think I can change the 'h6' to any kind of 'h' as long as I change the 'h' on each page that has a main title */

.page-id-1636 h3.title-row {color:#262626 !important;}  
     /* Titles of the pricing boxes on the services offered page */

.john :hover {background-color: #f0f0f0; cursor: pointer;}  
     /* Background color hover effect on home page */

.page-id-20 .reading-box .mobile-button {display: inline-block !important;float: none;}  
     /* Tagline box, moves button to bottom left corner (part one), and is necessary to keep this CSS if I want to center the title, body font, and button as well (as seen below) */
.page-id-20 .reading-box .button:first-child {display: none !important;}  
     /* Tagline box, moves button to bottom left corner (part two), and is necessary to keep this CSS if I want to center the title, body font, and button as well (as seen below) */
.page-id-20 .reading-box { text-align: center; }  
     /* Tagline box, centers title, body font, and button */
.page-id-20 .reading-box > p {text-align: center;}  
     /* Tagline box, justifies body font */
.page-id-20 .continue {}  
     /* Tagline box, use CSS like 'margin-bottom' here to reduce or add space around the button */
     /* All of these are for tagline boxes on home page only */

.fusion-accordian .fusion-panel {border-bottom: 0px;}  
     /* Decorative lines under toggles accordion shortcode boxes */
.fusion-accordian a {font:13.5px/20px 'OpenSans', arial, helvetica, sans-serif !important;}  
     /* Title font for the toggles accordion shortcode */

body #sidebar a.button.blue.large {padding: 10px 20px 10px 20px !important;}  
     /*  Sidebar large blue buttons, to make sure the font is centered correctly (for some reason without this code they won't center correctly) */

.page-id-20 .fusion-title {margin-bottom: 0px;}  
     /* Margin underneath title shortcode on Home Page */

.page-id-11 #sidebar {margin-top:10px;}  
     /* Margin for sidebar on the contact page */

.dropcap {font-family:'PT Serif', serif; font-size:50px; color:#83c54f; margin-right:2px; padding-top:0px; text-transform:uppercase; float:left; top:9px; position:relative; line-height:25px}  
     /* Dropcap */

.page-id-20 .fusion-checklist {margin-top: 0px; }  
     /* Checklist shortcode on Home Page, for margins above the checklist shortcode */
.page-id-20 .fusion-checklist .fusion-li-item {text-align: justify;}  
     /* Checklist shortcode on Home Page, justifies text */
.page-id-7 .fusion-checklist {margin-top:-15px; margin-bottom:-20px;}  
     /* Checklist shortcode on About Page, for margins above and below the whole checklist shortcode section */
.page-id-7 .fusion-checklist .fusion-li-item {margin-bottom:8px;}  
     /* Checklist shortcode on About Page, for margin in-between each checklist item */

.fusion-tabs ul.nav-tabs li a {text-align: center !important;}  
     /* Tabs shortcode titles */
.fusion-tabs .tab-content .tab-pane {padding: 5px 0 0 15px !important;}  
     /* Tabs shortcode (vertical), margin for text inside each tab, not the tab itself */

#wrapper #nav ul li ul li a {font:14.5px/30px ‘PT Serif’, serif}  
     /* Sub-menus, including menu drop-down height */

.starthereclass {font-weight:bold; font-style:italic;}  
     /* Font styling for start here menu link */

a.hoverimage:hover {opacity:1.0; filter:alpha(opacity=100); filter:“alpha(opacity=100)”;}  
     /* Image hover transparency, just add class=hoverimage to any image I want transparency on */
a.hoverimage {opacity:.80; filter:alpha(opacity=80); filter:“alpha(opacity=80)”;}  
     /* Image hover transparency, just add class=hoverimage to any image I want transparency on */

.review blockquote div strong{font-weight:bold; color:#333333;}  
     /* Testimonials author's name, use #333333 for black and #145C75 for blue, if I use blue consider changing the icon of the girl and guy to blue too (I have those images in my email already), it's kind of a pain though since those images would need to be replaced every time I update the theme */
#testimonials-1  {min-height:180px !important;}  
     /* Testimonials height, needed so when it cycles it doesn't move the entire page up and down, tailor this number to the largest amount of text in any one of the testimonials */

/* BLOG SETTINGS BELOW */

.single .single-navigation, .clearfix {margin-bottom:30px;}  
     /* Space between next/prev bar and content on individual blog posts */

.page-id-2438 .single .single-navigation, .clearfix {margin-bottom:60px;}  
     /* Main blog page spacing between posts */
.post .meta-info {margin-top:10px !important;}  
     /* Main blog page spacing between images and dates */

.post-content {font:13.5px/24px 'OpenSans', arial, helvetica, sans-serif !important; letter-spacing:.2px;}  
     /* Blog posts font */

.page-id-20 #content h4 {line-height: 15px !important; letter-spacing:.1px;}
     /* Recent posts shortcode (title), line-height is for space between lines in title only, letter-spacing is for space between each character in title only */
.fusion-recent-posts .columns .column .meta .date {font-size: 13px; font-style: italic;}
     /* Recent posts shortcode (date) */
.fusion-recent-posts .columns .column .meta {margin-bottom: 0px; padding: 0px 0px 0px 0px; line-height: 40px;}
     /* Recent posts shortcode, margin-bottom is for space between images (part 1), padding is for margins around date, line-height is for space between titles and date */
.fusion-recent-posts.layout-thumbnails-on-side .columns .column {margin-bottom: 10px;}
     /* Recent posts shortcode, margin-bottom is for space between images (part 2) */
.page-id-20 li.flex-active-slide {width:80% !important;}
     /* Recent posts shortcode, size of images, if I adjust this I may need to edit the "horizontal space" numbers below */
.page-id-20 li.flex-active-slide {margin-left: 10px !important;}
     /* Recent posts shortcode, reduces horizontal space between images and text (part 1), remember that number above must be same number as the fourth number in the "margin" below in part 2, but can be adjusted to my liking */
.fusion-recent-posts.layout-thumbnails-on-side .columns .column .floated-slideshow {margin: 0 0 5px -10px !important;}
     /* Recent posts shortcode, reduces horizontal space between images and text (part 2), remember that the fourth number in the "margin" above must be the same number as the number in part 1 above, but can be adjusted to my liking, don't change any of the other numbers in the "margin" though */
.recent-posts-content .meta a {display: none !important;}
.meta-separator {display: none !important;}
     /* Both lines above are for recent posts shortcode, removes the comments */

#sidebar .pyre_tabs .tab-holder {margin-top:-25px !important;}  
     /* Recent blog posts sidebar widget (part 1), this puts the right amount of white space between sidebar widgets */
.post-holder {line-height:0px;}  
     /* Recent blog posts sidebar widget (part 2) */
div.post-holder {margin-left:65px !important;}  
     /* Recent blog posts sidebar widget, (part 3), keeps title and date margins correct, if this CSS wasn't here, and you started to make the browser smaller, the responsiveness of the browser makes the title and date look weird, especially if there is a lot of text for one of the blog post titles or dates, I was also using the following code but that only fixed the date, whereas the above CSS fixes both: div.meta {margin-left:65px !important;}  */

.blogtitle {font:14px/10px 'PT Serif', serif !important; letter-spacing:.2px;}
.blogdate {font:12px/0px 'OpenSans', sans-serif !important; letter-spacing:.2px; font-style:italic !important;}
.related-posts {margin-bottom:40px;} 
.related-posts .image {width:195px; height:123px;} 
.es-carousel ul li a {width: 195px !important;  line-height: 15px !important;}
     /* These are for the related posts section at the end of individual blog posts */

/* HEADING MARGINS BELOW, DO NOT EDIT THE HEADING MARGINS IN THEME OPTIONS, ONLY EDIT THEM BELOW */

#main {padding-top:0px;} 
     /*Heading margin for normal pages */

.page-id-1636 #main {padding-top:15px!important;}  
     /* Heading margin for services offered page */

.page-id-2766 #main {padding-top:15px!important;}  
     /* Heading margin for schedule page */

.page-id-2985 .title{margin:0 0 16px;}  
     /* Margin for start here page */

#layerslider-wrapper {margin-top:1px;}  
     /* Space between logo and slider on home page for Chrome, IE, and Safari */

@-moz-document url-prefix() {#layerslider-wrapper {margin-top:0px!important;}}
     /* Space between logo and slider on home page for Firefox (do not change the value to anything other than 0, else it will break the page, it's not perfect on Firefox but I can't figure out a better solution) */

.page-id-11 #header {margin-bottom:-40px;}  
     /* Heading margin for contact page for Chrome, IE, and Safari */

@-moz-document url-prefix() {.page-id-11 #header {margin-bottom:0px;}}  
     /* Heading margin for contact page for Firefox (do not change the value to anything other than 0, else it will break the page, it's not perfect on Firefox but I can't figure out a better solution) */

#gmap {margin-bottom:10px!important;}  
     /* Space under map for Chrome, IE, and Safari */

@-moz-document url-prefix() {#gmap {margin-top:10px!important;}}  
     /* Space above map for Firefox, editing this value is okay to do */

/* QUFORM SETTINGS BELOW */

/* Very important, for the error box settings below, every time I create a new form I will need to edit the ".iphorm_#_##-element-spacer" for that unique form, since each "month" and "year" field will have a different "Unique ID"  */
.iphorm-errors-list > .iphorm-error {white-space: nowrap;}
     /* Error boxes, removes the vertical alignment  */
#fancybox-content > div , #fancybox-content {overflow: visible !important;}
     /* Error boxes, makes error boxes overlap with edges of pop-up box */
.iphorm-element-spacer {position: relative;}
     /* Error boxes, makes it so that you can move the error boxes via the settings below, but I may not need this, not sure */
.iphorm-errors-wrap {position: absolute; left: 250px; top: 2px;}
     /* Error boxes, moves them to the position I like */
.iphorm_1_26-element-spacer .iphorm-errors-wrap {position: absolute; left: -20px; top: 32px;}
     /* Error boxes, moves "month" field to the position that I like for form Payment1 */
.iphorm_6_26-element-spacer .iphorm-errors-wrap {position: absolute; left: -20px; top: 32px;}
     /* Error boxes, moves "month" field to the position that I like for form Payment2 */
.iphorm_7_26-element-spacer .iphorm-errors-wrap {position: absolute; left: -20px; top: 32px;}
     /* Error boxes, moves "month" field to the position that I like for form Payment3 */
.iphorm_1_27-element-spacer .iphorm-errors-wrap {position: absolute; left: 122px; top: 2px;}
     /* Error boxes, moves "year" field to the position that I like for form Payment1 */
.iphorm_6_27-element-spacer .iphorm-errors-wrap {position: absolute; left: 122px; top: 2px;}
     /* Error boxes, moves "year" field to the position that I like for form Payment2 */
.iphorm_7_27-element-spacer .iphorm-errors-wrap {position: absolute; left: 122px; top: 2px;}
     /* Error boxes, moves "year" field to the position that I like for form Payment3 */

.iphorm-form-1 .fa-user {position: absolute; top: 80px; left: 24px; z-index:5; font-size:17px; color:#A8A8A8;}
.iphorm-form-6 .fa-user {position: absolute; top: 80px; left: 24px; z-index:5; font-size:17px; color:#A8A8A8;}
.iphorm-form-7 .fa-user {position: absolute; top: 80px; left: 24px; z-index:5; font-size:17px; color:#A8A8A8;}
.iphorm-form-1 .fa-check-circle-o {position: absolute; top: 128px; left: 23px; z-index:5; font-size:17px; color:#A8A8A8;}
.iphorm-form-1 .fa-credit-card {position: absolute; top: 176px; left: 23px; z-index:5; font-size:14px; color:#A8A8A8;}
.iphorm-form-6 .fa-credit-card {position: absolute; top: 128px; left: 23px; z-index:5; font-size:14px; color:#A8A8A8;}
.iphorm-form-7 .fa-credit-card {position: absolute; top: 128px; left: 23px; z-index:5; font-size:14px; color:#A8A8A8;}
.iphorm-form-1 .fa-calendar {position: absolute; top: 223px; left: 23px; z-index:5; font-size:15px; color:#A8A8A8;}
.iphorm-form-6 .fa-calendar {position: absolute; top: 175px; left: 23px; z-index:5; font-size:15px; color:#A8A8A8;}
.iphorm-form-7 .fa-calendar {position: absolute; top: 175px; left: 23px; z-index:5; font-size:15px; color:#A8A8A8;}
.iphorm-form-1 .fa-calendar-o {position: absolute; top: 224px; left: 150px; z-index:5; font-size:15px; color:#A8A8A8;}
.iphorm-form-6 .fa-calendar-o {position: absolute; top: 176px; left: 150px; z-index:5; font-size:15px; color:#A8A8A8;}
.iphorm-form-7 .fa-calendar-o {position: absolute; top: 176px; left: 150px; z-index:5; font-size:15px; color:#A8A8A8;}
     /* Font-awesome icons used in forms, form-1 is Payment1 form, form-6 is Payment2 form, form-7 is Payment3 form */

.iphorm-tooltip-icon {position: absolute; top:4px !important; left: 94px;}
     /* Tooltip/help icon */

.iphorm-elements .iphorm-element-wrap-text input {padding-left:28px !important; padding-top:5px !important; font-weight: normal !important; font-size:16px !important;}
.iphorm-elements .iphorm-element-wrap-text label {padding-left:23px !important; padding-top:5px !important; font-weight: normal !important; font-size:16px !important;}
     /* Normal text boxes */

#fancybox-outer {-moz-border-radius: 10px !important; border-radius: 10px !important; -webkit-border-radius: 10px !important;}
#fancybox-content {border-color:#F8F8F8; -moz-border-radius: 10px !important; border-radius: 10px !important; -webkit-border-radius: 10px !important;}
.fancybox-bg {display: none;} #fancybox-content {-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);}
     /* Rounded edges of popup, and the "border-color" value is the second of two values that need to be changed to change the background color of the popup */

.iphorm-elements .iphorm-element-wrap-text input{
 display: inline-block !important;
  -webkit-transition-duration: 0.01s !important;
  transition-duration: 0.01s !important;
  -webkit-transition-property: box-shadow !important;
  transition-property: box-shadow !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  box-shadow: 0 0 4px rgba(30, 144, 255, 0) !important;}
.iphorm-element-wrap-text input:hover, .iphorm-element-wrap-text input:focus, .iphorm-element-wrap-text input:active {box-shadow: 0 0 4px rgba(30, 144, 255, 1) !important;}
     /* Hover effect for normal text boxes */

.iphorm-elements .iphorm-element-wrap select{
 display: inline-block !important;
  -webkit-transition-duration: 0.01s !important;
  transition-duration: 0.01s !important;
  -webkit-transition-property: box-shadow !important;
  transition-property: box-shadow !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  box-shadow: 0 0 2px rgba(30, 144, 255, 0) !important;}
.iphorm-element-wrap select:hover, .iphorm-element-wrap select:focus, .iphorm-element-wrap select:active {box-shadow: 0 0 2px rgba(30, 144, 255, 1) !important;}
     /* Hover effect for dropdown boxes */

.iphorm-submit-wrap button{
  display: inline-block;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0);}
.iphorm-submit-wrap button:hover, .iphorm-submit-wrap button:focus, .iphorm-submit-wrap button:active {box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);}
     /* Hover effect for submit button */

/* SUBSCRIBE TO BLOG VIA EMAIL SIDEBAR WIDGET BUTTON SETTINGS BELOW */

#sidebar .jetpack_subscription_widget input[type='submit']

.buttons a{margin-right:30px;}

#sidebar .jetpack_subscription_widget input[type='submit'] {
	background-image: linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
	background-image: -o-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
	background-image: -moz-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
	background-image: -webkit-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
	background-image: -ms-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #b5e0f7),color-stop(1, #76c7f1));
	border:1px solid #1172c1;
	color:#1172c1 !important;
	display:inline-block;
	height:32px;
	font:13px/32px 'PT Sans', arial, helvetica, sans-serif;
        letter-spacing:1px;
	text-transform:uppercase;
	text-align:center;
        font-weight:bold;
	text-shadow:0 1px 0 #fff;
	padding:0 20px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);}

#sidebar .jetpack_subscription_widget input[type='submit']:hover{
	color:#1172c1 !important;
        cursor: pointer;
	background-image: linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
	background-image: -o-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
	background-image: -moz-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
	background-image: -webkit-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
	background-image: -ms-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #76c7f1),color-stop(1, #b5e0f7));border:1px solid #1172c1;}

/* UNUSED CODE BELOW THAT I WANT TO KEEP */

#content blockquote {}  
     /* REMEMBER THAT I MAY WANT DIFFERENT COLORS FOR DIFFERENT BLOCK QUOTES, SUCH AS ONE ON TESTIMONIALS PAGE AND ONE FOR THE REST OF THE PAGES, SO FOR COLOR DO HTML COLOR FOR BLOCK QUOTES */

#gmap iframe {}  
     /* map itself, originally had (width:950px; height:325px; display:block; margin-left:auto; margin-right:auto;), WHEN I WENT TO EDIT THESE VALUES FOR THE GMAP, I FOUND THAT IT MADE THE MAP LOOK WEIRD ON THE IPHONE */

a {}             /* normal link */
a:link {}      /* unvisited link */
a:visited {}  /* visited link */
a:hover {}  /* mouse over link */
a:active {}  /* selected link */

h5.toggle a {}  
     /* Toggles title font and decorative lines underneath them (not yet clicked), border-bottom is usually set to 1px */

h5.toggle.active + .toggle-content {}  
     /* Toggles title font and decorative lines underneath them (already clicked), border-bottom is usually set to 1px */

.page-id-36 h5.toggle a {}
.page-id-36 h5.toggle.active a {}
.page-id-36 h5.toggle.active + .toggle-content {}
.page-id-2766 h5.toggle a {}
.page-id-2766 h5.toggle.active a {}
.page-id-2766 h5.toggle.active + .toggle-content {}
     /* Decorative lines under toggle/accordion items on FAQ page and Schedule page */