/* DESKTOP NAVIGATION:
-----------------------------------------------*/
#navigation {
	display: table;
	font-family: 'Open Sans', sans-serif;
	margin: 0 auto;
	width: 750px;
}

/* First let's hide some mobile only stuff,
so when the width of the page is above 768px
we display the full menu.
----------------------------------------------*/
@media only screen and (min-width: 768px) {
#mobile-header, #sidr-main, .sidr, .sidr-inner, .sidr-class-main-nav, .sidr-class-panel {
	display: none;
}
}
/* Header
-----------------------------------------------*/ 
#header {
	height: 90px;
}
#header .logo-lets-talk {
	float: left;
	margin: 7px 0 0 0;
}
#header .logo-dulcolax {
	float: right;
	margin: 32px 0 0 0;
}
/* Top navigation menu
-----------------------------------------------*/ 
#topnav {
	border-bottom: 2px solid #dbeed4;
	border-top: 2px solid #dbeed4;
	height: 32px;
	margin: 0;
	padding: 0;
	width: 100%;
}
#topnav li {
	background: none;
	float: left;
	margin: 0;
	padding: 0;
}
#topnav li a {
	color: #4ba829;
	display: block;
	font-size: 11px;
	font-weight: 700;
	line-height: 32px;
	padding: 0 20px 0 29px;
	text-decoration: none;
	text-transform: uppercase;
}
#topnav li a.main-nav-your-stories {
	background: url(../images/main-nav/main-nav-your-stories.png) 0 0 no-repeat;
	background-size: 20px 64px;
	margin-left: 9px;
}
#topnav li a.main-nav-need-to-know {
	background: url(../images/main-nav/main-nav-need-to-know.png) 0 0 no-repeat;
	background-size: 20px 64px;
}
#topnav li a.main-nav-relief {
	background: url(../images/main-nav/main-nav-relief.png) 0 0 no-repeat;
	background-size: 20px 64px;
}
#topnav li a.main-nav-pregnancy {
	background: url(../images/main-nav/main-nav-pregnancy-and-kids.png) 0 0 no-repeat;
	background-size: 20px 64px;
}
#topnav li a.main-nav-men {
	background: url(../images/main-nav/main-nav-men.png) 0 0 no-repeat;
	background-size: 20px 64px;
}
#topnav li a:hover {
	color: #006325;
	background-position: 0 -32px;
}
/* Toolbar menu
-----------------------------------------------*/ 
/* Toolbar menu: Expand/ Collapse button 
-----------------------------------------------*/
#toolbar-button a {
	background: url(../images/main-nav/toolbar-menu.png) no-repeat;
	background-size: 9px 40px;
	background-position: 0 -20px;
	color: #4ba829;
	font-size: 11px;
	height: 22px;
	line-height: 20px;
	display: block;
	margin-left: 640px;
	padding-left: 14px;
	width: 90px;
}
#toolbar-button a.collapse {
	background-position: 0 0;
}
/* Toolbar menu: Menu(s)
----------------------------------------------*/
.panel ul {
	float: left;
	margin: 5px 0;
	padding: 0;
}
/* We hide the toolbar titles as we don't want to 
see them until the page collapses to mobile view
-----------------------------------------------*/
.panel ul li.panel-title {
	display: none;
}
.panel ul.panel-list-01 {
	margin: 0 0 0 9px;
	width: 127px;
}
.panel ul.panel-list-02 {
	width: 199px;
}
.panel ul.panel-list-03 {
	width: 176px;
}
.panel ul.panel-list-04 {
	width: 160px;
}
/* We hide the fifth menu from view for desktop, 
but reveal it later when the screen collapses 
to the mobile version
---------------------------------------------*/
.panel ul.panel-list-05 {
	display: none;
	width: 0;
}
.panel ul li {
	background: none;
	font-size: 11px;
	line-height: 13px;
	margin: 0;
	padding: 6px 0;
}
.panel ul li a {
	color: #4ba829;
	display: block;
	padding: 0 0 0 29px;
	text-decoration: none !important;
}
.panel ul li a:hover {
	background: url(../images/main-nav/toolbar-link.png) 0 0 no-repeat;
	background-size: 14px 10px;
	color: #006325;
	text-decoration: none !important;
}
/* Header: Toolbar > Search Bar
-----------------------------------------------*/
.search-bar {
	background: #f6fbf4;
	border-bottom: 2px solid #dbeed4;
}
.search-box {
	background: url(../images/search-box-bg.png) 0 0 no-repeat;
	float: right;
	height: 29px;
	margin: 14px 0;
	padding: 5px 26px 0 0;
	position: relative;
	z-index: 9999;
}
.search-box input {
	background: none;
	border: none;
	color: #666;
	float: left;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0 0 0 10px;
	width: 140px;
}
.search-box input#submit {
	border: medium none;
	height: 19px;
	margin: 0;
	padding: 0;
	width: 20px;
}

