/*
 Theme Name:   Mary The site
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Child Theme based on Twenty Thirteen for use by Mary The
 Author:       Jay Kamins, Pixel and Light
 Author URI:   http://www.pixelandlight.com
 Template:     twentythirteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         custom, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-thirteen-child
*/



/*********** GLOBALS ***********/

html, body {
	background-color: #4e5e4a;
	background-image: url("images/background.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	font-family: Arial, "sans-serif";
	font-size: .9em;
	color: #404040;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 0px;
}

.alignright {
	float: right;
	margin-left: 30px;
	margin-bottom: 30px;
	border: 3px solid #9aa996;
}


h1 {
	color: #4c5c43;
	font-family: zeitung-micro, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 1.7em;
	line-height: normal;
}

h2 {
	color: #4c5c43;
	font-family: zeitung-micro, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 1.5em;
	line-height: normal;
	border-bottom: 1px solid #9aa996;
}


/*********** LOGO ***********/

#logo {
	position: absolute;
	width: 150px;
	height: 250px;
	top: 20px;
	left: 20px;
	z-index: 3;
}

#logo img {
	width: 150px; 
	height: auto; 
}



/*********** NAVIGATION ***********/
	
#navigation {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 12px;
	background-image: url(images/navigation-background.png);
	position: absolute;
	top: 0px;
	z-index: 2;
}

#navigation ul {
	margin: 0px;
	padding: 0px;
	padding-left: 160px;
	padding-right: 20px;
	text-align: right;
	list-style-type: none;
}

#navigation li {
	color: #ffffff;
	font-family: zeitung-micro, sans-serif;
	font-stretch: condensed; /* Not sure if it works anywhere. */
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.4em;
	line-height: normal;
}

/* Adds the dashes after all menu items. */

#navigation ul li:after {
	content: "-";
	padding-left: 7px;
	padding-right: 7px;
	color: #ccd2c8;
}

#navigation ul a:link, #navigation ul a:visited  {
	color: #ffffff;
	text-decoration: none;
	padding: 5px;
}

#navigation ul a:hover  {
	border: 1px solid #ccd2c8;
	padding: 4px;
	background-color: #a47b37;
	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;
}

/* Takes away the dashes on the last menu item and phone. */

#navigation ul li.phone:after, 
#navigation ul li.last-child:after  {
	content: "";
	padding-left: 7px;
	padding-right: 10px;
	color: #ccd2c8;
}

.phone {
	font-size: 1.8em !important;
}


/*********** HOME PAGE ***********/
	
#home-wrapper {

	width: 90%; 
	padding-bottom: 60%;
	
	/* Two styles above are used to keep image proportional.  
	Essentially saying this div should be 9:6 ratio.
	To find correct ratio, take background image and reduce proportionately.*/
	
	position: relative;
	border: 2px solid #FFFFFF;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}


/*********** HOME PAGE SLIDESHOW ***********/
	
#slideshow {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url("images/home-line-0.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

#slideshow > div {
	width: 100%;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
}

.slide0 {background-image: url("images/home-line-0.jpg"); }
.slide1 {background-image: url("images/home-line-1.jpg"); }
.slide2 {background-image: url("images/home-line-2.jpg"); }
.slide3 {background-image: url("images/home-line-3.jpg"); }
.slide4 {background-image: url("images/home-line-4.jpg"); }
.slide5 {background-image: url("images/home-line-5.jpg"); }
.slide6 {background-image: url("images/home-line-6.jpg"); }
	


/*********** SECONDARY PAGE ***********/


#secondary-wrapper {
	width: 90%;
	height: 90%;
	position: relative;
	border: 2px solid #FFFFFF;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ebebdb;
	background-image: url("images/background-secondary.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

#content {
	padding-top: 98px;
	padding-bottom: 40px;
	padding-left: 210px;
	padding-right: 60px;
	font-size: 1.1em;
	line-height: 1.6em;
	position: relative;
}


/*********** FOOTER ***********/

#footer {
	font-family: Arial, "sans-serif";
	color: #99a492;
	font-size: .9em;
	padding: 12px;
	text-align: center;
}



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



/************ 910 pixels ***************/

