/* *********** This pages is stying for just photos.html ********************/

/* Please refer to navigation.css for the header area, navigation menu, page layout
   and footer styling  ************/

 /* *** This styles the sections for photos.html *** */



/* ***************** Define the page layout and containers ***************** */

div#pagecontainer {height: 920px;
  width: 99.97%;
  margin: 0 auto;
  background-image: url("../images/tiredbride.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

div#pagecontainer h6 {font-size: 2.2em;
  font-weight: bold;
  letter-spacing: expanded;
  color: white;
  margin: 0;
  padding: 0.25em 0 .45em .75em;
  border-bottom: 4px solid black;
}

div#pagecontainer section.area {height: 790px;
  padding: 1em;
  position: relative;
  margin: 0;
  float: left;
}

div#pagecontainer section.tiredbride {width: 37%;}

div#pagecontainer section#computermobile {width: 55.3%;}

/* ***************** Styling the first section of the tired bride image and text  ********* */

div#pagecontainer section.tiredbride div.overlay {margin-top: -20px;
  width: 100%;
  height: 100%;
  background-color: rgba(81,85,87,.55);
}

div#pagecontainer section.tiredbride div.overlay p {padding: 1em;
  font-weight: 400;
  background-color: rgba(245,245,245,.2);
}

div#pagecontainer section.tiredbride div.overlay p span {font-size: 1.6em;
  font-weight: 500;
  color: white;
  font-stretch: expanded;
}

/* ***************** Styling the second section + table of how to upload via computer and mobile ********* */

div#pagecontainer section#computermobile h5 {font-size: 1.4em;
  font-weight: bolder;
  letter-spacing: expanded;
  color: white;
  margin: 0;
  padding: .5em;
  background-color: rgba(140,4,11,.5);
}

div#pagecontainer section#computermobile p {font-size: 1.1em;
  color: black;
  font-weight: bold;
  border: 1px solid red;
  position: absolute;
  display: inline;
  padding: 4px;
  margin-top: 21px;
}

div#pagecontainer section#computermobile table {width: 100%;
	line-height: 1.2;
	border-collapse: collapse;	
	color: black;
	margin-top: 7%;
	text-align: center;
	margin-top: 75px;
}

div#pagecontainer section#computermobile table thead {background-color: rgba(245,245,245,.6);}

div#pagecontainer section#computermobile table tbody {background-color: rgba(81,85,87,.55);}

div#pagecontainer section#computermobile table thead, 
div#pagecontainer section#computermobile table tbody tr,
div#pagecontainer section#computermobile table tbody tr td:nth-child(1),
div#pagecontainer section#computermobile table tbody tr td:nth-child(2)  
  { border: 1px inset #C8CBCC; }

div#pagecontainer section#computermobile table tbody tr span#id {  /* Size of Wedding ID */
	font-size: 1.6em;
	font-weight: bold;
	padding: 1em .5em .25em 1.2em;
}

div#pagecontainer section#computermobile table thead tr th {padding: 4px 0px 4px 1px;
	font-stretch: extra-expanded;
	font-size: 1.1em;
	font-weight: lighter;
	color: #212021;
	border: 1px solid grey;
}

div#pagecontainer section#computermobile table tbody tr td:nth-child(1) {font-size: .9em;   /* Style Column 1 */
	color: white;
	font-weight: 400;}

div#pagecontainer section#computermobile table tbody tr, 
div#pagecontainer section#computermobile table tbody tr td 
    {padding: 15px 15px 15px 5px;}

div#pagecontainer section#computermobile table tbody td:nth-child(3) {padding: 15px;}

div#pagecontainer section#computermobile table tbody tr:nth-child(2) td:nth-child(2),
div#pagecontainer section#computermobile table tbody tr:nth-child(3) td:nth-child(2),
div#pagecontainer section#computermobile table tbody tr:nth-child(4) td:nth-child(2) {text-align: center;}

div#pagecontainer section#computermobile table tbody tr:nth-child(5) td:nth-child(1) {
 background-image: url("../images/redrose.jpg");
 background-size: contain;}