/* MOBILE NAVIGATION:
-----------------------------------------------*/
@media only screen and (max-width: 767px) {
/* First lets hide those things we 
don't want to show in the side menu
--------------------------------------- */
#header, #topnav, #navigation, #sidr-main .sidr-class-header, #sidr-id-toolbar-button, .sidr-class-search-bar, .sidr-class-search-box, .sidr-class-searchbox, .sidr-class-search-field, #sidr-id-submit, #sidr-id-topnav {
	display: none !important;
}
/* Now, lets show the mobile only menu
--------------------------------------- */
/* Top navigation menu
-----------------------------------------------*/ 
#mobile-header {
	display: block !important;
}

#mobile-header {
	height: 45px;
}

#mobile-header .navbutton {
	background: url(../images/nav.png) 0 0 no-repeat;
	background-size: 45px 90px;
	display: block;
	width: 45px;
	height: 45px;
	z-index: 99;
	float: left;
	border-right: 1px solid #7fae8e;
}
#mobile-header a.active {
	background-position: 0 -45px;
}
#mobile-header .logobutton {
	background: url(../images/logo-dulcolax-mobile.png) 0 0 no-repeat;
	background-size: 110px 45px;
	display: block;
	width: 110px;
	height: 45px;
	margin: 0 auto;
}
/* Now, lets build the side menu for mobile
--------------------------------------- */
/* Top navigation menu
-----------------------------------------------*/ 
.sidr {
	display: none;
	position: absolute;
	position: fixed;
	top: 0;
	height: 100%;
	z-index: 999999;
	width: 260px;
	overflow-x: none;
	overflow-y: auto;
	font-size: 15px;
	background: url(../images/side-menu-bkg.png) top right repeat-y #fff;
	color: #4ba829;
	padding-top: 32px;
}
.sidr .sidr-inner {
	padding: 0;
}
.sidr .sidr-inner>p {
}
.sidr.right {
	left: auto;
	right: -260px
}
.sidr.left {
	left: -260px;
	right: auto
}
.sidr h1, .sidr h2, .sidr h3, .sidr h4, .sidr h5, .sidr h6 {
	font-size: 11px;
	font-weight: normal;
	padding: 0 15px;
	margin: 0 0 5px;
	color: #4ba829;
	line-height: 24px;
}
.sidr p {
	font-size: 13px;
	margin: 0 0 12px
}
.sidr p a {
	color: rgba(255,255,255,0.9)
}
.sidr>p {
	margin-left: 15px;
	margin-right: 15px
}
.sidr ul {
	display: block;
	margin: 0 20px 20px 12px;
	padding: 0;
}
.sidr ul li.sidr-class-panel-title {
	color: #4ba829;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 6px 0;
	padding: 6px 0 0 0;
}
.sidr ul li.sidr-class-panel-title span {
	border-bottom: 2px solid #a5d394;
	margin-left: 32px;
}
.sidr ul li.sidr-class-panel-title-stories {
	background: url(../images/main-nav/main-nav-your-stories.png) 0 0 no-repeat;
}
.sidr ul li.sidr-class-panel-title-know {
	background: url(../images/main-nav/main-nav-need-to-know.png) 0 0 no-repeat;
}
.sidr ul li.sidr-class-panel-title-relief {
	background: url(../images/main-nav/main-nav-relief.png) 0 0 no-repeat;
}
.sidr ul li.sidr-class-panel-title-pregnancy {
	background: url(../images/main-nav/main-nav-pregnancy-and-kids.png) 0 0 no-repeat;
}
.sidr ul li.sidr-class-panel-title-men {
	background: url(../images/main-nav/main-nav-men.png) 0 0 no-repeat;
}
.sidr ul li {
	background: none;
	display: block;
	margin: 0 0 0 32px;
	padding: 4px 0;
	font-size: 13px;
	line-height: 15px;
	font-weight: 400;
}
.sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active {
}
.sidr ul li:hover>a, .sidr ul li.active>a, .sidr ul li.active>span, .sidr ul li.sidr-class-active>a, .sidr ul li.sidr-class-active>span {
	color: #006223;
}
.sidr ul li a, .sidr ul li span {
	padding: 0;
	display: block;
	text-decoration: none;
	color: #4ba829
}
.sidr ul li ul {
	border-bottom: none;
	margin: 0
}
.sidr ul li ul li {
	line-height: 15px;
	font-size: 13px
}
.sidr ul li ul li:last-child {
	border-bottom: none
}
.sidr ul li ul li:hover, .sidr ul li ul li.active, .sidr ul li ul li.sidr-class-active {
}
.sidr ul li ul li:hover>a, .sidr ul li ul li:hover>span, .sidr ul li ul li.active>a, .sidr ul li ul li.active>span, .sidr ul li ul li.sidr-class-active>a, .sidr ul li ul li.sidr-class-active>span {
}
.sidr ul li ul li a, .sidr ul li ul li span {
	color: rgba(255,255,255,0.8);
	padding-left: 30px
}
.sidr form {
	margin: 0 15px
}
.sidr label {
	font-size: 13px
}
.sidr input[type="text"], .sidr input[type="password"], .sidr input[type="date"], .sidr input[type="datetime"], .sidr input[type="email"], .sidr input[type="number"], .sidr input[type="search"], .sidr input[type="tel"], .sidr input[type="time"], .sidr input[type="url"], .sidr textarea, .sidr select {
	width: 100%;
	font-size: 13px;
	padding: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 0 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	border: none;
	background: rgba(0,0,0,0.1);
	color: rgba(255,255,255,0.6);
	display: block;
	clear: both
}
.sidr input[type=checkbox] {
	width: auto;
	display: inline;
	clear: none
}
.sidr input[type=button], .sidr input[type=submit] {
	color: #333;
	background: #fff
}
.sidr input[type=button]:hover, .sidr input[type=submit]:hover {
	background: rgba(255,255,255,0.9)
}
}
/***********************************************
Active links
***********************************************/
/* Top nav 
----------------------------------------- */
html body#symptoms a.main-nav-need-to-know, html body#painful-poo-symptoms a.main-nav-need-to-know, html body#symptom-checker a.main-nav-need-to-know, html body#causes a.main-nav-need-to-know, html body#ibs a.main-nav-need-to-know, html body#medication-side-effects a.main-nav-need-to-know, html body#pregnancy a.main-nav-need-to-know, html body#related-conditions a.main-nav-need-to-know, html body#stress-constipation a.main-nav-need-to-know, html body#how-digestion-works a.main-nav-need-to-know, html body#constipation-myths a.main-nav-need-to-know, html body#diet-and-lifestyle a.main-nav-need-to-know, html body#avoiding-constipation a.main-nav-need-to-know, html body#faqs a.main-nav-need-to-know, html body#constipation-relief a.main-nav-relief, html body#treatment-advisor a.main-nav-relief, html body#pregnancy-kids a.main-nav-pregnancy, html body#children-and-constipation a.main-nav-pregnancy, html body#common-pregnancy-bugbears a.main-nav-pregnancy, html body#what-causes-constipation a.main-nav-pregnancy, html body#men a.main-nav-men {
	color: #006325;
	background-position: 0 -32px;
}
/* Toolbar nav
----------------------------------------- */
html body#symptoms #link-symptoms, html body#painful-poo-symptoms #link-symptoms, html body#symptom-checker #link-symptoms, html body#causes #link-causes, html body#ibs #link-causes, html body#medication-side-effects #link-causes, html body#pregnancy #link-causes, html body#related-conditions #link-causes, html body#stress-constipation #link-causes, html body#how-digestion-works #link-how-digestions-works, html body#constipation-myths #link-constipation-myths, html body#diet-and-lifestyle #link-diet-and-lifestyle, html body#avoiding-constipation #link-avoiding-constipation, html body#faqs #link-faqs, html body#constipation-relief #link-constipation-relief, html body#treatment-advisor #link-treatment-advisor, html body#common-pregnancy-bugbears #link-common-pregnancy-bugbears, html body#children-and-constipation #link-children-and-constipation, html body#embarrassing-questions #link-embarrassing-questions, html body#what-causes-constipation #link-what-causes-constipation {
	background: url(../images/main-nav/toolbar-link.png) 0 0 no-repeat;
	background-size: 14px 10px;
	color: #006325;
}