/*  Cody Council 4031 */


	body			{background-color:#f8f8f8; 
				background-image:url('images/bg-blue.gif');
				font-family:arial, helvetica, sans-serif; font-size:14px; font-weight:normal; line-height:25px; color:#333333;
				margin:30px 0px 0px 0px;
 				padding: 0;
 				 word-wrap: break-word !important;}

	*			{ -webkit-box-sizing: border-box; ;/* Safari/Chrome,other WebKit */
				  -moz-box-sizing: border-box;  /* Firefox,other Gecko */
				  box-sizing: border-box; ;/* Opera/IE 8+ */  }

	/*  PAGE LAYOUT WIDTH AND GUTTERS */
	.wrapper			{width:100%; max-width:1000px; margin:0px auto; overflow:auto; border:0px solid red;}
	.gutters			{width:95%; margin:0px auto; overflow:auto; border:0px solid blue;}



	/*  GLOBAL  */
	.left			{text-align:left;}
	.center			{text-align:center;}
	.right			{text-align:right;}
	.justify			{text-align: justify; text-justify: inter-word;}

	.bold			{font-weight:600;}
	.italic			{font-style:italic;}

	.tighten			{line-height:20px;}

	.blue			{color:#024d74;}
	.white			{color:#ffffff;}
	.gold			{color:#987134}

	h1			{font-family:"Times New Roman", Times, serif; font-size:20px; letter-spacing:0.1em; color:#024d74; font-weight:600; line-height:20px; border-bottom:1px solid #024d74; margin-top:30px;}
	h2			{font-family:"Times New Roman", Times, serif; font-size:16px; letter-spacing:0.1em; color:#024d74; font-weight:600; line-height:20px; border-bottom:1px solid #024d74;}
	
	.dropcap 			{float: left; font-family:"Times New Roman", Times, serif; font-size: 50px; line-height: 35px; padding-top:4px; padding-right:6px; padding-left:0px; }

	p.caption			{font-size:11px; margin-top:3px; line-height:normal;}
	p.lyrics			{text-align:left; font-size:12px; margin-top:10px; line-height:18px;}

	a.inline:link		{color:#024d74;}
	a.inline:visited		{color:#333333;}

	.underline		{text-decoration:underline;}
	
	
	.responsive		{display:block; max-width:100%; height:auto; margin:0px auto;}
	.clear			{clear:both;}



	/*  PAGE WITH RIGHT SIDEBAR 70-30  */
	.main-left			{float:left; width:70%; padding:0px 50px 0px 0px; border:0px solid red;}
	.right-sidebar		{float:left; width:30%; padding:20px; background-color:#f8f8f8; border:0px solid blue;}

	/*  50/50 SPLIT  */
	.half-left			{float:left; width:50%;}
	.half-right			{float:right; width:50%; padding-left:60px;}	

	/*  HEADER  */
	#header			{width:100%;}
	.header-emblem		{float:left; width:143px;}
	.emblem			{width:143px; height:149px;}
	.header-council		{margin-left:143px; padding:0px 20px;}
	.kc-banner		{margin-top:30px;}
	h1.council			{text-align:left; font-family:"Times New Roman", Times, serif; font-size:16px; letter-spacing:0.1em; color:#ffffff; font-weight:600; line-height:20px; margin-top:0px;}		


	/*  NAVIGATION  */
	#navigation		{background-color:#024d74; margin:20px 0px;}
	.toggle, [id^=drop] 		{display: none;}
	nav 			{margin: 0; padding: 0; background-color:#024d74;}
	nav:after 			{content: ""; display: table; clear: both;}
	nav ul 			{float: left;  /*  right  */ padding: 0; margin: 0; list-style: none; position: relative;z-index:1000;}
	nav ul li 			{margin: 0px; display: inline-block; float: left; background-color:#024d74;}
	nav a 			{display: block; padding: 0 20px; color:#ffffff; font-size: 14px; line-height: 40px; text-decoration: none;}
	nav ul li ul li:hover 		{background:#000304;}
	nav a:hover 		{background-color:#000304;}
	nav ul ul 			{display: none; position: absolute; top: 40px;}
	nav ul li:hover > ul 		{display: inherit;}
	nav ul ul li 		{width: 200px; float: none; display: list-item; position: relative;}
	nav ul ul ul li 		{position: relative; top: -40px; left: 200px;}
	li > a:after 		{content: ' +'; }
	li > a:only-child:after 	{content: ''; }

	
	/*  INLINE BLOCKS */
	.box			{margin:0px auto; overflow:hidden;  text-align:center; border:0px solid red;} 
	.box-fixed			{display:inline-block; vertical-align:top; width:245px; margin-bottom:20px; border:0px solid black;}

	/*  FOOTER  */
	#footer			{background-color:#024d74; margin-bottom:0px;}
	p.footer			{text-align:left; color:#ffffff; font-size:11px;}
	a.footer			{color:#ffffff;text-decoration:none; font-size:12px;}
	


/*  MEDIA QUERIES  */

/* For width less than 999:   */
@media only screen and  (max-width: 999px)   {
	.main-left			{float:left; width:65%; padding:0px 50px 0px 0px; border:0px solid red;}
	.right-sidebar		{float:left; width:35%; padding:20px; background-color:#f8f8f8; border:0px solid blue;}
}


/* For width less than 768:   */
@media only screen and  (max-width: 768px)   {
	#wrapper			{width:100%; margin-right:20px;}

	.header-emblem		{float:none; width:100%;}
	.emblem			{width:143px; height:149px; display:block; margin:0px auto;}

	.header-council		{margin-left:0px; padding:0px 20px;}
	.kc-banner		{display:block; max-width:100%; height:auto; margin:0px auto;}
	h1.council			{text-align:center; font-family:"Times New Roman", Times, serif; font-size:15px; letter-spacing:normal; color:#ffffff; font-weight:600; line-height:normal;}
	

	nav 			{margin: 0;}
	.toggle + a, .menu 		{display: none;}
	.toggle 			{display: block; background-color: #024d74; padding: 0 20px; color:#ffffff; font-size: 14px; line-height: 40px; text-decoration: none; border: none;}
	.toggle:hover 		{background-color:#000304;}
	[id^=drop]:checked + ul 	{display: block; }
	nav ul li 			{display: block; width: 100%;}
	nav ul ul .toggle,
 	nav ul ul a 		{padding: 0 40px; }
	nav ul ul ul a 		{padding: 0 80px; }
	nav a:hover,
 	nav ul ul ul a 		{background-color:#000304;}
	nav ul li ul li .toggle,
 	nav ul ul a 		{background-color:#024d74;}
	nav ul ul 			{float: none; position: static; color: #ffffff;}
	nav ul ul li:hover > ul,
	nav ul li:hover > ul 		{display: none;}
	nav ul ul li 		{display: block; width: 100%;}
	nav ul ul ul li 		{position: static;}


	.main-left			{float:none; width:100%; padding:0px; border:0px solid red;}
	.right-sidebar		{float:none; width:100%; padding-top:20px; border:0px solid blue;}

	.half-left			{float:none; width:100%;}
	.half-right			{float:none; width:100%; padding-left:0px;}
}


/*  if screen width is less than or equal to 330 px  */
@media all and (max-width : 330px) 
{
	nav ul li 			{display: block; width: 94%;}
	

}	


/* For width less than 260:   */
@media only screen and  (max-width: 260px)   {
	.box-fixed			{display:inline-block; vertical-align:top; width:190px;}

}