/* Colors  - Desat
	/* Main: Green 
	--mainLight: #EBFAEB;
	--mainMid:   #80B280;
	--mainDark:  #4D6B4D;
	/* Sub: Blue 
	--subLight:  #A6C3EE;
	--subMid:    #4D87DD;
	--subDark:   #2E5185;
	/* Highlight: Orange 
	--highLight: #FFD1B2;
	--highMid:	 #FF7159;
	--highDark:  #662900;	
*/

/* ---------------------------- */
/* ------ Bare Elements ------- */
/* ---------------------------- */

body {
background-color: #EBFAEB;
padding: 0px;
margin: 0px;
}

/* h1
Large orange text
currently used as calc header
*/
h2 {
color: #662900;
margin: 0px;
margin-left: 5%;
padding: 0px;
font-family: helvetica;
}

/* h2
Large orange text
currently used as a quote
*/
h2 {
color: #662900;
margin: 0px;
margin-left: 35%;
padding: 0px;
font-family: helvetica;
}

/* h3
Sub-h2 dark blue text
currently used as a quote attribution
*/
h3 {
color: #2E5185;
margin: 0px;
margin-left: 60%;
padding: 0px;
font-family: helvetica;
}

/* h4
Orange header text
Used for section titles inside text bubbles
*/
h4{
font-family: helvetica;
color: #662900;
}
input[type="number"]{
width:50px;
}

/* ---------------------------- */
/* ------ Header Elements ----- */
/* ---------------------------- */

/* .header
The container around the page title and the nav bar 
*/
.header {
margin: 0px;
padding: 0px;
position: fixed;
width:100%;
top: 0px;
background-color: #EBFAEB;
}

/* .headerBorder
The container around the title img and the navbar
Maybe redundant?
*/
.headerBorder{
margin: 5px;
padding: 2px;
}

/* .headerLine
The seperator lines in the header. 
Above and below the navbar.
headerLineB is used in the pricing calculator
and simply required some margin.
*/
.headerLine{
text-align: center;
height: 3px;
background-color: #80B280;
border: 1px dashed #4D6B4D;
}.headerLineB{
text-align: center;
height: 3px;
background-color: #80B280;
border: 1px dashed #4D6B4D;
margin: 5px;
}

/* .navBar
The container around the buttons in the header
*/
.navBar {
width: 505px;
margin-left: auto;
margin-right: auto;
}

