/*******************************************************************************
    Theme Name: HTML5 CSS3 Stylesheet
    Date: April 4, 2015
	Description: CSS3 for K of C Website
	Version 1.0
	Author: Dennis M. Smith
	Updated: November 3, 2015
*******************************************************************************/

/* CSS for using HTML5 structural tags in older browsers */
header, hgroup, menu, nav, section, article, aside, figure, figcaption, details, footer {
	display: block;
}

/* Styles for the elements */
body {
/* 	background-color: #3366FF; */
	background-color: #3399FF; 

 
/*	background-color: #0066FF; */ /* rgb(0, 102, 255);  */
	/**************************************************************************************
	#0066FF Hex Color for the Web has the RGB values of 0, 102, 255 and the CMYK colour values of 1, 0.6, 0, 0. 
	This web color is described by the following tags: BLUE, BLUE RIBBON. 
	**************************************************************************************/
	font-family: Arial, helvetica, sans-serif, Times New Roman;
	font-size: 85%;
	margin: 0 auto;
	padding: 0;
	width: 900px;   /* Made this wide to accomidate navigation menu*/
}
	
header {
	height: 250px;
	/* set background as a linear gradient */
/*
	background-image: -moz-linear-gradient(top, #66CCFF 0%, #3366FF 100%);
	background-image: -webkit-linear-gradient(top, #66CCFF 0%, #3366FF 100%);
	background-image: -o-linear-gradient(top, #66CCFF 0%, #3366FF 100%);
	background-image: linear-gradient(top, #66CCFF 0%, #3366FF 100%);	

	background-image: -moz-linear-gradient(top, #3366FF 0%, #66CCFF 100%);
	background-image: -webkit-linear-gradient(top, #3366FF 0%, #66CCFF 100%);
	background-image: -o-linear-gradient(top, #3366FF 0%, #66CCFF 100%);
	background-image: linear-gradient(top, #3366FF 0%, #66CCFF 100%);	
*/	
}	

div, h1, h3, p {
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 140%;
}
p {
	padding-bottom: 15px;
}

/* give style to links within paragraphs */
p a:link {
	background-color: #ffff66;
	width: 35%;
	border-radius: 20px 20px 20px 20px;
	padding: 1px;
}
	
section h1 {
	margin-left: 50px;
		
}

header h1 {
	padding: 3%;
	text-align: center;
}

header h2 {
	padding: 3%;
	text-align: center;
}

header img {
	float: left; 
	padding-right: 10px;
}

figure {
	margin-top: 0px;
	float: right;
	margin-right: 10px;
	padding: 0px;
	display:table;		/* Note A: figure/Figcaption */
}

figcaption {
	font-weight: bold;
	text-align: center;
	display:table-caption;caption-side:bottom;  	/* Note A: figure/Figcaption */
}

/**************************************
 Note A: figure/Figcaption:
	Without these two additions/updates text renders to the right of image instead of below in IE8.
***************************************/
#logo {
    margin-top: 0px;
	float: left;
	margin-right: 10px;
	padding: 0px;
	display:table;		/* Note A: figure/Figcaption */
}


#figlogo {
	font-style: italic;
}

section {
	clear: both;
	height: 60%;
	margin: 40px 20px 0px 30px;   /* Top Right Bottom Left */
	padding: 70px 10px 0px 10px;
}

#container{
	margin-top: 20px;
	width: 100%;
	height: 40px;
}
/* create rounded corners on main menu bar (horizontal) */
.child{
	border-bottom-left-radius: 30px;
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
	border-top-right-radius: 30px;
	margin: 2px;
	font-size: 82%;
}

/* removes the default styles */
.menu {
	list-style:none;
	
}
.menu li {
	z-index: 9999; 
	display: block;
	height: 40px;
	width: 135px;
	float: left;
	background-color: grey;
	line-height: 40px;
	text-align: center;
	border-right: 2px solid #000000;
	font-family: sans-serif, New Times Roman, Arial;
	padding-right: 1px; 
	
}

.menu li a {
	font-size: 130%;
	font-style: normal;
	color: #FFFFFF;
}

