/* Master control sheet for PamelasJS Creative
reset html borders to zero so there is no white space around website */



html, body {margin: 0; padding: 0;
			background-color: #076999;	/**/
			max-width: 100%;
			}
			
		.hidden {display: none;}
		
		.padding {padding: 10px 10px 5px 10px;}
		
		.clear {clear: left;}
		
		* {box-sizing: border-box;}
		
		.clearfix::after {
						content: "";
						clear: both;
						display: table;
						}
						
		body {font-family: 'Handlee', san-serif;
				font-size: 18px;
				color: #ffffff;
				font-style: normal;
				font-weight: normal;
				text-align: center;
				}
				
			#page-container2 {background-image: url("image/20120604007.jpg");
								background-repeat: no-repeat;
								background-position: center center;
								background-attachment: fixed;
								background-size: cover;
								}
			
						
/*Page layout controls - main sections */

		#header {width: 100%;
				margin-bottom: 20px;
				padding-top: 5px;
				padding-left: 20px;
				padding-right: 20px;
				padding-bottom: 5px;
				background-color: transparent; /*rgba(7, 105, 153, 0.7)*/
				/*background-color: #076999;*/
				border: none;
				/*min-height: 130px; */
				clear: both;
				}
			
				/*Page layout controls - sub sections for header*/
					.column {float: left;
						padding: 15px;
						height: auto; /*test check height of divider */
						}
			
					.column.side {background: transparent;
						width: 25%;
						border: none;
						}		
							.column img {width: 100%;
									height: auto;
									border: none;
									}
					.column.middle {background: transparent;
							width: 50%;
							border: none;
							}
					
		/* Clear floats after the columns in header */
					.row:after {
							content: "";
							display: table;
							clear: both;
							}		
					
	/* Responsive layout - makes the three columns stack on top of each other 
	instead of next to each other */
	
			@media (max-width: 600px) {
  						.column.side, .column.middle {
   						 width: 100%;
 						 }
						}

				
		#main {width: 100%;
				margin: auto;
				margin-top: 0px;
				margin-bottom: 5px;
				padding: 10px;
				background-color: transparent;
				text-align: center;
				border: none;
				border-radius: 5px 0px;
				/* min-height: 680px; */
				clear: both;
				border: none;
				}
				
	/*	#main-body{
					width: 100%;
					margin: auto;
					margin-top: 0px;
					margin-bottom: 0px;
					padding: 0;
					background-color: transparent;
					clear: both;
					min-height: 600px;
					border: 2px dashed black;
					}
		*/			
					
		
		

		#logo {width: 20%;
				margin-left: 0px;
				margin-bottom: 0px;
				border: none;
				}

			
		#inspire {border: none;
					text-align: center;
					font-weight: bold;
					padding: 0px;
					color: #000000;
					}

			#inspire p {color: ;
						font-size: 16px;
						}
						
		#headline {position: absolute;
					top: 25px;
					left: 245px;
					width: 80%;
					border: none;
					margin-top: 0px;
					padding: 0px 0px 0px 0px;
					}
					
				h1 {font-family: 'Rouge Script';
					font-size: 45px;
					color: #ffffff;
					text-align: center;
					margin-top: 5px;
					margin-bottom: -15px;
					
					
					}
					
		#strapline {position: absolute;
					top: 75px;
					left: 245px;
					width: 80%;
					margin: auto;
					border: none;
					}
					
			#strapline p {color: #b0c4fd;
							font-size: 16px;
							}


