/*
Theme Name: Kristalose 2017
Description: Cumberland Pharmaceuticals Inc.
Author: Rob Blackford @ Techn.io
*/

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

	/* Custom Font Settings */
	html, button, input, select, textarea,
	.pure-g [class *= "pure-u"] {
	    color: rgb(44,44,44);
	    font-family: "source-sans-pro", Sans-Serif;
	}
	
	body {
	    color: rgb(44,44,44);
	    font-family: "source-sans-pro", Sans-Serif;
	}
	
	.img-panel { max-width: 300px; }
	
	.pure-u-1, .pure-u-1-1, .pure-u-1-2, .pure-u-1-3, .pure-u-2-3, .pure-u-1-4,
	.pure-u-3-4, .pure-u-1-5, .pure-u-2-5, .pure-u-3-5, .pure-u-4-5, .pure-u-5-5,
	.pure-u-1-6, .pure-u-5-6, .pure-u-1-8, .pure-u-3-8, .pure-u-5-8, .pure-u-7-8,
	.pure-u-1-12, .pure-u-5-12, .pure-u-7-12, .pure-u-11-12, .pure-u-1-24,
	.pure-u-2-24, .pure-u-3-24, .pure-u-4-24, .pure-u-5-24, .pure-u-6-24,
	.pure-u-7-24, .pure-u-8-24, .pure-u-9-24, .pure-u-10-24, .pure-u-11-24,
	.pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24,
	.pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-20-24, .pure-u-21-24,
	.pure-u-22-24, .pure-u-23-24, .pure-u-24-24 {
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	}
	
	/*{ border: 1px dotted red; }

/* Structure ========================================================================== */


	/* Page Composition */
	
	.content-row { width: 96%; margin: 0 auto; }
	.content-row-full { width: 100%; margin: 0 auto; }
	.content-home { max-width: 1020px; margin: 0 auto; }
	.content { max-width: 1020px; margin: 0 auto; }
	.content-narrow { max-width: 820px; margin: 0 auto; }
	.spacer-row-top { height: 1em; }
	.spacer-row-bottom { padding: .1em; }
	.logo-nav { height: 110px; }
	.logo-nav .logo { padding-top: 25px; }
	.left-col { padding-bottom: 3em; }
	.about-table { width: 100%; margin-top: 2em; }
	.wufoo-form { max-width: 70%; }
	.footer { padding: 1em 0; }
	.footer-text { padding: .2em; }
	.content-row-full.spacer-row-bottom {
		box-sizing: border-box;
	}
	
	/* Borders and Backgrounds */
	
	.bg { background-color: rgb(32, 86, 157); }
	.bg-home { background: rgb(255,255,555); }
	.bg-gray { background-color: rgb(237, 237, 237); }
	.bg-white { background-color: rgb(255,255,255); }
	.bg-footer { background-color: rgb(37, 54, 127); }
	.content-row-full { }
	.t-bottom-border { border-bottom: 1px solid rgb(235, 235, 235); }
	.footer { background-color: rgb(77, 76, 76); }
	
	/* Images */
	
	.side-panel { margin-top: 2em; float: right; }
	.centered { padding: 0 auto; }
	
	/* Typography */
	
	.left { text-align: left; }
	.center { text-align: center; }
	.right { text-align: right; }
	.bold { font-weight: bold; }
	
	sup a:link { font-size: 120%; font-weight: bold; padding-left: 2px; text-decoration: none; }
	sup.h1 a:link { position: relative; font-size: 65%; padding-left: 3px; top: -5px; text-decoration: none; }
	
	blockquote { background-color: #eee; border: 1px solid #ddd; margin: 3em 0 0; font-weight: bold; padding: 10px 30px; border-radius: 3px; }
	
	.p1 { padding: 1em; }
	.p1030 { padding: 1em 0 3em 0; }
	.p1330 { padding: 1em 3em 3em 0; }
	
	h1 { color: rgb(32, 86, 157); margin-top: 1em; }
	h2 { color: rgb(44,44,44); margin: .8em 0; }
	h3 { color: rgb(66, 142, 206); margin: 1.7em 0 1.2em; }
	h6 { color: rgb(44,44,44); margin: 1em 0 0 0; font-size: .8em; font-weight: normal; }
	
	a:link { color: rgb(2, 85, 165); text-decoration: none; }
	a:hover { text-decoration: underline; }
	a:visited { color: rgb(2, 85, 165); }
	
	ul li ul { margin: .5em 0 1em; }
	
	a.butn { background-color: rgb(32, 86, 157); padding: 1em 2em; margin: 2em 1em 0 0; }
	a.footer-butn { color: white; background-color: rgb(33, 70, 133); padding: 1em 1.5em; }
	
	.txt-nav { font-size: 1em; color: rgb(95, 85, 62); }
	.txt-nav a:link { color: rgb(95, 85, 62); text-decoration: none; }
	.txt-nav a:hover { color: rgb(34, 69, 133); text-decoration: underline; }
	.txt-nav a:visited { color: rgb(95, 85, 62); }
	.txt-nav a:visited:hover { color: rgb(34, 69, 133); }
	
	ul.main-nav { margin-top: 70px; padding: 0; display: table; float: right; }
	ul.main-nav li { display: inline; list-style: none; font-size: 1em; padding: 18px 10px; margin-right: 1px; border-radius: 5px 5px 0 0; background: #2D7B72; }
	ul.main-nav li a:link { color: white; text-decoration: none; }
	ul.main-nav li a:hover { text-decoration: none; }
	ul.main-nav li a:visited { color: white; }
	
	ul.main-nav li:hover { border-top: 5px solid rgb(211, 224, 119); }
	ul.main-nav li.on { border-top: 5px solid rgb(211, 224, 119); }
	
	.pi-si { color: rgb(255,255,255); font-size: 1.1em; font-weight: 600; margin: .5em 0; }
	.pi-si a:link { color: rgb(255,255,255); font-size: 1.2em; font-weight: 600; }
	.pi-si a:hover { text-decoration: underline; }
	.pi-si a:visited { color: rgb(255,255,255); }
	
	.footer-text p { color: white; font-size: .9em; line-height: 1.5em; }
	.footer-text a:link { color: white; text-decoration: none; }
	.footer-text a:hover { text-decoration: underline; }
	.footer-text a:visited { color: white; }
	

	/* Wordpress Widgets */ 

	.widget-area ul { margin: 0; padding: 0; }
	li.widget-container.widget_nav_menu { display: inline-block; padding-left: 0; margin: 2em 0 0 0; width: 85%; text-align: left; }
	h3.widget-title { color: rgb(44,44,44); margin: 0; padding: .5em; border-top: dotted 1px gray; border-bottom: dotted 1px gray; }
	ul.menu { display: inline-block;  margin: 0; padding: 0; width: 100%; }
	li.menu-item { list-style: none; padding: 10px; margin-left: 0; border-bottom: 1px dotted gray; }
	li.current-menu-item { }
	
	
/* Media Queries ========================================================================== */
@media screen and (max-width: 992px) and (min-width: 568px) {
	.logo-nav {
		height: 75px;
	}
	.logo-nav .logo {
		padding-top: 10px;
	}
	ul.main-nav {
    	margin-top: 45px;
	}
	ul.main-nav li {
		font-size: 0.4em;
    	padding: 10px 5px;
	}
}

@media screen and (max-width: 568px) {	
		
	/* Mobile Menu */
	
	* { transition-duration: .5s; }
	#mobile-menu { margin-bottom: 50px; }
	#mobile-menu header { position: fixed; top: 0; left: 0; width: 100%; text-align: center; height: 50px; background-color: rgb(77, 76, 76); }
	#mobile-menu header h3 { margin: 0 15px 0 0; line-height: 50px; color: #fff; text-align: right; }
	#drawer-toggle-label:before { content: ""; display: block; position: absolute; height: 2px; width: 24px; background: #fff; left: 13px; top: 18px; box-shadow: 0 6px 0 #fff, 0 12px 0 #fff; }
	#drawer-toggle-label { display: block; position: fixed; top: 0; left: 0; height: 50px; width: 50px; z-index: 1; background: transparent; }
	#drawer-toggle { display: none; }
	#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header { left: calc(100% - 50px); }
	#drawer-toggle:checked ~ #drawer { width: calc(100% - 50px); left: 0; }
	#drawer-toggle:checked ~ section.content-wrapper { margin-left: 250px; }
	#drawer { position: fixed; top: 0; padding-top: 50px; height: 100%; width: 250px; background: #2f2f2f; overflow-x: hidden; overflow-y: auto; left: -250px; z-index: 1; }
	#drawer ul { list-style: none; padding: 0; }
	#drawer li a { display: block; color: #fff; text-decoration: none; text-align: left; }
	#drawer li { margin: 0; width: 100%; padding: 10px 0 10px 10px; border-bottom: 1px dotted gray; }
	#drawer li.subnav { padding: 10px 0 10px 30px; }
	#drawer { padding-top: 10px; }
	#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header { left: 250px; }
	#drawer-toggle:checked ~ #drawer { width: 250px; left: 0; }
	
	.logo-nav .logo {
		padding-top: 10px;
	}

	.not-mobile { display: none; }
	
	blockquote { margin: 2em 0 1em; }

	.landing-logo { padding: 1em; }
	.txt-nav, .nav, .slider, .right-col, .footer-nav { display: none; }
	.logo { padding: .5em 0; }
	.spacer-row-top { height: 10px; }
	.spacer-row-bottom { padding: 1em; }
	.left-col { min-height: 250px; padding: 0 .5em 1em; }
	.wufoo-form { max-width: 100%; }

}

@media screen and (min-width: 768px) {	
	
	#mobile-menu, .alt-image { display: none; }
			
	}

	
@media screen and (min-width: 1024px) {	

	#mobile-menu, .alt-image { display: none; }
	
	}
	
@media screen and (min-width: 1280px) {	
	
	#mobile-menu, .alt-image { display: none; }

	}