/*
Theme Name: Natural Glow
*/

@charset "UTF-8";

/* Resetting Default Styles */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img { 
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img { 
	border:0;
}

address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}

strong, b {
	font-weight: bold;
}

em {
	font-style: italic;
}

ol,ul {
	list-style:none;
}

/* ---- Body & Main Elements ---- */

body {
	margin: 0 auto;
	background-color: #c0c0c0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	text-align: center;
}

p {
	font-size: 13px;
	color: #222;
	margin: 0;
	padding: .6em 0;
	line-height: 16px;
}

li {
	font-size: 13px;
	line-height: 16px;
}

ul {
	margin: 10px 0;
	list-style-type: disc;
	padding-left: 30px;
}

ol {
	list-style-type: decimal;
}

h1 {
	font-size: 120%;
	font-family: Georgia, Times New Roman, Times, serif;
	font-style: italic;
	color: #323d7a;
	font-weight: normal;
	margin: 0;
}

h2 {
	font-size: 110%;
	font-family: Georgia, Times New Roman, Times, serif;
	font-weight: normal;
}

h3 { 
	font-size: 110%;
	font-family: Georgia, Times New Roman, Times, serif;
	font-weight: normal;
	padding: 0;
	margin: 8px 0;
}

h4 {
	font-size: 13px;
	font-weight: bold;
	margin: 15px 0 5px 0;
}

table, tr, td {
	border: none;
	padding: 0;
}

object {
	margin: 8px 0;
	padding: 0;
	border: none;
}

img {
	border-style: none;
}

#sidebar object {
	margin: 0;
	padding: 0;
	border: none;
}

/* Anchors */

a:link {
	color: #323d7a;
	text-decoration: none;
	border: none;
	padding: 0;
	margin: 0;
}

a:visited {
	color: #323d7a;
	text-decoration: none;
	border: none;
	padding: 0;
	margin: 0;
}

a:hover {
	color: #79a2d2;
	text-decoration: none;
	border: none;
	padding: 0;
	margin: 0;
}

a:active {
	color: #000;
	text-decoration: none;
	border: none;
	padding: 0;
	margin: 0;
}

#menu a {
	display: block;
	margin: 0;
	padding:0 8px;
}

#menu a:link {
	color: #323d7a;
	background-color: #fff;
	text-decoration: none;
	border: none;
	margin: 0;
}

#menu a:visited {
	color: #323d7a;
	background-color: #fff;
	text-decoration: none;
	border: none;
	margin: 0;
}

#menu a:hover {
	color: #fff;
	background-color: #323d7a;
	text-decoration: none;
	border: none;
	margin: 0;
}

#menu a:active {
	color: #999;
	background-color: #dae6f4;
	text-decoration: none;
	border: none;
	margin: 0;
}

#menu .current_page_item {
    pointer-events: none;
}

#menu .current_page_item a {
    color: #999;
}
 
#central_content_container a:link {
	color: #323d7a;
	border: none;
	padding: 0;
	margin: 0;
}

#central_content_container a:visited {
	color: #323d7a;
	border: none;
	padding: 0;
	margin: 0;
}

#central_content_container a:hover {
	color: #79a2d2;
	border: none;
	padding: 0;
	margin: 0;
}

#central_content_container a:active {
	color: #000;
	border: none;
	padding: 0;
	margin: 0;
}

#sidebar a:link {
	color: #323d7a;
	border: none;
	padding: 0;
	margin: 0;
}

#sidebar a:visited {
	color: #323d7a;
	border: none;
	padding: 0;
	margin: 0;
}

#sidebar a:hover {
	color: #999;
	border: none;
	padding: 0;
	margin: 0;
}

#sidebar a:active {
	color: #fff;
	border: none;
	padding: 0;
	margin: 0;
}

#footer a:link {
	color: #323d7a;
}

#footer a:visited {
	color: #323d7a;
}

#footer a:hover, a:active {
	color: #79a2d2;
}

/* Anchors styled as buttons */

a.button {
	padding: 5px 10px !important;
	font-size: 110%;
	border: 1px #c0c0c0 solid !important;
	border-radius: 4px;
	background-color: #eee;
	color: #323d7a;
	text-decoration: none;
	transition: 0.3s all ease;
}

