/* === GLOBAL SETTINGS === */

header, aside, footer {
	display: block;
}

body {
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	background: #CCC;
}

p {
text-indent: 7%;
text-align: left;
font-family: sans-serif, Arial, 'Times New Roman';
color: #00198F;
line-height: 1.5em;
}


/* === LAYOUT === */

.container {
	max-width: 960px;
	margin: 0 auto;
	border: 0.4em solid #00FFFA;
	background: #00DFDB;
}

header {
	background: #DFEBFF;
	border: 0.25em solid #004BFF;
	padding: 0;
}

header h1 {
	text-align: center;
	color: #0C1CCF;
	font-family: Serif, Arial, 'Times New Roman';
	font-size: 1.8em;
	margin: 0;
}

h2 {
	text-align: center;
	color: #000C8F;
	font-family: 'Times New Roman', Arial, sans-serif;
	font-size: 1.5em;
	margin-bottom: 0;
	font-style: italic;
}

h3 {
color: #113F8F;
font-size: 1.2em;
text-align: center;
font-family: 'Times New Roman', Arial, sans-serif;
}

h4 {
color: #FDFF00;
font-size: 1.5em;
font-family: 'Times New Roman', Arial, sans-serif;
font-style: italic;
line-height: 1em;
}

hr {
border: 0.2em double #2FFFF6;
}

.header_image {
	float: left;
	margin: 0.3em 0.5em;
	margin-bottom: 0;
	border: 0.2em solid #004BFF;
}

fieldset {
background: #EFF5FF;
margin: 0.5% 1%;
}

legend {
font-size: 1em;
color: #0200BF;
border: 0.2em solid #0200BF;
text-align: left;
background: #FFF;
font-weight: bold;
padding: 0.4em 1em;
font-family: Arial, sans-serif, 'Times New Roman';
margin-bottom: 2%;
}

label {
font-size: 1.05em;
color: #00085F;
font-family: 'Times New Roman', Serif, sans-serif;
font-weight: bold;
margin-right: 1%;
}

select.show_list_options {
font-size: 0.8em;
font-weight: bold;
background: #EFF5FF;
color: #0012DF;
padding: 0.2em; 
width: 330px; 
}

select.subscribe {
font-size: 0.85em;
font-weight: bold;
background: #EFF5FF;
color: #0012DF;
padding: 0.2em; 
width: 100px;
}

#subscription {
font-size: 0.85em;
font-weight: bold;
background: #EFF5FF;
color: #0012DF;
padding: 0.2em; 
width: 100px;
}

.content { /* 77% */
    float: right;
	width: 74.5%;
	padding: 0.8%;
	background: #5F99FF;
	border: 0.2em solid #004BFF;
	margin-top: 0.5%;
	margin-bottom: 0.5%;
	text-align: center;
}

.content h1 {
border: 0.2em solid #002B6F;
margin-left: 27%;
margin-right: 29%;
padding: 0.5%;
background: #FFF;
font-size: 1.4em;
}

.content h2 {
color: #EF2CC6;
font-size: 1.45em;
border: 0.2em double #EF2CC6;
background: #FFF;
padding: 1%;
}

.content h3 {
color: #FFF;
border: 0.2em solid #00FFF4;
background: #002B6F;
padding: 0.3em;
}

.content p {
border: 0.2em solid #00198F;
background: #FFF;
margin-left: 2%;
margin-right: 2%;
padding: 1%;
padding-left: 2%;
}

.content hr {
clear: both;
}

aside { /* 23% */
	float: left;
	width: 20%;
	padding: 0.2% 1% 5.5% 1%;
	background: #FFFEEF;
	border: 0.2em solid #004BFF;
	margin-top: 0.5%;
	margin-bottom: 0.5%;
}

aside ul {
list-style-type: none;
}

aside p {
font-size: 1em;
font-weight: bold;
color: #00336F;
font-family: Serif, sans-serif, 'Times New Roman';
text-indent: 0;
}

aside .stand_out {
border: 0.2em solid #2292AA;
}

aside .aside_ewp {
text-align: center;
font-family: sans-serif, Serif, 'Times New Roman', Arial;
}

aside h3 {
font-size: 1.05em;
color: #002DFF;
font-weight: bold;
text-align: left;
}

aside h2 {
font-size: 1.2em;
color: #DF0D78;
}

aside a {
text-decoration: none;
font-size: 1em;
font-weight: bold;
color: #2A008F;
}

