@charset "UTF-8";
/* CSS Document */

/*Box-sizing border-box makes working with boxes easier/aligned. When you set the width of an element, that's the width that it is. If you set the width to 25%, it will take up 1/4 of the horizontal space available in its parent element only*/
*, *:before, *:after{
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box;
  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;
  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}


body{
	background: #006d6f; /*#2b957c; #229696 (more like business card); #008b8b (Dark Cyan which is close to #229696); #006d6f (darker teal called caribbean current which Mum likes best); */
	font-family: 'Muli', sans-serif;
	font-weight: 300;
  margin-bottom: 20px;
}

header h1{
	margin-top: 5px;
	margin-bottom: -15px;
	padding-bottom: 0;
	color: #DDDEDF; /*E2E3E5*/
}

header h2{
		margin-top: 10px;
    margin-bottom: 15px;
		padding-top: 0;
    padding-bottom: 0;
		color: white;
		font-family: 'Crimson Text', serif;
		font-size: 2.2em;
		font-weight: 500;
		}

header h3{
	margin-top: -5px;
	margin-bottom: 0;
	padding-top: 0;
	color:white;
	font-family: 'Crimson Text', serif;
  font-size: 2.2em;
  font-weight: 500;
	}


header ul li{
	list-style: none;
	float: left;
	margin-right: 1em;
}

table{
  width: 100%;
  border-spacing: 0px;
  border-width: 0px;
  border: 0px;
  padding: 0px;
  margin: 0px;
}

td{
  align-content: center;
  vertical-align: bottom;
  text-align: center;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

footer{
	width: 100%;
	height: 150px;
	background: #229696;
	clear: both;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	font-size: 1.5em;
	padding-top: 5px;
	padding-bottom: 10px;
}

footer a{
	color:#FFF;
	text-decoration: none;
}


#headerWrap{
dislay: inline-block;
}


#headerLogo{
float: left;
margin-right: 20px;
}

#headerTitle{
float: left;
}

#headerLabels{
float: right;
margin-right: -50px;
font-size: 0.90em;
font-weight: 600;
}

#headerLabels a {
  color: #DDDEDF; /*E2E3E5*/
  font-size: 0.65em;
  font-family: 'Roboto Condensed', sans-serif;
  text-decoration: none;
}

#clear{
clear: both;
}

#navigationBar{
	margin: 0 auto;
	width: 100%;
	height: 70px;
	background: #229696; /*#6FBCBC; #52A9A9 (just a shade lighter than the header); #76c0af; #7CC4C4 (original that went with body colour of #229696); ##229696 (preferred option to go with carribean current body colour)*/
}

#navigationBar ul{
	margin: 0px;
  padding-top: 25px;
  padding-left: 20px;
}

#navigationBar ul li{
	list-style: none;
	float: left;
	margin-right: 50px;
}

#navigationBar ul li a{
	text-decoration: none;
	color: #FFF;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.25em;
	font-weight: 600;
}

#navigationBar ul li a:hover{
	color: #229696;
	display: inline;
	background: #fff;
	border: 1px solid #FFF;
	padding: 5px 3px;
}

/*Ask how to set the last element in navigtionBar li to 0 margin. Tried adding a class to the li element calling it "navContactUs" then set it to margin-right: 0px which didn't work. Also tried to add a class to the ul calling it "navList" and referenced #navList li: last-child { margin-right:0}. Still didn't work. To fit all the elements in the nav bar, just reduced the margin-right for all of them however would prefer more space between them*/

#content{
	background:#FFF;
	padding: 20px;
  padding-left: 0px;
	display: inline-block;
	position: relative;
	width: 100%;
}

#content h2{
	color:#229696;
	font-family: 'Muli', sans-serif;
	font-size: 1.5em;
	font-weight: 400;
}

#content h3{
	color: #229696;
	font-family: 'Muli', sans-serif;
	font-size: 1em;
	font-weight: 400;
}

#aboutUsContent{
  /*background-image: url("img/AboutUs/AboutUsBackground.jpg");*/
	/*display: inline-block;*/
}

#aboutUs2 {
	margin-left: 15px;
}

#aboutUs1 img{
	float:left;
	margin-right: 30px;
}

#aboutUs2 img{
	float:right;
}

.aboutUs{
  color:#229696;
	font-family: 'Muli', sans-serif;
	font-size: 1.25em;
	font-weight: 400;
	/*position: relative;
	display: inline-block;*/
}


#aboutUsSpeciality{
  font-size: 1.15em;
  font-weight: 600;
}


#aboutUsOurAim{
  font-size: 1.15em;
  font-weight: 600;
}


#aboutUsSeeOur{
  font-style: italic;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
}


#aboutUsVisitUs{
  font-size: 1.15em;
  text-align: center;
  font-weight: 600;
}


#accessories{
color:#229696;
font-family: 'Muli', sans-serif;
font-size: 1.15em;
}


#labelList li{
  color: #229696;
  font-size: 1.25em;
  font-weight: 600;
}


#contactUsWrap{
dislay: inline-block;
}

#contactUs{
float: left;
/*this is where i'd like to apply the content ID styles to contactUs div but unable to work out how to do this without compromising other pages so applying manually here. Tried splitting the styling and table layout into content ID and content CLASS then apply the class only to contactUs Div however that messed up the tables*/
	background:#FFF;
	padding:22px;
  height: 400px;
  width: 50%;
}

#contactUs h2{
	color:#229696;
	font-family: 'Muli', sans-serif;
	font-size: 1.5em;
	font-weight: 400;
}

#googleMaps{
padding-top: 52px;
float: right;
background:#FFF;
height: 400px;
width: 50%;
}

#content{
	background:#FFF;
	padding:20px;
	display: inline-block;
	position: relative;
	width: 100%;
}

#content h2{
	color:#229696;
	font-family: 'Muli', sans-serif;
	font-size: 1.5em;
	font-weight: 400;
}

/*HEADER 1 BACI BOUTQUE STYLING*/

.baci {
  padding-top: 135px;
}

.boutique {
  font-family: 'Times New Roman';
  font-size: 2em;
	font-weight: 500;
  color: white;
}

/*This was the styling i thought would work for the accessories page, need to ask instructor - #accessories{
  border-color: black;
  border-width: thick;
}*/

/*CONTACT FORM STYLES*/

label{
	color: grey;
	font-family: 'Muli', sans-serif;
	font-size: 1em;
	font-weight: 400;
}

input, textarea{
	width: 300px;
	height: 70px;
	background: #F2F2F2;
	padding-left: 10px;
	font-size: 14px;
	color: #232323;
	border: 1px solid  #C5C5C5;
	border-radius: 0.5em;
}

#submit{
	width: 100px;
	height: 50px;
	border: none;
	cursor: pointer;
	background: #229696;
	color: #FFFFFF;
}