/* CSS Document */

/*Everything here was handcoded, which, I belive, is the best way to code. Using shortcuts is fine, it saves time, however, using the Dreamweaver interface, is not so good, IMHO. As I heard, Dreamweaver is kind of outdated, and even if it's not, the company which a person will work for may use a different application for web. Web programming languages are free, whereas Dreamweaver is not. Being able to hand code is very important in this sence, because it allows a student to make a website even without any programm being bought or installed. In this class you only showed how to use Dreamweaver tools and functions for doing CSS. I think that it would've be good for students to know how to handcode CSS too, without using the Dreamweaver tools. It wasn't hard to understand how to turn the values and parameters from the handouts to the code, but I think it would've been good if you showed it too!*/

body {margin:0px;
color:#565034;
font-family:Gotham,"HelveticaNeue",Helvetica,Arial,sans-serif;
font-size:1em;}
			
a:link, a:visited {color:#E3AF84;
text-decoration: none;
transition: color 0.4s ease;}
			
a:hover, a:active {color:#A5B452;
text-decoration: none;
transition: color 0.4s ease;}
			
#container {width:960px;
margin-left: auto;
margin-right: auto;
display: block;}
			
main h1 {color:#E3AF84;
font-weight: normal;
font-size: 1.5rem;}

header h1 {font-weight: normal;}
			
header h1 a:link, header h1 a:visited {color:#A5B452;}
			
header h1 a:hover, header h1 a:active {color:#E3AF84;}
			
#topNav ul {padding: 0px;
margin: 0px;
text-align: right;
list-style-type: none;}
			
#topNav ul li {display: inline-block;
margin-left: 30px;
/*[disabled]background-color: rgba(175,146,114,1.00);*/
font-size: 1.1rem;}
			
header {padding-bottom: 15px;
border-bottom: 2px solid #DDD8CA;}
			
main {padding-bottom: 30px;
padding-left: 70px;
padding-right: 70px;}
			
#homeImg {margin-top: 30px;}
			
#mainHomeText {margin-left: 130px;
margin-right: 130px;}
		
footer {border-top: 2px solid #DDD8CA;}
			
footer h1 {font-weight: normal;
font-size: 1.2rem;
text-align: center;
text-transform: capitalize}
			
footer ul {padding: 0px;
margin: 0px;
text-align: center;
list-style-type: none;}
			
footer ul li {display: inline-block;
padding-left: 0px;
margin-left: 20px;
font-size: .9rem;
color: #A5B452;}
			
footer ul li a:link, footer ul li a:visited {color:#A5B452;}
			
footer ul li a:hover, footer ul li a:active {color:#E3AF84;}

.liveSeeFeel {width: 200px;
height: 450px;
	/*Without fixed height the box will bounce if the number of lines of the text inside the div will differ*/
padding-top: 23px;
padding-right: 23px;
padding-left: 23px;
float: left;
border: 2px solid #7B834A;
border-radius: 6px;
background-color: #E0E6BE;}

.centerLiveSeeFeel {margin-right: 35px;
margin-left: 35px;}

main:after {content: "";
display: table;
clear: both;}

/*.liveSeeFeel {display: inline-block;
width: 200px;
height: 450px;
margin-left: 50px;
border: solid black 1px;}*/
/*That was my own attempt to do the thing and it kind of worked, but the boxes with different number of lines were shifting*/

/*.dot {height: 0.5em;;
width: 0.5em;
margin-right: 5px;
margin-bottom: 2.2px;
background-color: #E3AF84;
display: inline-block;
border-radius: 50%;}*/
/*I just added some dots here because I think they look cool*/

#aboutContent h2 {margin-top: 50px;
padding-top: 5px;
padding-left: 20px;
padding-bottom: 7px;
color: #FFFFFF;
background-color: #C9D47B;
font-weight: normal;}

#aboutContent h3 {margin-left: 30px;
color: #AF9272;
font-weight: normal;}

#aboutContent p {margin-left: 60px;
margin-right: 60px;
line-height: 1.5em;}

#aboutContent ul {margin-top: 35px;
padding-left: 0px;
text-align: center;
list-style-type: none;}

#aboutContent ul li {display: inline-block;
margin-right: 15px;
margin-left: 15px;}

#aboutContent ul li a:link, #aboutContent ul li a:visited {color: #565034;}

#aboutContent ul li a:hover, #aboutContent ul li a:active {color: #A5B452;}

.backToTop {font-size: 0.8rem;}