/* .btnNotSel
A div that represents the button in the navbar.
This is what the button looks like when
the page is not currently shown 
*/
.btnNotSel{
background-color: #80B280;
border: 1px dashed #4D6B4D;
color: #EBFAEB; 
display: inline-block;
font-family: helvetica;
text-align: center;
margin: 5px;
padding: 5px;
width: 100px;
} 
.btnNotSel:hover{ color: #FF7159; } 

/* .btnSel
A div that represents a button in the navbar
This is what it looks like when the page 
is currently being shown.
*/
.btnSel {
background-color: #4D6B4D;
border: 1px dashed #2E5185;
color: #EBFAEB; 
display: inline-block;
font-family: helvetica;
text-align: center;
margin: 5px;
padding: 5px;
width: 100px;
}

/* ---------------------------- */
/* ------ Images -------------- */
/* ---------------------------- */

/* .imgBorderGreen
The green pattern strip at the top of the header 
*/
.imgBorderGreen{
background-image: url("img/banner2.png");
background-size: 600px 45px;
margin: 0px;
padding: 0px;
padding-top:10px;
width: 100%;
height: 35px;
text-align:center;
color: #662900;
font-family: helvetica;
font-size: xx-large;
}

/* .titleImage
The logo at the top of the page
*/
.titleImage {
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
background-image: url("img/7elqcTitleBanner.jpg");
background-size: 100% 100%;
height: 90px;
width: 800px;
border: 1px solid #4D6B4D;
border-radius: 5px 37px 37px 5px;
}

/* .imgCottage
img of the 'quilting cottage'
Shown at the top of the who i am subpage
*/
.imgCottage{
border: 3px solid #4D6B4D;
border-radius: 10px;
margin: 0px;
padding: 0px;
width: 500px;
height: 250px;
}

/* .imgBCard
img of Elena's business card
Shown at the bottom of each subpage
*/
.imgBCard{
border: 3px solid #4D6B4D;
margin-top: 10px;
padding: 0px;
width: 500px;
height: 275px;
border-radius: 10px;
}

/* .sectionBanner
img used as the section headers
*/
.sectionBanner {
width: 375px;
height: 70px;
border:1px solid #4D6B4D;
border-radius: 5px 31px 31px 5px;
margin-top:5px;
}

/* .email
The image div that allows the user to email
*/
.email {
background-image: url("img/emailbuttond.png");
background-size: 75px 45px;
height: 45px;
width: 75px;
margin-top: 15px;
}
.email:hover { background-image: url("img/emailbuttonc.png"); }

/* ---------------------------- */
/* ------ SubPage Entities ---- */
/* ---------------------------- */

/* .SubPageFrame
The div that contains all subPages
*/
.SubPageFrame {
margin-top:205px;
width: 515px;
margin-left: auto;
margin-right:auto;
}

/* .sectionHeader
The figure that holds the section title 
and the email link.
*/
.sectionHeader {
width:510px;
height: 75px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
margin-bottom: 10px;
}
.sectionHeader img{
display:inline;
float:left;
margin-left: 0px;
}
.sectionHeader figcaption {
display:inline;
float:right;
margin-right:0px;
}

/* .subPageSelected
The currently shown sub page.
This class applies to the div that defines
the subpage. When the appropriate button
is clicked, the appropriate subPage is 
changed to this class.
*/
.subPageSelected {
position:static;
color: #4D6B4D;
width: 505px;
margin-left: auto;
margin-right: auto;
}

/* .subPageNotSelected
All sub pages NOT current showing
This class applies to the div that defines 
the subpage. These sections are moved to 
the far left of the html and made invisible.
*/
.subPageNotSelected {
position: absolute;
color: #4D6B4D;
width: 505px;
margin-left: -10000px;
}

/* .subPageLeaving
a class for the animation of a subpage 
leaving the screen.
*/
.subPageLeaving {
position:static;
color: #4D6B4D;
width: 505px;
margin-left: auto;
margin-right: auto;
-webkit-animation: leaving .5s 0s 1 ease-in normal;
-moz-animation: leaving .5s 0s 1 ease-in normal;
-ms-animation: leaving .5s 0s 1 ease-in normal;
-o-animation: leaving .5s 0s 1 ease-in normal;
animation: leaving .5s 0s 1 ease-in normal;
}

/* .subPageArriving
a class for the animation of a subpage 
arriving on the screen.
*/
.subPageArriving {
position:static;
color: #4D6B4D;
width: 505px;
margin-left: auto;
margin-right: auto;
-webkit-animation: arriving 1s 0s 1 ease-out normal;
-moz-animation: arriving 1s 0s 1 ease-out normal;
-ms-animation: arriving 1s 0s 1 ease-out normal;
-o-animation: arriving 1s 0s 1 ease-out normal;
animation: arriving 1s 0s 1 ease-out normal;
}

/* .headerBreaker
This is the span which pushes the 
subPage down enough to be visible
below the fixed page header.
*/
.headerBreaker {
height: 0px;
display: block;
visibility: hidden;
}

/* ---------------------------- */
/* ---- Misc Page Entities ---- */
/* ---------------------------- */

/* .textbubble
A div for grouping text nicely on the page
*/
.textbubble {
border: 1px dashed #4D6B4D;
border-radius: 10px;
padding: 5px;
margin-top: 5px;
width: 495px;
color:#2E5185;
}

/* .galleryItem
Format for gallery pictures
*/
.galleryItem {
width: 235px;
height: 175px;
margin: 5px;
display: inline-block;
border-radius: 15px;
border: 1px dashed #4D6B4D;
}

/* ---------------------------- */
/* ---- Pricing Calculator ---- */
/* ---------------------------- */

/* .calculatorPanelShown
Takes over the screen and dims everything beneath it
Used for when the user wants to bring up the calculator
*/
.calculatorPanelShown{
width:100%;
height:100%;
display: block;
position:fixed;
opacity:.95;
top:0;
left:0;
position:fixed;
background-color:#313131;
overflow:auto
}

/* .calculatorPanelHidden
Hide the calculator when you dont want to see it
*/
.calculatorPanelHidden{
display: none;
}

/* .CalculatorForm
CalculatorForm gets applied to the form
that has all the calculator items, which exists
inside the calculatorPanel.
*/
.CalculatorForm {
position:absolute;
left:45%;
top:5%;
margin-left:-202px;
max-width:500px;
min-width:250px;
padding:10px 50px;
border:2px solid 4D6B4D;
border-radius:10px;
background-color: #EBFAEB;
}

/* .totalTable
A container for the totals at the bottom
of the calculator
*/
.totalTable{
margin: 5px;
margin-left: 50%;
padding: 10px;
border-radius: 10px;
border: 1px dashed #4D6B4D;
}

/* .btnCalc
A div that represents a button.
Built to resemble the navbar buttons,
these actually move themselves to the right
of their container and are big enough to
have longer names 
*/
.btnCalc{
background-color: #80B280;
border: 1px dashed #4D6B4D;
color: #EBFAEB; 
display: inline-block;
font-family: helvetica;
text-align: center;
margin: 5px;
padding: 5px;
width: 150px;
margin-left:55%;
} 
.btnCalc:hover{ color: #FF7159; } 


/* ---------------------------- */
/* --- Animation Definitions -- */
/* ---------------------------- */

/* leaving
An animation to make an object fly off 
the right side of the screen
*/
@-webkit-keyframes leaving {
	from { opacity: 1; }
	to { opacity: 0; }
}
@-moz-keyframes leaving {
	from { opacity: 1; }
	to { opacity: 0; }
}
@-ms-keyframes leaving {
	from { opacity: 1; }
	to { opacity: 0; }
}
@-o-keyframes leaving {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes leaving {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* arriving
An animation to make an object fly onto 
the screen from the left
*/
@-webkit-keyframes arriving {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes arriving {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-ms-keyframes arriving {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-o-keyframes arriving {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes arriving {
	from { opacity: 0;}
	to { opacity: 1; }
}