.menu li:hover {

	background-color: #660033;
	/* add rounded edges to sub menus on hover */
	border-bottom-left-radius: 30px;
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
	border-top-right-radius: 30px;
}
.sub{
	visibility: hidden;
	}
.menu li:hover .sub {
	visibility: visible;
}
.sub li {
	border-top: 1px solid black;
	-moz-transition:all .1s ease 0s;  /*  .1 sec ease with zero second delay transisition  */
	-ms-transition:all .1s ease 0s; 
	-o-transition:all .1s ease 0s; 
	-webkit-transition:all .1s ease 0s; 
	transition:all .1s ease 0s; 
	/* add rounded edges to sub menus */
	border-bottom-left-radius: 30px;
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
	border-top-right-radius: 30px;
}

.menu li:hover a {
	color: #FFFFFF;
	font-size: 120%;
	font-style: bold;
	font-size: 150%;
}

/* color the text of sub menu so you can see it */
.menu li:hover .sub li a {
	color: #FFFFFF;
	font-size: 150%;
}
.lastLi {
 /* make rounded edges of nav list */
	border-bottom-left-radius: 10px;  
	border-bottom-right-radius: 10px;
	margin-top: -5px;

}
.sub li:hover{
	background:background: #f7fbfc;
	width: 150px;                                     /* focus link will stick out a little more than others as hover passes over */

	/* need to add for old browsers still!!!! */
	
}


blockquote {
	/* text-indent: 2em; */
	font-family:  Times New Roman, Arial, helvetica, sans-serif;
	font-size: medium;
}

/***********************************************************
 give style to links within blockquotes 
 Note: this matches the p a:link tag css above.
 ***********************************************************/
blockquote a:link {
	background-color: #ffff66;
	width: 35%;
	border-radius: 20px 20px 20px 20px;
	padding: 1px;
}

/*************************************************
section__insurance 
Style for insurance agent information
**************************************************/	
#insurance {
	margin-left: 20%;
	font-size: 130%;
}
footer { 
	clear: both;
	margin: 1em; 
	padding-top: -10px;
	
}
footer p {
	font-size: 90%;
	font-style: italic; 
	text-align: center;
	border-top: 2px solid #660066;
	padding-top:10px;
}

#updated {
	text-align: right;
	border-top: 0px solid black;
	padding-top: 0px;
	padding-bottom: 10px;
}

.icon {
	list-style:none;
}
.icon li {
	display: block;
	height: 40px;
	float: left;
	text-align: left;
	padding-right: 5px; 
	padding-top: 5px; 
}
	

	
/* Styles for Home Company Picture page */	
/* the styles for the right sidebar */
aside {
	width: 200px;
	float: right;
	padding: 20px 0;
}
aside img {border: none;}

/* the styles for the carousel */
#carousel {
	margin: 10px 0 0 0;
	padding:0;
	width:400px;
	height:125px;
}
.button	{
	margin:45px 10px 0 10px;
	float:left;
	height:25px;
	width:25px;
}
.panel {
	margin:0;
	overflow:hidden;
	position:relative;
	float:left;
	width:300px;
	height:125px;
}
.panel-inner {
	left:0;
    position:absolute;
    height:125px;
    list-style:none;
    margin:0;
    padding:0
}
.panel-inner li	{
	text-align: center;
	padding: 0;
	margin: 1px 1px 0 0;
	float: left;
	width: 100px;
	height: 125px;
	background: #FFF
}
.panel-inner li img	{
	width: 100px;
	height: 125px;
	margin: 1px 0 0 1px
}

/***********************************************
class goTop is used to add a link to the bottom of each page
which will return user/ focus to the top of the page.
************************************************/
.goTop {
	background-color: #ffff66;
	border-radius: 20px 20px 20px 20px;
	padding: 7px;
	margin-left: 80%;
}



	
	/*  Make pages RESPONSIVE for mobile devices */
/* work within borders when size of area changes  */
/* Basically you copy everything down and remove what you want to remain as is and update what you want to change */
@media only screen and (min-width: 150px) and (max-width: 600px)
{
















}