/* CSS layout */
/* General and Smartphone CSS below (Mobile First) */
header, nav, footer, main, article, aside, figcaption {display:block} 
/* Why above: the end </ tag of a block element, such as div and p tags, forces a line break in the visible text */
/* older web browsers do not read structured html5 tags as block level elements which have widths, heights, and margin top and bottom */
/* inline elements do not have widths, heights, and margin top and bottom */

body {width:99%; margin:auto;
background-color:#F3E38C;} /* #CFC88C green gold */

h1 {font-size:2em; letter-spacing:2px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff; background-color:#942064; /* Purple */
	border:10px #942066 solid;
	height:40px;
	margin:0px;	padding:0px; padding-right:30px;
	text-align:right; vertical-align:top;}

h2 {font-size:1.7em; clear:both;
	color:#3F6FA9; /* light blue */
	font-weight:bold; font-family:Arial, Helvetica, sans-serif;	
	padding-top:4px; padding-right:36px; min-width:300px;}

h3 {font-family:Arial, Helvetica, sans-serif; font-size:1.3em; font-weight:bold}

p {color:#0C0C80; font-size:1.2em; text-align:justify; padding-right:2em}
p:first-letter {font-size:1.4em}

a {color: #0C0C80; font-weight:bold}
.li a {color: #0C0C80; font-weight:bold; text-decoration:underline}

ul {list-style-image:url('images/hole.gif'); padding-right:2em}
ol {padding-right:2em}

hr {color:#eee; background-color:#FFF; width: 100%; height:1px; border:0}

table {border:4px solid #942064;
	background-color:#F5F5DC; /* very light linen-white */
	width:100%;
	padding:4px;
	font-family:Verdana, Geneva, Tahoma, sans-serif;}
th {background-color:#942064; color:#fff; font-weight:normal; height:2em; vertical-align:middle}
tr {vertical-align:top}
td {padding-right:12px}

input, select, textarea {font-size:16px;}

blockquote {font-family:"Comic Sans MS", "Monotype Corsiva", "Lucida Handwriting", Script}

#google_translate_element {float:left}
	
#social {float:left; clear:both; padding:0px 12px 10px 0px;}
#social img {border:0}
#social a {border-bottom:0;}
ul.social {margin:0; padding:0;}
ul.social li {float:left; list-style-type:none; list-style-image:none; margin-left:-15px;}
ul.social a {display:block; height:44px; width:62px; margin-right:0px; /* image plus shadow = 44 */
   background:url('images/social_iconsNew.gif') no-repeat left top;} 
   /* 428px is image width; 428px-44px=384px for left position of last icon*/
ul.social span {display:none;}
ul.social li:nth-child(2) a {background-position:-128px 0px;} /* Blog (384- 4x64) */
ul.social li:nth-child(3) a {background-position:-192px 0px;} /* YouTube (384- 3x64) */
ul.social li:nth-child(4) a {background-position:-384px 0px;} /* LinkedIn = very last one (428 (length on all images) - 44 (image + shadow)) */

ul.social a:hover{background-position:0px -56px}
ul.social li:nth-child(2) a:hover {background-position:-128px -56px;}
ul.social li:nth-child(3) a:hover {background-position:-192px -56px;}
ul.social li:nth-child(4) a:hover {background-position:-384px -56px;}

#container {width:100%; max-width:1000px; height:auto;
margin:auto; padding-bottom:24px;
background-color:#F3E38C;}	/* gold-yellow */

#titleBar {display:none}

main {width:100%; max-width:940px; padding:25px;}
main a:hover {color:#942064;}
main li {font-size: 1.1em; font-family:Georgia, "Times New Roman", Times, serif; padding-bottom:14px}

.ribbonEdgeLeft {
	border-color: #942064 #942064 #942064 #3F6FA9;
	border-style:solid;	border-width:30px;
	height:0px;	width:0px;
	position: relative;
	left:-40px;	top:-60px;}

.ribbonEdgeRt {
	border-color: #942064 #3F6FA9 #942064 #942064;
	border-style:solid;	border-width:30px;
	height:0px;	width:0px;
	position: relative;
	left: 980px; top:-120px;}

img {max-width:90%; height:auto; padding-left:12px; text-align:center}
.imgFrame, .imgFrameWide {width:90%; box-shadow: 3px 10px 20px #333F63; border:2px #942064 solid; border-radius:8px; padding-left:0; margin-bottom:14px; margin-left:0px;}

/* slideShow is just for border effects */
#slideShow {max-width:292px; max-height:170px; margin:auto; margin-bottom:14px;
	border:2px #942064 solid;
	background-color:#FFF; padding:6px; /* white frame */
	clear:both;
    box-shadow: 3px 10px 20px #333F63;
 /* box-shadow: x (shift to right) y (shift to bottom) blur (how far blur shadow is spread) color; */          
    border-radius:12px;}
iframe {width:100%; height:auto; border:0}

.button {
	color:#F5F5F5; background-color:#942064;
	font-size:20px;	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:2px;
	border: 2px #000 solid;	border-radius:6px;
    box-shadow: 0px 6px 18px #313;
 /* box-shadow: X   Y    blur color; */
	font-family: arial, helvetica, sans-serif;
	font-size:12pt;	font-weight:bold;
	text-decoration:none;
	padding:8px 4px;}

.button:hover {color:#942064; background-color:#F3E38C; /* Purple - gold */
	text-decoration:none;}

.inputBox {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    border-top: 1px solid #3F6FA9;
    border-bottom: 2px solid #3F6FA9;
    border-left: 1px solid #3F6FA9;
    border-right: 2px solid #3F6FA9;
    padding-left:8px;}

.formText {text-align:right}

.smaller {font-size:.8em}

.box-shadow {
    box-shadow: 0px 10px 35px #313;
 /* box-shadow: X   Y    blur color; */
    border-radius:8px;
               /* TL  TR  BR  BL */
}

.h1-shadow {
	background-image:url('images/holesShadow.gif');
	background-repeat:no-repeat;
    box-shadow: 0px 8px 22px #313;
 /* box-shadow: x (shift to right) y (shift to bottom) blur (how far blur shadow is spread) color; */
    border-radius:0px;}

.Required {color:#942064; font-weight:bold;}

footer {color:#F3E38C; background-color:#942064; /* purple */
	clear:both;	text-align:center;
	margin-bottom:10px; padding-left:1em; padding-right:1em;
    border-radius:0px 0px 14px 14px;}
               /* TL  TR  BR    BL */          
footer a {color:#fff;}
footer a:hover {color:#F3E38C;} /* gold */

nav {background-image:url('images/PulmonicaHeader.png'); background-repeat:no-repeat; background-size:100% 100%;
  overflow: hidden; max-width:1000px; margin:auto;text-align:center;
  box-shadow: 0px 10px 35px #313;
  padding-top:40px; padding-bottom:40px; /* this sets the nav height */
  padding-left:1%; padding-right:1%;
  border-radius:14px}

nav a#pullMenu {width:82px; height:18px; line-height:18px; background-color:#F3E38C; color:#942064; vertical-align:top; border-radius:6px; border:2px #000 solid;}
nav .pullText {}
nav ul {display:none; margin:0; padding: 0; white-space:nowrap;} 
nav li {width:30%; margin:1px 0px; list-style-type: none; list-style-image:none;}
nav a {text-decoration:none; display:block; line-height:22px; /* line-height will verticaly align center */
	font-size:1em;
	padding-top:6px; padding-bottom:6px;	
	font-weight:bold; font-family:Arial, Helvetica, sans-serif;	
	text-align:center; border-radius:6px;
	color:#fff;	background-color:#000;
	border: 1px #eee solid;}
nav a:hover {color:#942064; background-color:#F3E38C;} /* Purple - Gold */	
nav a.selected {color:#000;	background-color:#fff;}

/* *** BEGIN MEDIA QUERIES ** */

@media only screen and (min-width:420px) {
#social {float:right; clear:none}
img {max-width:400px;}
.imgFrame {max-width:360px}
.imgFrameWide {width:400px}
}  /* / 420px */

@media only screen and (min-width:600px) {
nav {background-image:url('images/PulmonicaHeader.png'); display:block; padding-bottom:20px;
padding-top:160px; padding-bottom:16px; padding-left:19%;padding-right:1%}
nav a#pullMenu {display:none}
nav ul {display:inline}
nav li {display:inline;
	margin:0px;	padding-right:2px;
	list-style-type: none;}
nav a {display:inline;
	padding-top:8px; padding-bottom:8px;	
	font-weight:bold; font-family:Arial, Helvetica, sans-serif;	
	text-align:center; text-decoration:none;
	color:#fff;	background-color:#000;
	border: 2px #001 solid;	
    border-radius:6px;}
nav a:hover {color:#942064; background-color:#F3E38C;} /* Purple - Gold */	
nav a.selected {color:#000;	background-color:#fff;}
nav a {font-size:.9em;}
#slideShow {max-width:440px; max-height:248px; margin:auto}
iframe {width:440px; height:248px; margin:auto; text-align:center; padding-left:0; margin-left:0}
img {padding-left:24px; max-width:440px;}
.imgFrame {margin-left:24px}
.imgFrameWide {width:440px; margin-left:24px}
} /* / 600px */

@media only screen and (min-width:676px) {
#titleBar {width:100%; max-width:1000px; height:42px; display:block;
	color:#F3E38C; background-color:#942064;
	text-align:right; vertical-align:middle;}
header, nav {max-width:1000px; margin:auto;}
nav a {font-size:1em;}
img {float:right; padding-left:24px;}
} /* / 676px */

@media only screen and (min-width:1000px){
body {max-width:1200px; margin:auto;
background-color:#F3E38C; /* #CFC88C green gold */
background-image:url('images/BG.gif');
background-repeat:repeat-x;}
nav a {font-size:1.1em;}
#wrapper {margin-top:10px; background-color:#3F6FA9;} /* Slate Blue */
#slideShow {float:right; margin:18px 12px 18px 18px}
} /* / 1000PX */