/* 
 *	Name: Responsive layout;
 *	Author: Andor Nagy;
 *	Website : andornagy.com;
 *	
------------------------------------------
 * 
 *	Responsive Layout is lightweight css and html layout 
 *	that can help you kickstart your website development.
 *
 *	You are free to use this framework for you own projects
 *	and for client works. Credit is always welcome.
 *
 *	DO NOT sell it as your own work.
 *  
--------------------------------------------- */



/* General Styles
--------------------------------------------- */

body {
	margin: 0;
	padding: 0;
	font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
}


/* Helper Classes
--------------------------------------------- */

.clearfix {
	display: block;
	clear: both;
}

.align_center{
	text-align:center}


/* Typography
--------------------------------------------- */

body {
	font-size:18px;
	line-height: 28px;
	color: #333;
	word-wrap:break-word !important;
	font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
}

p {
	margin: 0 0 10px;
	margin: 0 0 2.4rem;
	padding: 0;
}

strong { 
    font-weight: 700;
}

#button {
    background-color:rgba(34,71,89,1);
    border: none;
    color:#fff;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	border-radius: 8px;
	margin-right:20px;
}

#button2 {
    background-color:rgba(34,71,89,1);
    border: none;
    color:#fff;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	border-radius: 8px;
}

#subject option{
	font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
	font-size:18px;}


/* Links
--------------------------------------------- */

a {
	text-decoration: none;
	color: #9ff;
}

a:hover {
	text-decoration: none; 
	color: #e64a19;
}



/* Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #9e0039;
	font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
}

h1 {
	font-size: 40px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}



/* Sections
--------------------------------------------- */

#container{
	margin: 0 auto;
	max-width: 1366px;
}



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

header {
	width: 94%;
	padding: 3%;
	background-color:rgba(83,146,155,1);
}

header #title {
	font-size: 50px;
	color: #fff;
}



/* Navigation
--------------------------------------------- */

nav {
	width: 97%;
	background-color:rgba(34,71,89,1);
	padding: 0 1.5% 0 1.5%;
	border-top: 5px solid #E64A19;
	border-bottom: 5px solid #E64A19;
}

nav ul li {
	display: inline-block;
	padding: 15px 1.5% 15px 1.5% ;
}

nav ul li a {
	text-decoration: none;
	color: #ffffff;
	font-size: 1.2em;
}

nav ul li a:hover {
	color:rgba(83,146,155,1);
	text-decoration: none;
}

/* Article
--------------------------------------------- */

article {
  float: left;
  width: 46%;
  background: #ccc;
  margin: 0 0;
  padding: 2%;
  min-height: 1200px;
  

    
  
}

.left{
    width: 47%;
    float: left;
    padding: 4px 4px;
    margin-bottom:5px;}

.right{
    width: 47%; /* Account for margins + border values */
    float: right;
    padding: 4px 4px;
    margin-bottom:5px;
}

/* Footer
--------------------------------------------- */

#footer{
	width: 94%;
	padding: 3%;
	background-color:rgba(34,71,89,1);
	border-top: 5px solid #e64a19;
	color: #fff;
	text-align: center;
	height:30px;
}

/* Background Colours
--------------------------------------------- */

.bg1 {background-color: #bfe2f9}/* blue */
.bg2 {background-color: #bee0df}/* turquoise */
.bg3 {background-color: #bedfc4}/* green */
.bg4 {background-color: #e0edc5}/* light green */
.bg5 {background-color: #c0cbe7}/* quiz, mauve */
.bg6 {background-color: #224759;}/* web colour */

/* Contact
--------------------------------------------- */
.contactForm input, 
.contactForm select, 
.contactForm textarea{
	width: 75%;
	height:20px;
	border: solid 1px #224759;
	padding: 8px 5px;
	margin-top: 5px; 
	-webkit-border-top-left-radius:8px;
	-o-border-top-left-radius:8px;
	-ms-border-top-left-radius:8px;
	-moz-border-radius-topleft:8px;
	border-top-left-radius:8px;
	
	-webkit-border-top-right-radius:8px;
	-o-border-top-right-radius:8px;
	-ms-border-top-right-radius:8px;
	-moz-border-radius-topright:8px;
	border-top-right-radius:8px;
	
	-webkit-border-bottom-right-radius:8px;
	-o-border-bottom-right-radius:8px;
	-ms-border-bottom-right-radius:8px;
	-moz-border-radius-bottomright:8px;
	border-bottom-right-radius:8px;
	
	-webkit-border-bottom-left-radius:8px;
	-o-border-bottom-left-radius:8px;
	-ms-border-bottom-left-radius:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-left-radius:8px;
	
	box-shadow:rgba(0, 0, 0, 0.398438) 0px 1px 3px;
	background-color:rgba(255,255,255,0.20);
	margin-bottom:20px;
	}
	
.contactForm select{
	width: 75%;
	height:30px;
	}
	
	
/* Blog
--------------------------------------------- */

	.blog{
		max-height:550px; 
		overflow:auto; 
		padding-top:10px
		}
	
	.blogEntry{
	padding-bottom: 15px;
	border-bottom: dotted 1px #a6caf0;
	margin-bottom: 15px;
	}
	
.blogEntry.last{
	border-bottom: none;
	margin-bottom: 0px;
	}
	
.blogEntry .meta{
	font-size: 16px;
	color:rgba(83,146,155,1);
	margin-top: -10px;
	margin-bottom: 10px;
	}
		
		
	
/* Extras
--------------------------------------------- */	
.picture{
	width:90%;
	margin:0px auto;
	display:block;
	margin-bottom:0;}
	
.iPadPadding {
	display:block;}



#site-logo {
	position:relative;
	top:10px;
	text-align: center;
}

#site-logo a {
	color:#fff;
	text-decoration:none;
	font:normal normal bold 24px Overlock, cursive;
	
}
#site-logo a:hover {
	color: #a6caf0;
	text-decoration: none;
	font: normal normal bold 24px Overlock, cursive;
	
}


#lessonSelector {
  font-size: 1.1em;
  padding: 10px 16px;
  border-radius: 8px;
  border: 2px solid #E27D60; /* match your topic color */
  background-color: #ffffff;
  color: #333;
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
}

#lessonSelector:hover,
#lessonSelector:focus {
  border-color: #E8A87C; /* soft orange accent */
  outline: none;
  box-shadow: 0 0 10px rgba(232, 168, 124, 0.4);
}

	
	




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

@media all and (max-width : 768px) {
	


	header {
		text-align: center;
		font-size: 1.0rem;
	}
	
	header #title {
	font-size: 1.5rem;
	color: #fff;
}


	nav {
		text-align: center;
	}
	
	article {
    width: 96%;
	}
	
footer{
	font-size:14px;
	
	}	
	
}

@media all and (max-width : 330px) {
	
	
	body {
	font-size:16px;
	line-height: 24px;
}

	nav {
	border-top: 1px solid #E64A19;
	border-bottom: 1px solid #E64A19;
}

	nav ul li {
	border-top: 1px solid #E64A19;
	border-bottom: 1px solid #E64A19;
	width: 94%;
	}
	
#header h1 {
	position:relative;
	top:15px;
	font-size: 1.0rem;
}
	header #title {
	font-size: 1.4rem;
	color: #fff;
}


h2 {
	font-size: 28px;
}

.iPadPadding {
	display:none;}
	
footer{
	font-size:14px;
	
	}
	

	


}