/* ----------MAIN BODY STYLES---------- */

* {
margin: 0px; /*sets 0 margin to the whole website*/
padding: 0px; /*sets 0 padding to the whole website*/
}

body {
font-family: MyCustomFont; /*website font family*/
background-color: #3d454f; /*website background color*/
color: #FFFFFF; /*website default text color*/
}

@font-face {
 font-family: MyCustomFont;
 src: url("../font/MTCORSVA.eot") /* EOT file for IE */
}
@font-face {
 font-family: MyCustomFont;
 src: url("../font/MTCORSVA.TTF") /* TTF file for CSS3 browsers */
}

a:link {
color: #ffffff; /*color of our hyperlinks*/
text-decoration: none;
}

a:visited {
color: #ffffff; /*color of visited hyperlinks*/
text-decoration: none;
}

a:hover {
color: #b27c12; /*color of the hyperlink when hovered over*/
text-decoration: underline; 
}

a:active {
color: #ffffff; /*color of our active links*/
text-decoration: none;
}

p {
font-size: 0.7em; /*sets default paragraph text size*/
line-height: 16px; /*sets default paragraph line height*/
text-align: none; /*justifys our paragraphs*/
}

.signature{
color: #ffffff;;
margin-top: 9px;
}

h1 {
color: #FFFFFF; /*color of our H1 tag*/
text-transform: uppercase; /*sets all H1 tags to uppcase*/
font-size: 1.1em; /*sets H1 font size*/
font-weight: normal; /*sets H1 font weight to normal*/
}

h2 {
color: #FFFFFF; /*color of our H2 tag*/
text-transform: uppercase; /*sets all H2 tags to uppcase*/
font-size: 1em; /*sets H2 font size*/
font-weight: bold; /*sets H2 font weight to normal*/
}

h3 {
color: #FFFFFF; /*color of our H3 tag*/
text-transform: uppercase; /*sets all H3 tags to uppcase*/
font-size: 0.9em; /*sets H3 font size*/
font-weight: bold; /*sets H3 font weight to normal*/
}

h4 {
color: #FFFFFF; /*color of our H4 tag*/
text-transform: uppercase; /*sets all H4 tags to uppcase*/
font-size: 0.8em; /*sets H4 font size*/
font-weight: bold; /*sets H4 font weight to normal*/
}

.float-left {
float:left; /*class for float left*/
}

.float-right {
float:right; /*class for float right*/
}

/* ----------MAIN CONTAINER STYLES---------- */
 
#container {
width: 520px; /*width of our container*/
margin-top: 10px; /*sets top margin to 0*/
margin-right: auto; /*sets right margin to auto which centers our website*/
margin-left: auto; /*sets left margin to auto which centers our website*/
}

/* ----------HEADER STYLES---------- */

#header {
float: left; /*floats our header left*/
width: 520px; /*gives our header a width of 760px*/
}

#top-elements {
float: left; /*floats top elements left*/
width: 700px; /*sets our top elements width to 760px*/
padding-top: 0px; /*gives our top elements a padding of 0px*/
}

/* ----------LOGO STYLES---------- */

#top {
float: center; /*floats our logo center*/
height: 297px; /*gives our logo a height of 120px same as our logo image*/
width: 520px; /*sets our logo div's height to 520px same as our logo image*/
padding-top: 0px; /*gives our top elements a padding of 0px*/
background-image: url(../jpg/top.jpg);
}

#top-fly {
float: center; /*floats our logo center*/
height: 297px; /*gives our logo a height of 120px same as our logo image*/
width: 520px; /*sets our logo div's height to 520px same as our logo image*/
padding-top: 0px; /*gives our top elements a padding of 0px*/
background-image: url(../jpg/top-fly.jpg);
}

#top-fly-tying {
float: center; /*floats our logo center*/
height: 297px; /*gives our logo a height of 120px same as our logo image*/
width: 520px; /*sets our logo div's height to 520px same as our logo image*/
padding-top: 0px; /*gives our top elements a padding of 0px*/
background-image: url(../jpg/top-fly-tying.jpg);
}

#top-design {
float: center; /*floats our logo center*/
height: 297px; /*gives our logo a height of 120px same as our logo image*/
width: 520px; /*sets our logo div's height to 520px same as our logo image*/
padding-top: 0px; /*gives our top elements a padding of 0px*/
background-image: url(../jpg/top-design.jpg);
}

#top-portfolio {
float: center; /*floats our logo center*/
height: 297px; /*gives our logo a height of 120px same as our logo image*/
width: 520px; /*sets our logo div's height to 520px same as our logo image*/
padding-top: 0px; /*gives our top elements a padding of 0px*/
background-image: url(../jpg/top-portfolio.jpg);
}

/* ----------FEATURED CONTENT STYLES---------- */

#featured {
float: right; /*floats our featured area right*/
width: 520px; /*gives our featured area a width of 760px*/
margin-top: 0px; /*gives our featured area a top margin*/
margin-bottom: 0px; /*gives our featured area a bottom margin*/
}

.featured-text {
width: 520px; /*sets our featured text box width*/
height: 395px;
margin-top: 0px; /*gives our featured text box a top margin*/
padding-left: 0px; /*adds left padding to our featured text paragraph*/
background-color: #2d333a;
}