/* Page layout controls - sub section main */
/* Rightside will contain main text of site, including photos, poetry, information, 
links to external websites (Forever), links to shop sites, possibly items for sale and 
possibly a blog connection */

	#rightside {background-color: transparent;
				border: none;
				margin-top: 0px;
				margin-left: 0%;
				padding: 0px;
				}
				
				
				.quote{width: 35%;
						margin: auto;
						margin-bottom: 15px;
						padding: 1px;
						color: #000000;
						background: rgba(195, 176, 253, 0.7);
						border: 5px ridge #c3b0fd;
						border-radius: 25px;
						 }

				.intro{width: 50%;
						margin: auto;
						margin-bottom: 10px;
						padding: 1px;
						color: #ffffff;
						background: rgba(7, 105, 153, 0.7);
						/*rgba(195, 176, 253, 0.7);*/
						border: 7px ridge #000000;
						border-radius: 25px;
						 }
						 
					.intro p{font-size: 16px;}
					
					.intro p.title {font-size: 18px;
									color: #ffffff;
									margin-bottom: 0px;}
				
				.poem {width: 45%;
						margin: auto;
						margin-top: 10px;
						margin-bottom: 20px;
						border: 10px ridge #000000;
						border-radius: 25px;
						padding: 10px;
						background: rgba(7, 105, 153, 0.7);
										
						}
						
					.poem p.right {text-align: right;
									font-size: 12px}
									
				.artwork {width: 80%;
							max-width: 800px;
							height: 500px;
							margin: auto;
							margin-top: 0px;
							margin-bottom: 20px;
							border: 10px ridge #000000;
							border-radius: 25px;
							padding: 0px;
							background-image: url("image/attractive-beautiful-beauty-594421-sm.jpg");
							}

					.artpoetry {width: 50%;
								margin: 0px 0px 20px 370px;
								border: none;
								padding: 5px;
								background-color: transparent;
								
								}

						.artpoetry p {/*font-family: 'Rouge Script';*/
									font-size: 14px;
									color: #ffffff;
									text-align: center;
									}
									

						.artpoetry p.right {text-align: right;
											font-size: 10px;
											}

/* Footer will sit at bottom of main section, across whole page, and will contain links to 
pages, copyright notice, and contact email details. Fixed across whole site */

					#footer  {width: 90%;
/*								max-width: 1350px;
								min-width: 1180px;
*/								margin: auto;
								margin-bottom: 10px;
								background-color: transparent;
				
								padding: 10px;
								
								background-color: transparent;

								border: none;
/*								min-height: 100px; 
*/								}
								
			#navigate {width: 90%;
						margin: auto;
						margin-top: 15px;
						border: 10px ridge #000000;
						border-radius: 25px;
						padding: 10px;
						background: rgba(7, 105, 153, 0.7);
						
					}
					
					#navigate ul {list-style-type: none;
								margin: 0px 0px 15px 0px;
								}
								
						#navigate li {display: inline;
									margin: 10px;
									padding: 10px;
									color: #ffffff;
									font-size: 18px;
									}
									
						#navigate a {text-decoration: none;
								background-color: transparent;
								border: none;
								border-radius: 50px 15px;
								margin: 0;
								padding: 5px 12px;
								color: #ffffff;
								}
		
						#navigate a:hover {background-color: #b0e4fd;
										color: #000000;
										text-decoration: none;
										}

			#footer p {font-size: 14px;
						text-align: right;
						color: #076999;
						}

/* ------------------------------------------------ Removed coding
		#page-container {max-width: 100%;
						margin-top: 5px;
						margin: auto;
						border: none;
						background-image: url("image/pexels-charles-haacker-3617969.jpg");
						background-repeat: no-repeat;
						background-attachment: fixed;
						background-size: 100% 100%;
						}
			#page-container1 {background-image: url("image/beautiful-blur-close-up-133191.jpg");
								background-repeat: no-repeat;
								background-attachment: fixed;
								background-size: 100% 100%;
								}

/* Leftside will scroll with page, and will contain link buttons to rest of site pages

		#leftside {
					width: 10%;
					margin-left: -10px;
					margin-top: 70px;					
					background-color: transparent;
					border: none;
					border-radius: 25px;
					float: left;
					clear: left;
					}

				#leftside ul {list-style-type: none;
								margin: 0;
								padding: 0;
								background color: transparent;
								border: none;
								text-align: left;
								}
								
						#leftside li {margin: 15px;
										padding-top: 10px;
										padding-bottom: 8px;
										}

								
					#leftside li a {
								color: #ffffff;
								text-align: center;
								margin: 0;
								padding: 5px 12px;
								text-decoration: none;
								background-color: #076999;
								border: 3px outset #ccd8ff;
								border-radius: 50px 15px;
								}
							
						#leftside li a:hover {background-color: #b0e4fd;
									color: #000000;
									}
									
						#leftside p {font-size: 16px;
										background: rgba(7, 105, 153, 0.7);										
										text-align: left;
										color: #ffffff;
										margin: 20px 20px 20px 5px;
										padding: 15px 10px ;
										border-radius: 25px;
										}
						
						#leftside a {text-decoration: none;
										color: #ffffff;}