a.button:hover {
	background-color: #eee;
	cursor: pointer;
	transition: 0.3s all ease;
}

a.button:active {
	background-color: #ddd;
	cursor: pointer;
	transition: 0.3s all ease;
}

p.button_margins {
	margin: 10px 0 15px 0;
}




/* ---- Menu & Header Styles ---- */

#header {
	margin: 25px auto 0 auto;
	width: 800px;
	height: 164px;
	text-align: center;
}

.white-stripe {
	height: 10px;
	background-color: #fff;
}

#logos {
	background-color: #1e2553;
	height: 154px;
}

#NG-logo {
	float: left;
}

#Canteen-logo {
	float: right;
}

div#menu {
	height: 27px;
	width: 800px;
	margin: 0 auto;
	background-color: #fff;
}

#menu img {
	border: none;
	padding: 0;
}

#all_content_container img {
	border: none;
	padding: 0;
	margin: 0;
}

#menu {
	text-align: left;
	position: relative;
}

#menu ul, li {
	margin: 0;
	padding: 0;
}

#menu ul {
	list-style-type: none;
}

#menu li {
	font-size: 15px;
	line-height: 27px;
	display: block;
	height: 27px;
	background-color: #fff;
	padding: 0 8px;
	margin: 0;
}

ul#main_menu {
	padding: 0;
	height: 27px;
	text-transform: uppercase;
}

ul.menu_horizontal li {
	float: left;
}

/* ---- Content Container, Main Content, Sidebar, Footer ---- */

#all_content_container {
	width: 800px;
	overflow: auto;
	border-top: 1px solid #c0c0c0;
	border-right: none;
	border-bottom: none;
	border-left: none;
	background-position: center top;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

#central_content_container {
	width: 100%;
	overflow: auto;
	background-color: #dae6f4;
}

#main_content {
	width: 600px;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#main_content_td {
	background-color: #fff;
	vertical-align : top;
	padding: 15px 0 0 0;
	float:left;
}

#sidebar {
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#sidebar_td {
	background-color: #dae6f4;
	vertical-align : top;
	float:right;
}

#footer {
	width: 100%;
	text-align: center;
	margin: 0 0 16px 0;
}

#footer p {
	color: #667;
	font-size: 12px;
	font-style: normal;
	text-align: center;
}

#facebook {
	vertical-align: bottom;
	padding: 0 25px 20px 25px;
	text-align: right;
}

/* Products Page */

.clear-both {
	clear: both;
}

.separator {
	padding: 10px;
}

.box {
	float: left;
	width: 170px;
	text-align: center;
	padding: 10px 0 10px 0;
	margin: 0 20px 20px 0;
	background-color: #fff;
	border: 1px solid #c0c0c0;
}

.box-links {
	background-color: #eee;
	padding: 2px;
	margin: 10px 10px 0 10px;
}

.product-right {
	float: left;
	width: 340px;
	margin: 0 0 10px 0;
}

.input_button input {
	margin: 0 0 0 20px;
}

.bulleted {
	margin: 0.5em 0 0.5em 2.5em;
}

#main_content img[align=right] {
	margin: 0 0 5px 10px;
}

.multipack_price {
	font-weight: bold;
	color:#323D7A;
}

/* New! image */

.new_image_div {
	height: 20px;
	overflow: visible;
}

div.new_image_div img {
	position: relative;
	left: -40px;
	top: -50px;
}


/* Contact Page */

.contact_table_left {
	width: 80px;
	vertical-align: top;
}

.contact_table_right {
	width: 497px;
	vertical-align: top;
}

/* Competition Page */

#comp_left {
	float: left;
	width: 300px;
	padding-top: 10px;
	min-height: 120px;
}

#comp_right {
	float: right;
	padding-left: 15px;
}


/* Special elements (span classes) */

.text {
	margin: 0 25px 15px 25px;
}

.text_sidebar {
	margin: 0 17px 15px 17px;
}

.centre {
	margin: 0 auto;
	text-align: center;
}

.grey {
	color: #999;
}

.blue {
	color: #323d7a;
}

.col-white-stripe {
	height: 2px;
	background-color: #fff;
	width: 100%;
	margin: 0 0 10px 0;
}