aside img {
border: 0.2em double #0079AC;
margin-top: 2%;
margin-bottom: 1%;
margin-right: 2%;
text-align: center;
}

footer {
	min-height: 150px;
	clear: both;
	background: #DFEBFF;
	border: 0.3em solid #004BFF;
}

footer p {
color: #0015FF;
font-size: 0.8em;
font-weight: bold;
text-indent: 0%;
text-align: left;
padding-left: 2%;
}

footer h3 {
color: #FF2F99;
text-align: center;
padding-left: 2%;
}

/* === Navigation Menu === */
 
.primary-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #CFFFFA;
	border-top: 4px solid #004BFF;
}
   
.primary-menu li {
	display: inline;
}
   
.primary-menu a {
	text-decoration:none;
	color: #FFF;
	font-weight: bold;
	background: #0F23FF;
	display: inline-block;
	padding: 0.2em 0.3em;
	border: 0.15em solid #FFF;
}
   
.primary-menu a:hover {
	background: #009AEF;
}

/* === Slide Show === */
.rslides {
border: 0.75em groove #0045FF;
}

.ayame {
float: left;
margin: 0.5%;
border: 0.1em solid #7017BF;
}

.footer_img {
text-align: center;
margin: 0 32% 0 32%;
}

/* == Photo Gallery == */

figure img {
background: #FFF;
padding: 0.25em;
margin-bottom: 0.6em;
border: 0.3em solid #0E26EF;
}

figcaption {
font-size: 0.9em;
font-family: 'Times New Roman';
text-align: center;
font-weight: bold;
color: #000A7F;
border: 0.4em double #0012DF;
background: #FFF;
padding: 0.2em;
}

figure {
display: inline-block;
margin: 0 0.75em 1em 1em;
text-align: center;
}

/* == Table styling == */

table {
width: 100%;
background: #FFF;
text-align: center;
font-weight: bold;
font-family: 'Times New Roman', Serif, sans-serif, Vernada;
border: 0.2em solid #00DFDB;
}

td {
line-height: 1.15em;
padding-top: 0.4em;
padding-bottom: 0.4em;
font-size: 1em;
color: #07117F;
}

th {
color: #FFF;
background: #1A278F;
font-size: 1.2em;
font-family: Vernada, 'Times New Roman', Serif, sans-serif;
font-style: italic;
padding: 0.2em;
}

td.th1 {
width: 23%;
font-size: 1em;
}

td.th2 {
width: 25%;
}

td.th3 {
width: 16%;
}

td.th4 {
width: 20%;
}

td.th5 {
width: 21%;
}


td.td1 {
width: 23%;
}

td.td2 {
width: 20%;
}

td.td3 {
width: 18%;
}

td.td4 {
width: 20%;
}

td.td5 {
width: 21%;
}

.td1, .td3, .td5 {
background: #EFF5FF;
color: #00116F;
}

.td2, .td4 {
background: #FFF;
color: #000D9F;
}

#add_clips, #referral_source, #how_know_Patricia, #other_show_list, #other_referral_source, #additional_information, #profession, #profession_other, #other_referral_source2 {
width: 400px;
height: 85px;
}


/* === RESPONSIVE === */

img, embed, object, video {
	  max-width: 100%;
	  height: auto;
}

/* several media queries here in case I want to add styling for specific devices later */

 /* Landscape phones and down == 480px and below */
@media (max-width: 480px) {

   /* Add CSS here */
 
}
 
/* Landscape phone to portrait tablet == 481px to 767px */

/* this also covers devices 480px and below -- but I could provide additional rules for those devices above */
@media (max-width: 767px) {
 
    .content, aside {
        width: auto;
        float: none;
        padding: 1%;
    }
	
	.container {
		background: #FFF;
	}
	
	aside {
		background: #FFFCEF;
 
	}
 }
 
/* Portrait tablet to landscape and desktop == 768px to 979px */
@media (min-width: 768px) and (max-width: 979px) {

   /* Add CSS here */
 
}
 
/* Large desktop == 1200px + */
@media (min-width: 1200px) {

   /* Add CSS here */ 
 
}

/* === PRINT === */

/* print rules must appear last in the stylesheet */

@media print {
 
  * {
      color: #000 !important;
  }
 
   header, nav, aside, footer, .no-print { /* I created a class named no-print that I can add to any element that I don't want to print */
      display: none;
   }
 
   body {
      background: #fff;
      font-size: 12pt;
   }
 
   .container, .content, aside {
      border: none;
      float: none;
      width: auto;
   }
 
} /* ending print curly bracket */