/*================= GENERAL CSS RULES ============================================== */
*
{
margin:0px;
padding:0px;	
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
text-decoration:none;
}

body {
	background-color:#E5DDDD;
	
}

h1, h2, h3, h4
{
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;color: #0000000;
	
}

p {
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;	color: #000000;
	font-size:1.25em;
	
}
h3{
font-size:2.0em;	
}

h1 {
	font-size:3.4375em;
}

h2 {
	font-size:2.2375em;
}




/* ============================================ HEADER/FOOTER RULES ==================================================== */

/*Header */
#logo {
	margin-bottom:-1%;
	margin-top:1%;
	max-width:30%;
	text-align:center;
	margin-left:35%;
}

 #logo img {
	width:100%;
	margin-bottom:-2%;
}

#smallMenu {
	width:6.6%;
	height:4.1%;
	background-color:#461C06;
	position:absolute;
	top:8.1%;
	right:20.8%;
	color:white;
	text-transform:uppercase;
	text-align:center;
	border-radius:10px;
	display:none;
}

#smallMenu:hover {
	cursor:pointer;
}

#smallMenu:active {
	background-color:#461C06;

}

#smallMenu p {
	text-transform:uppercase;
	text-align:center;
	margin-top:20.2%;
	font-size:1.025em;
	color:white;
	text-decoration:none;
}


#smallNav  {
	display:none;
}

#smallNav ul {
	text-decoration:none;
	font-size:24px;
	margin-bottom:4%;
}

#smallNav ul a li {
	text-decoration:none;
	
}

#smallNav ul li {
	background-color:#461C06;
	width:100%;
	height:40px;
	padding-top:12px;
	text-align:center;
	text-decoration:none;
	list-style-type:none;
	color:white;
	border-top: 2px solid #463103;
	border-bottom: 2px solid #463103;
}

#smallNav ul li a {
	width:100px;
	height:50px;
	text-decoration:none;
}

#smallNav ul li:hover {
	background-color:#463103;
}

#smallNav ul li a:hover {
	background-color:#15AECD;
	text-decoration:none;
}

#socialMedia {
	margin-top:13%;
	float:right;
	margin-right:-13%;
	
}

#socialMedia img {
	width:10%;
	height:10%;
	float:left;
	margin-left:3%;
}

#socialMedia img:hover {
	opacity:.6;
	cursor:pointer;

}

#nav {
	border-top:6px solid #463103;
	border-bottom:6px solid #463103;
	border-right:6px solid #463103;
	border-left:6px solid #463103;
	width:99%;
	border-radius:20px;
	background-color:#461C06;
	
}

#nav ul {
	text-align:center;
	border-radius:20px;
}

#nav li {
	float:left;
	list-style-type:none;
	padding-bottom:1%;
	padding-top:1%;
}



#nav li.home {
	width:20%;
	margin-left:2%;
	
}

#nav li.about {
	width:18%;
	
}

#nav li.cupcakes {
	width:18%;
	
}

#nav li.delivery {
	width:18%;
	
}

#nav li.contact {
	width:18%;
	
}

#nav li a {
	text-decoration:none;
	color: #FFFFFF;
	font-size:1.5625em;
	text-align:center;
}

#nav li a:hover {
	color:#A69A9A;
	
}

/* footer */

#copyright {
	padding: 3% 0 0 0;
	margin:2% 0 2% 0;
	text-align:center;
	border-top:7px solid #642B0A;
	
}


/*============================ HOME PAGE CSS RULES  ================================================= */

#introHeading {
	text-align:center;
	margin-top:1%;
	
}

#introduction {
	margin:2% 0 4% 1%;	
	max-width:96%;
}

#slideshow {
	height:30%;
	width:100%;
	background-color:#E48B8C;
	overflow:hidden;
}

#slideshowInner {
	height:350px;
	width:7900px;
	position:relative;
	right:0px;
	z-index:10;
	
}



#whatWeOffer {
	margin-bottom:-4%;
	margin-left:1%;
	
}


#featuredColumn1, #featuredColumn2, #featuredColumn3 {
	margin-top:4%;
	margin-left:6%;
}

.featureColumn {
	width:10%;
	
}

.featureColumn p {
	margin-top:10px;
	
}

.featureColumnImage {
	width:100%;
	margin-bottom:3.5%;
	
}



.featureColumnImage img {
	width:100%;
	border-top:6px solid #461C06;
	border-bottom:6px solid #461C06;
	border-right:6px solid #461C06;
	border-left:6px solid #461C06;
	
}

#tagLine {
	margin-top:2%;
	
}


/* homepage media queries only */