.featured-text-fly {
width: 520px; /*sets our featured text box width*/
height: 395px;
margin-top: 0px; /*gives our featured text box a top margin*/
padding-left: 0px; /*adds left padding to our featured text paragraph*/
background-color: #2d333a;
}

.featured-text-design {
width: 520px; /*sets our featured text box width*/
height: 395px;
margin-top: 0px; /*gives our featured text box a top margin*/
padding-left: 0px; /*adds left padding to our featured text paragraph*/
background-color: #2d333a;
}

.featured-text-portfolio {
width: 520px; /*sets our featured text box width*/
height: 395px;
margin-top: 0px; /*gives our featured text box a top margin*/
padding-left: 0px; /*adds left padding to our featured text paragraph*/
background-color: #2d333a;
}

.nav-menu {
color: #FFFFFF; /*color of our font*/
text-align: right;
font-size: 18px; /*sets font size*/
font-weight: normal; /*sets font weight to normal*/
width: 520px;
height: 32px;
margin-top: 0px;
margin-right: 0px;
background-image: url(../jpg/menu.jpg);
}

#featured-image01 {
float: center; /*floats our featured images centered*/
width: 520px; /*gives our featured images a fixed width same as our images*/
height: 395px; /*gives our featured image a fixed height same as our images*/
background-repeat: no-repeat; /*stops images from repeating*/
background-position: right; /*sets background position right*/
background-position: top;
margin-top: 0px; /*gives our featured area a top margin*/

}

#featured-image-fly {
float: center; /*floats our featured images centered*/
width: 520px; /*gives our featured images a fixed width same as our images*/
height: 395px; /*gives our featured image a fixed height same as our images*/
background-repeat: no-repeat; /*stops images from repeating*/
background-position: right; /*sets background position right*/
background-position: top;
margin-top: 0px; /*gives our featured area a top margin*/
}

#featured-image-design {
float: center; /*floats our featured images centered*/
width: 520px; /*gives our featured images a fixed width same as our images*/
height: 395px; /*gives our featured image a fixed height same as our images*/
background-repeat: no-repeat; /*stops images from repeating*/
background-position: right; /*sets background position right*/
background-position: top;
margin-top: 0px; /*gives our featured area a top margin*/
}

#featured-image-portfolio {
float: center; /*floats our featured images centered*/
width: 520px; /*gives our featured images a fixed width same as our images*/
height: 395px; /*gives our featured image a fixed height same as our images*/
background-repeat: no-repeat; /*stops images from repeating*/
background-position: right; /*sets background position right*/
background-position: top;
margin-top: 0px; /*gives our featured area a top margin*/
}

#featured-portfolio {
padding-top: 20px;
background-position: right;
height:281px;
width: 520px;
background-repeat: no-repeat;
padding-right: 0px; /*adds padding to the left side of container*/
}

#featured-jf {
background-image: url(../png/jf.png);
padding-top: 25px;
background-position: right;
height:281px;
width: 500px;
background-repeat: no-repeat;
padding-right: 0px; /*adds padding to the left side of container*/
}

#featured-text p {
font-size: 0.7em; /*sets our featured text paragraph font size*/
line-height: 24px; /*sets our featured text line height*/
text-align: justify; /*justifys our paragraphs*/
margin-top: 20px; /*adds top padding to our featured text paragraph*/
}

h1.featured {
color: #eaffff; /*sets featured H1 color*/
text-transform: none; /*transforms featured H1 tag to none*/
font-size: 12px; /*sets font size of featured H1 tag*/
font-weight: bold;
padding-left: 2px; /*adds padding to the left of our featured H1 tag*/
line-height: 24px; /*sets featured H1 tag's line height*/
}

h2.featured {
color: #eaffff; /*sets featured H2 color*/
text-transform: none; /*transforms featured H2 tag to none*/
text-align: center; /*justifys our paragraphs*/
font-size: 12px; /*sets font size of featured H2 tag*/
padding-left: 2px; /*adds padding to the left of our featured H2 tag*/
line-height: 24px; /*sets featured H2 tag's line height*/
}

.text-spacer-left {
font-size: 1.0em; /*sets font size*/
padding-right: 190px; /*adds padding to the left side of container*/
line-height: 0px; /*sets featured H2 tag's line height*/
}

.text-spacer-right {
font-size: 1.0em; /*sets font size*/
padding-left: 185px; /*adds padding to the left side of container*/
line-height: 0px; /*sets featured H2 tag's line height*/
}

/* ----------FOOTER STYLES---------- */

.signature{
color: #ffffff;;
font-size: 1.0em;
}

#footer {
margin-top: 10px; /*adds a top margin*/
}

#footer-content {
background-image: url(../jpg/footer-dark.jpg); /*adds our footer background image*/
background-repeat: no-repeat; /*stops background repeating*/
margin: auto; /*centers our footer*/
margin-top: 12px; /*adds a top margin*/
height: 24px; /*adds a fixed height*/
width: 520px; /*adds a fixed width*/
clear: both; /*clear's both floats*/
text-align: center; /*aligns text center*/
padding-top: 3px;
}