
/*  Hide Elements
 *
 *	Add the corresponding class to the
 *	<body> tag in template.html to activate.
 *
 *	Usage Examples:
 *
 *	<body class="hide_sitename">
 *
 *	You can apply multiple changes to the theme
 *	by using multiple classes at once. 
 *
 *	IMPORTANT: Make sure they're spaced apart like the exmaple below.
 *
 *	<body class="right_sidebar light_sidebar hide_header hide_sitename">
--------------------------------------------- */


	/*  Hide Site Slogan
	 *	
	 *	Class: hide_siteslogan 
	------------------------------ */
	body.hide_siteslogan .top-bar span {
		display:none;
	}
	
	
	/*  Hide Top Bar
	 *
	 *	This includes the site slogan
	 *	and the social navigation.
	 *	
	 *	Class: hide_topbar 
	------------------------------ */
	body.hide_topbar .top-bar {
		display:none;
	}
	body.hide_topbar .wrapper--alt {
		margin:25px auto 0;
	}
	@media screen and (max-width:1099px) {
		body.hide_topbar .wrapper--alt {
			margin:0 auto;
		}
	}
	
	
	/*  Hide Site Name
	 *
	 *	This also centers the navigation.
	 *	
	 *	Class: hide_sitename
	------------------------------ */
	body.hide_sitename .site-name {
		display:none;
	}
	body.hide_sitename .site-navigation {
		text-align:center;
	}
	
	
	/*  Hide Master Header
	 *	
	 *	Class: hide_header 
	------------------------------ */
	body.hide_header .mast-head {
		display:none;
	}


	/*  Hide Mobile Social Navigation
	 *
	 *	Class: hide_socialnav
	------------------------------ */
	@media screen and (max-width:980px) {
		body.hide_socialnav .site-navigation .social-nav {
			display:none;
		}
	}
	

/*	HOW TO CHANGE YOUR THEME COLORS:
 *
 *	Place your color HEX code in the empty selector
 *	between the : and ; symbols. 
 *	
 *	Usage examples:
 *
 *	background-color: #ffffff;
 *	color: #ffffff;
 *	
 *	If nothing changes after refreshing your
 *	browser, clear your browser cache.
--------------------------------------------- */


/*  Theme Background
 *	
 *	Background: #C9C9C9
--------------------------------------------- */

	body,
	::-webkit-scrollbar	{
	    background-color:;
	}


/*  Theme Accent Colors
 *	
 *	Color: #d77b62
--------------------------------------------- */

/*  Elements that use the Accent color 
	for a background color.
--------------------------------------------- */

	::-webkit-scrollbar-thumb,
	button:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover,
	input[type="button"]:hover,
	button:focus,
	input[type="reset"]:focus,
	input[type="submit"]:focus,
	input[type="button"]:focus,
	.social-nav ul li a:hover,
	.social-nav ul li a:focus,
	.cpg-nav a:hover,
	.cpg-nav a:focus,
	.thumb_resolution,
	.navmenu-active,
	body.light_sidebar .cpg-nav a:hover,
	body.light_sidebar .cpg-nav a:focus	{
		background-color:;
	}


/*  Elements that use the Accent color 
	for a text color.
--------------------------------------------- */

	a:hover,
	a:focus,
	.site-footer a:focus,
	.site-footer a:hover,
	.main-nav ul li a:hover,
	.site-name h1 i,
	.mobile-name h1 i,
	.tableh1-alt a:hover,
	.catlink b:before,
	.catlink a:hover,
	.catlink a:focus {
		color:;
	}


/*  Accent Text Color 
 *
 *	This is the color of the text for all elements 
 *	using the Accent color for a background color.
 *
 *	Choose your color wisely so text is readable.
--------------------------------------------- */

	button:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover,
	input[type="button"]:hover,
	button:focus,
	input[type="reset"]:focus,
	input[type="submit"]:focus,
	input[type="button"]:focus,
	.social-nav ul li a:hover,
	.social-nav ul li a:focus,
	.cpg-nav a:hover,
	.cpg-nav a:focus,
	.thumb_resolution,
	.navmenu-active,
	body.light_sidebar .cpg-nav a:hover,
	body.light_sidebar .cpg-nav a:focus {
		color:;
	}


/*  Extra Colors
 *
 *	These classes use the Accent Color
 *	but for different elements.
--------------------------------------------- */

	/*  Gradient Link Border
	 *	
	 *	Replace "HEX_CODE" with your color code.
	 *	
	 *	In order for the gradient to transiton
	 *	properly into the hover gradient the gradient css
	 *	is used for the default border color but instead
	 *	the color HEX code is used twice so it's not technically
	 *	a gradient but instead displays as a normal single color border.
	 *	
	 *	If you don't wish to have a gradient border under the
	 *	category link you can replace "HEX_CODE" with the same
	 *	color code rather than two different codes. This will
	 *	make the border appear like it's only one color.
	 *	
	 *	#D77B62 = accent color
	 *	#f1f1f1 = light gray
	------------------------------ */
	.catlink a {
		border-image-source: linear-gradient(to right, HEX_CODE, HEX_CODE);
	}


/*  Top Bar Colors
 *	
 *	Background: #222121
 *	Text: #747474
--------------------------------------------- */

	/*  Background Color  ---------- */
	.top-bar {
		background-color:;
	}
	
	/*  Text Color  ---------- */
	.top-bar,
	.top-bar span,
	.top-bar .social-nav ul li a {
		color:;
	}


/*  Navigation Bar Colors
 *	
 *	Background: #2F2F2F
 *	Text: #D4D4D4
--------------------------------------------- */

	/*  Background Color  ---------- */
	.site-navigation--wrap {
		background-color:;
	}
	
	/*  Text Color  ---------- */
	.site-navigation--wrap,
	.site-navigation,
	.main-nav ul li a,
	.main-nav ul li a:after,
	.site-name h1 {
		color:;
	}


/*  Coppermine Navigation Colors
 *	
 *	Background: #575479
 *	Text: #C1C1C1
--------------------------------------------- */

	.cpg-nav {
		background:;
	}
	.cpg-nav a {
		color:;
		
		/*  Default: rgba(255,255,255,.1)
		 *
		 *  255,255,255, is the RGBA code for
		 *	HEX code #ffffff aka the color White.
		 *
		 *	0,0,0, is the RGBA code for
		 *	HEX code #000000 aka the color Black.
		 *
		 *	The ".1" is for opacity and what allows 
		 *	the background color to be semi-transparent. 
		-------------------------------------------------  */
		background:;
	}


/*  Footer Colors
 *	
 *	Background: #222121
 *	Text: #747474
--------------------------------------------- */

	/*  Background Color  ---------- */
	.site-footer .wrapper {
		background-color:;
	}
	
	/*  Text Color  ---------- */
	.site-footer .wrapper,
	.site-footer a {
		color:;
	}
	
	
/*  Header Image
 *	
 *	You can change the height of the header
 *	if your header is smaller or bigger.
 *	
 *	Default height: 375px
 *	Maximum height: 500px
--------------------------------------------- */

	.mast-head {
		height:YOUR_NEW_HEIGHT;
		background-image:url("./images/mast-head.png");
	}