/*Larger sizes (Desktop to tablets */
@media screen and (max-width : 944px) {
	
#logo {
	margin-bottom:-1%;
	margin-top:1%;
	max-width:35%;
	text-align:center;
	margin-left:35%;
}

	
	#socialMedia {
		width:30%;
		text-align:center;
		margin-top:22.9%;
		margin-left:7%;
	}
	
	#bulletPoints {
		width:95%;
		text-align:center;
		margin: 0 0 0 3%;
		
	}
	
	
h1 {
	font-size:2.7375em;
}

	
	
#introduction {
	margin:2% 3% 6% 2%;
	max-width:95%;
}

#nav ul {
	text-align:center;
	border-radius:20px;
	margin-left:-1%;
	
}


#nav li {
	float:left;
	list-style-type:none;
	padding-bottom:1%;
	padding-top:1%;
}

#nav li.home {
	width:15%;
	
}

#nav li.about {
	width:20%;
	
}

#nav li.cupcakes {
	width:20%;
	
}

#nav li.delivery {
	width:20%;
	
}

#nav li.contact {
	width:20%;
	
}

#tagLine {
	margin: 5% 0 0 1%;
	width:98%;
	
	
}

	
	
	
}

/*Medium (smaller desktops to tablets */
@media screen and (max-width : 825px) {
	
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 1px 10px 0;
	float: left;
	display: block;
}

#socialMedia {
		width:40%;
		text-align:center;
		margin-top:22.9%;
		margin-left:7%;
	}
	

#introduction {
	margin:2% 2% 6% 2%;
	
}

h3{
font-size:1.85em;	
}

.featureColumnImage {
	width:90%;
	
	
}

#featuredColumn1, #featuredColumn2, #featuredColumn3 {
	width:94%;
	margin:8% 2% 0 4%;
}

.featureColumn {
	margin:0 2% 0 2%;
	
}

#logo {
	margin-bottom:-1%;
	margin-top:1%;
	max-width:50%;
	margin-left:30%;
}

#tagLine {
	margin-left:4%;
	width:94%;
}

}


/*smaller (tablets to mobiles) */
@media screen and (max-width:566px) {
	
	#logo {
	margin-bottom:-1%;
	margin-top:1%;
	max-width:65%;
	margin-left:20%;
}
	
	
	
	#nav ul {
	text-align:center;
	border-radius:20px;
	margin-left:-2%;
}

#nav li a {
	text-decoration:none;
	color: #FFFFFF;
	font-size:1.2625em;
	text-align:center;
}


#nav li {
	float:left;
	list-style-type:none;
	padding-bottom:1%;
	padding-top:1%;
}

#nav li.home {
	width:15%;
	
}

#nav li.about {
	width:20%;
	
}

#nav li.cupcakes {
	width:20%;
	
}

#nav li.delivery {
	width:20%;
	
}

#nav li.contact {
	width:20%;
	
}

#bulletPoints {
	width:87%;
	margin-left:5%;
	
}

}

@media screen and (max-width:481px) {
	
	h1 {
		font-size:1.6375em;	
	}
	
	 #introduction {
		margin: 4% 0 0 4%;
		width:94%;
	}
	
	
	#whatWeOffer {
		margin-top:5%;
		margin-left:4%;
		width:94%;
		
	}
	
	#logo {
		margin-bottom:-1%;
		margin-top:1%;
		width:66%;
		text-align:center;
		margin-left:5%;
}
	
	#smallMenu {
	width:70px;
	height:40px;
	background-color:#513A08;
	position:absolute;
	top:20px;
	right:7.8%;
	color:white;
	text-transform:uppercase;
	text-align:center;
	border-radius:10px;
	display:block;
}

#smallMenu p {
	text-transform:uppercase;
	text-align:center;
	margin-top:13.2%;
	font-size:1.025em;
	color:white;
	text-decoration:none;
}



#nav {
	display:none;
}

#introHeading {
	margin: 5% 5% 0 0;
	
}
#featuredColumn1 {
	width:94%;
	
}

.featureColumn h3 {
	margin-top:7%;
	
}

#tagLine {
	margin-bottom:5%;
	
}


	
}



/* ====================================== ABOUT US PAGE CSS RULES ================================= */

#aboutUsParagraphs h2 {
	margin:1% 0 -2% 0;
	
}


#aboutUsParagraphs p {
	margin:3% 0 0 0;
	
}

#aboutUsParagraphs img {
	height:20%;
	width:20%;
	margin-left:2%;
	margin-top:3%;
	border:6px solid #461C06;
	
}

#aboutUsMethodsPara {
	margin:0% 0 0 0;
}
#aboutUsMethodsPara h2 {
	margin:0 0 -2% 0;
	
}

#aboutUsMethodsPara p {
	margin:3% 0 0 0;
	
}

#aboutUsMethodsPara img {
	width:25%;
	margin:3% 0 0 5.7%;
	border:6px solid #461C06;
	
}