/* **************************** Media Queries **********************************  */


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

	/* Increase page height */
	div#pagecontainer {height: 980px;}

	/* Amend width of each div */
	div#pagecontainer section.tiredbride {width: 34%;}

	div#pagecontainer section#computermobile {width: 57%;}

	/* Reduce padding spacing in the table */
	div#pagecontainer section#computermobile table tbody tr, 
	div#pagecontainer section#computermobile table tbody tr td 
	    {padding: 10px 10px 10px 5px;}

	div#pagecontainer section#computermobile table tbody td:nth-child(3) {padding: 10px;}

	/* Update font table headers */
	div#pagecontainer section#computermobile table thead tr th {font-stretch: expanded;
		font-size: 1em;}

	/* Move down the whole table to line up with the other text box */
	div#pagecontainer section#computermobile table {margin-top: 120px;}

}


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

	/* Reduce screen width */
    div#page {max-width: 800px;}

	/* Increase page height */
	div#pagecontainer {height: 1232px;
       background-image: none;   /* Remove tired bride image from the whole page container */
       position: relative;
       margin: 0;
       padding: 0;
	}

    /* Remove floating asides and make them now vertical */	
    div#pagecontainer section.area {width: 95%;
	    float: none; }

   	/* Amend height of each div */
	div#pagecontainer section.tiredbride {min-height: 470px;
		height: auto;
		background-image: url("../images/tiredbride.jpg");
		background-repeat: no-repeat;
		z-index: -1;
	}

    /* Remove the overlay over the paragraph */
    div#pagecontainer section.tiredbride div.overlay p {background-color: transparent;}

	/* Reduce text size */  
    div#pagecontainer h6 {font-size: 1.9em; color: black;}
    div#pagecontainer section#computermobile h5 {font-size: 1.2em;}

	/* Expand to full width for this next section */
	div#pagecontainer section#computermobile {min-height: 450px;
		height: auto;
		width: 100%;
		margin: 0;
		padding: 0;}

    /* Move down the whole table to create better spacing */
	div#pagecontainer section#computermobile table {margin-top: 78px;}

 }


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

	/* Reduce screen width */
    div#page {max-width: 600px;}

	/* Increase page height */
	div#pagecontainer {height: 1432px}

    div#pagecontainer section.tiredbride {width: 93.34%;}

	/* Reduce padding spacing in the table */
	div#pagecontainer section#computermobile table tbody tr, 
	div#pagecontainer section#computermobile table tbody tr td 
	    {padding: 5px;}

	div#pagecontainer section#computermobile table tbody td:nth-child(3) {padding: 5px;}

	/* Update font table headers */
	div#pagecontainer section#computermobile table thead tr th {font-stretch: expanded;
		font-size: 1em;}

}

@media screen and (max-width: 615px) {  /* Designed for mobiles */

	/* Reduce screen width */
    div#page {max-width: 300px;}

	/* Increase page height */
	div#pagecontainer {height: 1852px}

   	/* Amend background */
	div#pagecontainer section.tiredbride {height: 1050px; 
		width: 90%;
		background: none;                                       /* Remove tired bride image */
		background-image: url("../images/cartooncpl.jpg");
		background-size: 100% 100%;
}

	/* Reduce text size */  
    div#pagecontainer h6 {font-size: 1.5em; color: black;}
    div#pagecontainer section#computermobile h5 {font-size: 1em;}

	div#pagecontainer section#computermobile p {font-size: 1em;}

	div#pagecontainer section#computermobile table tbody tr, 
	div#pagecontainer section#computermobile table tbody tr td 
	    {padding: 3px;
	    font-size: .8em;}

	/* Update font table headers */
	div#pagecontainer section#computermobile table thead tr th {font-stretch:normal;
		font-size: .85em;}

    div#pagecontainer section#computermobile table tbody tr td:nth-child(1) {font-size: .75em;}   /* Style Column 1 */

    /* Move down the whole table to create better spacing */
	div#pagecontainer section#computermobile table {margin-top: 100px;}

 }