@media only screen and (max-width: 910px) {
	

/*********** LOGO ***********/

#logo {
	width: 130px;
	height: 220px;
	top: 15px;
	left: 10px;
}

#logo img {
	width: 130px; 
	height: auto; 
}
	

/*********** NAVIGATION ***********/
	

#navigation ul {
	padding-left: 132px;
	padding-right: 10px;
}



#navigation li {
	font-size: 1.2em;
}

/* Adds the dashes after all menu items. */

#navigation ul li:after {
	padding-left: 1px;
	padding-right: 1px;
}

/* Takes away the dashes on the last menu item and phone. */

#navigation ul li.phone:after, 
#navigation ul li.last-child:after  {
	padding-left: 1px;
	padding-right: 5px;
}

.phone {
	font-size: 1.2em !important;
}
	

/*********** SECONDARY PAGE ***********/


#content {
	padding-top: 74px;
	padding-left: 170px;
}

}
	
	
	
/************ 706 pixels ***************/

@media only screen and (max-width: 706px) {

/*********** LOGO ***********/

#logo {
	width: 120px;
	height: 200px;
	top: 15px;
	left: 10px;
}

#logo img {
	width: 110px; 
	height: auto; 
}

	
/*********** NAVIGATION ***********/
	

#navigation ul {
	padding-left: 120px;
	padding-right: 10px;
}

#navigation li {
	font-size: 1.1em;
}

/* Adds the dashes after all menu items. */

#navigation ul li:after {
	padding-left: 1px;
	padding-right: 1px;
}

/* Takes away the dashes on the last menu item and phone. */

#navigation ul li.phone:after, 
#navigation ul li.last-child:after  {
	padding-left: 1px;
	padding-right: 4px;
}

.phone {
	font-size: 1.1em !important;
}




/*********** SECONDARY PAGE ***********/


#content {
	padding-top: 75px;
	padding-left: 180px;
}

}



/************ 600 pixels ***************/

@media only screen and (max-width: 600px) {
	

/*********** LOGO ***********/

#logo {
	position: relative;
	width: 150px;
	height: 250px;
	top: 0px;
	left: 0px;
	padding-top: 20px;
	padding-left: 12px;
}
	
#logo img {
	width: 150px;
}
	
	
/*********** NAVIGATION ***********/
	
#navigation {
	width: 45%;
	padding-top: 0px;
	padding-bottom: 0px;
	position: relative;
	float: right;
	height: 255px;
	background-image: none;
}
	
#navigation ul {
	padding-left: 0px;
	padding-right: 0px;
	position: absolute;
	bottom: 0px;
	right: 20px;
}
	
#navigation li {
	color: #4c5c43;
	font-size: 1.3em;
	margin-top: 9px;
	margin-bottom: 9px;
	display: block;
	clear: both;
}
	
/* Adds the dashes after all menu items. */

#navigation ul li:after {
	content: "";
	padding-left: 0px;
	padding-right: 0px;
}

#navigation ul a:link, #navigation ul a:visited  {
	color: #4c5c43;
}

#navigation ul a:hover  {
	color: #FFFFFF;
}

/* Takes away the dashes on the last menu item and phone. */
	
#navigation ul li.phone:after, 
#navigation ul li.last-child:after  {
	padding-left: 0px;
	padding-right: 0px;
}

.phone {
	font-size: 1.5em !important;
}
	
	

/*********** HOME PAGE ***********/
	
#home-wrapper {

	width: 90%; 
	padding-bottom: 115%;
}
	
/*********** SLIDESHOW ***********/
	
#slideshow {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url("images/background-home-small.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
	
.slide0 {background-image: url("images/background-home-small.jpg"); }
.slide1 {background-image: url("images/background-home-small.jpg"); }
.slide2 {background-image: url("images/background-home-small.jpg"); }
.slide3 {background-image: url("images/background-home-small.jpg"); }
.slide4 {background-image: url("images/background-home-small.jpg"); }
.slide5 {background-image: url("images/background-home-small.jpg"); }
.slide6 {background-image: url("images/background-home-small.jpg"); }
	

	
/*********** SECONDARY PAGE ***********/
	
#content {
	padding-top: 10px;
	padding-bottom: 40px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 1.1em;
	line-height: 1.6em;
	position: relative;
	clear: both;
}
	
}