#aboutUsMethodsPara #firstAboutImage {
	margin:3% 0 0 4.6%;
	
}

#aboutUsDecadenceTodayPara {
	margin:2% 0 0% 0;
	
}

#aboutUsDecadenceTodayPara p {
	margin:1% 0 0% 0;
	
}

#aboutUsDecadenceTodayPara img {
	margin:3% 1% 2% 5%;
	border:6px solid #461C06;
}

/*About us page media queries only */
@media screen and (max-width:1220px) {
	#aboutUsParagraphs {
		margin:0 0 2.5% 1%;
		width:98%;
	}
	
	#aboutUsMethodsPara, #aboutUsDecadenceTodayPara {
		margin:0 0 0 1%;
		width:98%;
		
	}
	
	
}

@media screen and (max-width: 1220px) {
	
	#aboutUsDecadenceTodayPara {
		margin-top:2%;
		
	}
	
}

@media screen and (max-width:945px) {
	.aboutUsHeading {
	font-size:1.954em;
	margin:3% 0 1% 0;
	
}

#aboutUsDecadenceTodayPara {
	margin-top:0%;
}
	
}

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

	#aboutUsParagraphs {
		margin-top:0%;
		margin-left:4%;
		
	}
	
	#aboutUsMethodsPara {
		margin:-1% 0 0 4%;
	}
	

	#aboutUsDecadenceTodayPara {		
	margin-left:4%;
	margin-top:-.5%;
		
	}
	
	#aboutUsParagraphs p {
		width:100%;
		
	}
	
	#aboutUsParagraphs img {
	height:50%;
	width:42%;
}
	
}



@media screen and (max-width:695px) {
	
	h2 {
	font-size:2.454em;
	margin:2% 0 1% 0;
	
}

	#aboutUsMethodsPara {
		margin-top:-1%;
		
	}
	
	#aboutUsMethodsPara img {
	width:80%;
	margin:3% 0 0 8%;
	border:6px solid #461C06;
	text-align:center;
	
}

#aboutUsMethodsPara #firstAboutImage {
	margin:3% 0 0 8%;
	
}

#aboutUsDecadenceTodayPara img {
	margin:3% 1% 2% 6%;
	border:6px solid #461C06;
	width:85%;
}

	
}


@media screen and (max-width:622px) {
	
	.aboutUsHeading {
	font-size:1.454em;
	margin:3% 0 1% 0;
	
}

#aboutUsParagraphs {
	margin-top:2%;
	
}

#aboutUsMethodsPara {
	margin-top:0%;
}

}

@media screen and (max-width:481px) {
	
	.aboutUsBigHeading {
		margin-top:-4%;
		
	}
	
}


@media screen and (max-width:440px) {
	
	#aboutUsParagraphs {
		margin-top:3%;
		width:94%;
		
	}
	
	#aboutUsParagraphs h2 {
		font-size:1.454em;
		margin-bottom:-1%;
	}
	
	#aboutUsParagraphs .secondPara {
		margin-top:5%;
	}
	
	#aboutUsParagraphs img {
		width:37%;
		height:18%;
		text-align:center;
		margin-top:9%;
	}

	#aboutUsMethodsPara {
		margin-top:0%;
		width:94%;
		
	}
	
	#aboutUsMethodsPara p {
		margin-bottom:5%;
		margin-top:4%;
		
	}
	
	#aboutUsMethodsPara img {
		margin-top:4%;
		
	}
	
	.aboutUsMethods2ndPara {
		margin-top:12%;
		
	}
	
	#aboutUsDecadenceTodayPara {
		margin-top:-3%;
		width:94%;
		
	}
	
	#aboutUsDecadenceTodayImages {
		margin-top:2%;
		
	}

	
	#aboutUsFinalLine {
		padding-top:3%;
		padding-bottom:4%;
	}
	
	
}




/* =================================== DELIVERY PAGE CSS RULES ============================================= */

#introHeading {
	margin: 2% 0 0 0;
	
}

#deliveryIntro {
	margin: 1.5% 0 1.5% 0;
}


#deliveryOption1 p {
	margin:1.5% 0 0 0;
	
}

#deliveryAddress {
	margin: 16% 0 0 0;
}

#deliveryAddress p {
	margin: 0 0 0 0;
	
}



#googleMap {
	width:69.8%;
	height:412px;
	box-shadow: 4px 5px 1px  #CCC;
	margin-top:53px;
	border: 14px solid #f9faf4;
	background-color:#A36F6F;
	
}



#deliveryOption2 p {
	margin: 1.5% 0 0 0;
	
}

.deliveryInfo {
	margin: 2% 0 0 0;
	
}


/* Delivery page media queries only */