img.align-left {
	float: left;
	margin: 0 10px 5px 0 !important;
}

img.align-right {
	float: right;
	margin: 0 0 5px 10px !important;
}

img.align-centre {
	margin: 0 auto 10px auto !important;
}

div.bannerBackground {
	background-color: #dae6f4;
	padding: 10px 10px 5px 10px;
}


/**
 * FormBuilder Styles by Jonathan Nicol (F6 Design)
 * Semantic example - for the default FormBuilder markup
 * Feel free to modify these rules to suit your site's design!
 */

/* Form */
.fbform {
	background: #f0f0f0;
	margin: 15px 0;
	padding: 15px;
	font-size: 13px;
	color: #222;
	overflow: auto;
    width: 94.7%;
	}
	/* regular fieldset */
	.fbform fieldset {
		border: none;
		border-top: 1px solid #333;
		clear: both;
		margin: 20px 0 10px 0;
		padding: 0;
		}
		/* fieldset containing submit btn */
		.fbform fieldset.fbsubmit {
			border: 0;
			margin: 0;
			padding: 0;
		}
	/* legend */
	.fbform legend {
		color: #333;
		font-size: 1.1em;
  		font-weight: bold;
  		margin-bottom: 10px;
  		padding: 0 5px;
  		}
  	.fbform dl {
		margin: 0;
	}
  	.fbform dt {
  		clear: both;
  		display: block;
  		float: left;
  		margin: 10px 0 0 5px;
  		padding: 0;
  		width: 140px;
		color: #323d7a;
	}
  	.fbform dd {
  		display: block;
  		float: left;
  		margin: 10px 0 10px 0;
		padding:0;
		width: 370px;
  		}
  		/* field instructions */
  		.fbform dd p {
  			font-size: 0.8em;
  			margin: 5px 0 0 0;
  			}
  		.fbform dd label {
  			display: block;
  			}
  	/* dividers */
  	.fbform dd.fbformdivider {
  		border-bottom: 1px solid #ccc;
  		clear: both;
  		float:none;
  		height: 1px;
		margin: 0 0 5px 0;
		overflow: hidden;
		width: auto;
  		}
  		.fbform dd.fbformdivider.fblast {
	  		display: none;
	  		}
.fbtextfield, .fbselect {
	background: #fff;
	width: 230px;
}
.fbtextarea {
	/* textarea tends to override font settings, so we will re-specify them here */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	color: #222;
}
.fbradio {
	/* style radio buttons here, if need be */
	}
.fbcheckbox {
	/* style checkboxes here, if need be */
	}
.fbsubmitbtn {
	margin: 10px 0;
}
.fbfielderror {
	color: #e00000;
}
.fbrequired {
	color: #e00000;
}
/* Error Message */
.fbformerrormessage {
	background: #f9ecec;
	border: 3px solid #e00000;
	margin: 10px 0 15px 0;
	}
	.fbformerrormessage h2 {
		background: #e00000;
		color: #fff;
		font-size: 1.5em;
		padding: 10px 15px;
		margin: 0;
		}
	.fbformerrormessage ul {
		margin: 15px 0;
		padding: 0 15px;
		list-style-type: none;
		}
/* Thanks Message */
.fbthanks {
	background: #f1fcf1;
	border: 3px solid #02b602;
	margin: 10px 0 15px 0;
	}
	.fbthanks h2 {
		background: #02b602;
		color: #fff;
		font-size: 1.5em;
		margin: 0;
		padding: 10px 15px;
		}
	.fbthanks p {
		margin: 10px 0;
		padding: 0 15px;
		}
		.fbthanks p a {
			/* style the thanks link here, if need be */
			}
			
/* SLICK NAVIGATION */
.mobile-navigation {
    margin: 0 auto !important;
    width: 100% !important;
	display: none;
}

.mobile-navigation  .slicknav_menu {
	background-color: #ffffff !important;
	padding: 0px !important;
}

.mobile-navigation .slicknav_menu a.slicknav_btn {
	background-color: #323d7a !important;
	display: inline-block !important;
    float: none !important;
	margin: 5px !important;
    padding: 6px 8px !important;
}

.mobile-navigation .slicknav_menu .slicknav_icon {
	margin: 2px !important;
}