@media screen and (max-width:1220px) {
	#deliveryIntro, #deliveryOption1, #deliveryOption2 {
		margin: 2% 0 0 1.5%;
		width:97%;
		
	}
	
	#deliveryAddress {
		margin: 16% 0 0 0;
	}
}

@media screen and (max-width:952px) {
	
	#deliveryAddress {
		width:100%;
		text-align:center;
		margin:2% 0 0 0;
		
	}
	
	#googleMap {
		text-align:center;
		margin: 5% 0 0 15%;
		
	}
	
	#openingHours {
		margin: 3% 0 0 0;
		
	}
	
	.deliveryHeading {
	font-size:1.954em;
	}
	
}

@media screen and (max-width:500px) {
	
	.deliveryHeading {
	font-size:1.454em;
	}
	
	#deliveryIntro {
		margin-top:6%;
		width:94%;
		margin-left:4%;
		
	}
	
	#deliveryOption1 {
		margin-top:5%;
		margin-left:4%;
		width:94%;
		
	}
	
	
	#deliveryAddress {
		margin-top:8%;
		margin-left:4%;
		width:94%;
		
	}
	
	#deliveryOption2 {
		margin-top:5%;
		margin-left:4%;
		width:94%;
		
	}
	
	#deliveryPhoneNumber {
		margin: 5% 0 0 0;
		
	}
	
	#googleMap {
		text-align:center;
		margin: 5% 0 0 15%;
		height:212px;
		
	}
	
	#openingHours {
		margin-left:4%;
		width:94%;
		
	}
	
	#deliveryPhoneNumber {
		margin-bottom:5%;
		width:94%;
	}
	
	
}
	








/* ================================= CONTACT PAGE CSS RULES ========================================= */

#contactInformation {
	margin:2% 1% 0 0%;
	
}

#contactForm {
	margin:2% 0 0 0%;
	
}

#contactForm p input.inputField {
	height:80%;
	width:360px;
	font-size:0.9625em;
}

#contactForm h4 {
	margin:2% 0 0 0;
	
}

#contactForm .formSelection {
	margin:1.7% 1% 0 0;
}

.messageBox {
	font-size:1.1625em;
	
}

.importantFormField {
	color:red;
	
}

#contactEmail {
	margin:2% 0 0 0;
	
}

#contactEmail a:hover {
	opacity:.6;
	
}

#contactAddress {
	margin:2.9% 0 0 0;
	
}

h4 button {
	width:12%;
	height:25%;
	font-size:0.962em;
	background-color:#6A440E;
	color:white;
	border-radius:40px;
	border-color:#4A3004;
}

/* hints on the for */

.formHint {
	padding:4px;
	background-color:#BF3A3C;
	border-radius:20px;
	margin:7% 0 0 0;
	color:white;
	
}

.validField {
	background-color:#5FC10F;
	
}

.errorField {
	background-color:#F41317;
	
}



/*Contact page media queries only */


@media screen and (max-width:1208px) {
	
	#contactInformation {
		margin-left:2%;
	}
	
	#contactForm {
		margin-left:2%;
	
}

#contactEmail {
	margin-top:2%;
	
}

#contactAddress {
	margin-top:2%;
	
}
	
}




@media screen and (max-width:956px) {
 	
	#contactInformation {
		margin:2% 0 0 3%;
		width:95%;
		
}
	
	#contactForm {
		width:100%;
		margin:0 2% 0 2%;
		
	}
	
	#contactForm p input.inputField {
	height:80%;
	width:412px;
	font-size:0.9625em;
}
	
	#contactEmail {
		margin:5% 2% 0 2%;
		
	}
	
	#contactAddress {
		margin:8% 2% 5% 0;
		
	}


	
	
}

@media screen and (max-width:493px) {
	#contactInformation {
	margin:5% 0 0 2%;	
	width:95%;
}


#contactForm {
	margin:2% 0 0 2%;
	
}

#contactForm p input.inputField {
	height:80%;
	width:95%;
	font-size:0.9625em;
}
#formName, #formEmail, #formOption, #formMessage, #formButtons {
	margin:5% 0 0 0;
	width:95%;
	
}
#formMessage textarea {
	width:95%;
		
}

#contactEmail {
	width:95%;
	
}

#contactAddress {
	width:100%;
	
}

h4 button {
	width:25%;
	height:25%;
	font-size:0.962em;
	background-color:#6A440E;
	color:white;
	border-radius:40px;
	border-color:#4A3004;
}
	
}

@media screen and (max-width:400px) {
	#contactInformation {
	margin:5% 0 0 4%;	
	width:94%;
}


#contactForm {
	margin:2% 0 0 4%;
	width:94%;
	
}

#contactEmail {
	margin-left:4%;
	width:94%;
}

}