.mobile-navigation .slicknav_menu .slicknav_nav {
	padding: 0;
	text-transform: uppercase;
}

.mobile-navigation .slicknav_menu li {
	font-size: 15px;
	line-height: 27px;
	height: 27px;
	background-color: #fff;
	padding: 0px;
	margin: 0;
}

.mobile-navigation .slicknav_menu a {
	display: block;
	margin: 0;
	padding:0 8px;
}

.mobile-navigation .slicknav_menu a:link {
	color: #323d7a;
	background-color: #fff;
	text-decoration: none;
	border: none;
	margin: 0;
}

.mobile-navigation .slicknav_menu a:visited {
	color: #323d7a;
	background-color: #fff;
	text-decoration: none;
	border: none;
	margin: 0;
}

.mobile-navigation .slicknav_menu a:not(.slicknav_btn):hover {
	color: #fff;
	background-color: #323d7a;
	text-decoration: none;
	border: none;
	margin: 0;
	border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
}

.mobile-navigation .slicknav_menu a:active {
	color: #999;
	background-color: #dae6f4;
	text-decoration: none;
	border: none;
	margin: 0;
}

.mobile-navigation .slicknav_menu .current_page_item {
    pointer-events: none;
}

.mobile-navigation .slicknav_menu .current_page_item a {
    color: #999;
}	


/* SLIDER */

#main_content p + .text .centre {
    display: block !important;
    height: auto !important;
}

.slider-animation {
	display: block;
	height: 200px;
	width: 100%;
	position: relative;
	margin-bottom: 0.6em;
}

.slider-animation .item {
	display: none;
	position: relative;
	z-index: 0;
}

.slider-animation .item  img {
	position: absolute;
	top: 0;
	left: 0;	
}

#item-4 img.img-1,#item-5 img.img-2,#item-5 img.img-3 {
	z-index: 1;
}

#item-5 img:last-child {
    z-index: 0;
}

#item-5 img {
    z-index: 1;
}

.slider-animation  #item-0 {
	position: relative;
	z-index: -1;
}

.slider-animation #item-0  img {
	position: absolute;
	top: 0;
	left: 0;
}

/* for XS size mobile devices */
@media only screen and (max-width:768px) {
	body {
		margin-top: -35px !important;
		overflow-x: hidden;
	}
	
	img {
		max-width: 100% !important;
		height: auto !important;
	}
	
	#header {
		width: 100% !important;
		height: auto !important;
	}
	
	#NG-logo {
		max-width: 100%;
	}

	#NG-logo img {
		height: auto !important;
		max-width: 100% !important;
	}
	
	#Canteen-logo {
		display: none;
	}
	
	/* Menu */
	
	div#menu {
		display: none;
	}
	
	.mobile-navigation {
		display: block;
	}
	
	/* Slider */
	
	.slider-animation {
		width: 550px !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		margin-bottom: 0.6em !important;
	}
	
	.slider-animation .item {
		max-width: 100% !important;
	}
	
	/* Content */
	#all_content_container {
		width: 100% !important;
	}
	
	#main_content_td, #sidebar_td {
		float: none !important;
	}
	
	#main_content {
		width: 100% !important;
	}
	
	/* 
	Make the Facebook Like box responsive (fluid width)
	https://developers.facebook.com/docs/reference/plugins/like-box/ 
	*/

	/* 
	This element holds injected scripts inside iframes that in 
	some cases may stretch layouts. So, we're just hiding it. 
	*/

	#fb-root {
		display: none;
	}

	/* To fill the container and nothing else */

	.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
		width: 95% !important;
	}
	
	/* Responsive Facebook Plugin END */
	
	#central_content_container > div#sidebar_td {
		margin: 15px 25px !important;
	}
	
	#central_content_container #sidebar_td #sidebar {
		float: none !important;
		margin: 0 auto !important;
	}
	
	
	/* Products */	
	.product-right {
		max-width: 100% !important;
	}
	
	/* Form */
	.fbform {
		overflow: none;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	
	.fbform dt, .fbform dl, .fbform dd {
		width: 100% !important;
	}
	
	.fbtextarea, .fbtextfield, .fbselect {
		max-width: 100% !important;
	}
}