/*==================== Reset Styles ====================*/





html {
    overflow-y: scroll; /* Force scroll bar */
    font-size: 57%; /* This defines the "root" on which "rem" values are based. 62.5% changes the browser default of 16px and changes it to 10px */
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block; /* Makes these elements display as 'block' as it's not defined in IE 8/9 */
}

audio, canvas, video {
    display: inline-block; /* Makes these elements display as 'inline-block' as it's not defined in IE 8/9 */
}

body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, hr, a, img,
article, aside, figure, figcaption, footer, header, hgroup, main, nav, section, audio, canvas, video {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-family:  "Open Sans", sans-serif;
    font-weight: 300; /* Sets the font-weight on all selected elements to a light version */
    font-size: 16px; font-size: 1.6rem; /* Sets the font-size of all selected elements to 1.6em of the root, as specified in the html tag above. The 16px value is a fallback for lt IE 9 */
}





/*==================== Main Styles ====================*/






/*============================================= G L O B A L   S T Y L E S =============================================*/

.html_home {
    background-image: url(../_images/background_banner_low.jpg), url(../_images/background_strip_low.jpg);
    background-repeat: no-repeat, repeat-x;
    background-position: top center, top center;
    background-color: white;
}

.html_pages {
    background-image: url(../_images/background_strip_grey.jpg);
    background-repeat: repeat-x;
    background-position: top center;
    background-color: white;
}

hr {
    height: 1px;
    color: rgb(220,220,220);
    background-color: rgb(220,220,220);
}

a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: white;
}

::-moz-selection {
    color: rgb(40,40,40);
    background-color: rgb(220,220,220);
}
: selection {
    color: rgb(40,40,40);
    background-color: rgb(220,220,220);
}

img {
    display: block; /* Displaying images as block to remove the default white space of otherwise inline img elements */
}

/* Heading Styles */
h1 {
    font-weight: 600;
    font-size: 22px; font-size: 2.2rem;
    -moz-border-radius: 2px; /* Firefox */
    -webkit-border-radius: 2px; /* Safari, Chrome */
    border-radius: 2px;
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
}
h2 {
    font-weight: 600;
    font-size: 22px; font-size: 2.2rem;
}
h3 {
    font-weight: 600;
    font-size: 18px; font-size: 1.8rem;
    color: rgb(100,100,100);
}
/* End Heading Styles */

/*
.jack_russells_section ul {
    list-style-image: url(../_images/bullets/bullet1.png);
}
.products_section ul {
    list-style-image: url(../_images/bullets/bullet2.png);
}
*/
.train_puppy_section ul {
    list-style-image: url(../_images/bullets/bullet3.png);
}
.puppy_health_section ul {
    list-style-image: url(../_images/bullets/bullet4.png);
}
/*
.about_us_section ul {
    list-style-image: url(../_images/bullets/bullet5.png);
}
.contact_section ul {
    list-style-image: url(../_images/bullets/bullet6.png);
}
*/
.train_puppy_section ol li.one {
    list-style-image: url(../_images/bullets/number3_1.png);
}
.train_puppy_section ol li.two {
    list-style-image: url(../_images/bullets/number3_2.png);
}


/*============================================= N A V I G A T I O N =============================================*/

nav {
    height: 70px;
    background-color: rgb(40,40,40);
    
}
.main_nav ul {
    width: 980px;
    height: 70px;
    margin: 0 auto;
    list-style-type: none;
}
.main_nav li {
    float: left;
}
.main_nav a {
    display: block;
    width: 119px;
    height: 65px;
    font-weight: 400;
    font-size: 15px; font-size: 1.5rem;
    line-height: 67px; line-height: 6.7rem;
    text-align: center;
    text-decoration: none;
    color: white;
    text-shadow: 0px 0px 4px rgba(40,40,40,0.4);  /*Progressive enhancement, IE10+ */
}

/* Nav Transition Effects */
.main_nav a {
    -o-transition: background-color 0.2s ease-out; /* Opera */
    -moz-transition: background-color 0.2s ease-out; /* Firefox */
    -webkit-transition: background-color 0.2s ease-out; /* Safari, Chrome */
    transition: background-color 0.2s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
.main_nav a:hover {
    -o-transition: background-color 0.2s ease-out; /* Opera */
    -moz-transition: background-color 0.2s ease-out; /* Firefox */
    -webkit-transition: background-color 0.2s ease-out; /* Safari, Chrome */
    transition: background-color 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Nav Transition Effects */

/* html image will show if css doesn't load */
.main_nav a img {
    margin: 0 auto;
    display: none;
}
/* End html image will show if css doesn't load */

.main_nav a.home {
    width: 147px; /* Element is actually 146px but 145px fixes offset in IE */
    height: 76px;
    padding: 14px 0 0;
    -moz-border-radius: 0 0 5px 5px; /* Firefox */
    -webkit-border-radius: 0 0 5px 5px; /* Safari, Chrome */
    border-radius: 0 0 5px 5px;
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.4); /* Firefox */
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.4); /* Safari, Chrome */
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    background-color: white;
    background-image: url(../_images/logo_sprite.png);
    background-repeat: no-repeat;
    background-position: 0px 10px;
}
.main_nav a:hover.home {
    background-color: white;
    background-image: url(../_images/logo_sprite.png);
    background-repeat: no-repeat;
    background-position: -146px 10px;
}
.main_nav a.adults {
    border-bottom: solid 5px rgb(250,80,110);
}
.main_nav a:hover.adults {
    background-color: rgb(250,80,110);
}
.main_nav a#adults {
    background-color: rgb(250,80,110);
}
.main_nav a.puppies {
    border-bottom: solid 5px rgb(250,160,50);
}
.main_nav a:hover.puppies {
    background-color: rgb(250,160,50);
}
.main_nav a#puppies {
    background-color: rgb(250,160,50);
}
.main_nav a.products {
    border-bottom: solid 5px rgb(210,200,0);
}
.main_nav a:hover.products {
    background-color: rgb(210,200,0);
}
.main_nav a#products {
    background-color: rgb(210,200,0);
}
.main_nav a.train_puppy {
    border-bottom: solid 5px rgb(100,200,80);
}
.main_nav a:hover.train_puppy {
    background-color: rgb(100,200,80);
}
.main_nav a#train_puppy {
    background-color: rgb(100,200,80);
}
.main_nav a.puppy_health {
    border-bottom: solid 5px rgb(20,220,180);
}
.main_nav a:hover.puppy_health {
    background-color: rgb(20,220,180);
}
.main_nav a#puppy_health {
    background-color: rgb(20,220,180);
}
.main_nav a.about {
    border-bottom: solid 5px rgb(20,170,250);
}
.main_nav a:hover.about {
    background-color: rgb(20,170,250);
}
.main_nav a#about {
    background-color: rgb(20,170,250);
}
.main_nav a.contact {
    border-bottom: solid 5px rgb(20,110,220);
}
.main_nav a:hover.contact {
    background-color: rgb(20,110,220);
}
.main_nav a#contact {
    background-color: rgb(20,110,220);
}


/*============================================= S C R O L L   T O   T O P =============================================*/

/* Fixed on Side */
.to_top_all {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 45px;
    height: 29px;
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */    
}
#to_top_home:hover {
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -180px 0;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#to_top_adults:hover {
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -45px 0;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#to_top_puppies:hover {
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -90px 0;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#to_top_products:hover {
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -135px 0;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#to_top_train_puppy:hover {
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -180px 0;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#to_top_puppy_health:hover {
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -225px 0;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#to_top_about_us:hover {
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -270px 0;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#to_top_contact:hover {
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -315px 0;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
/* End Fixed on Side */

/* Inside <h1> bars */
.to_top_heading {
    display: none;
    width: 27px;
    height: 30px;
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -363px 0;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    float: right;
}
.to_top_heading:hover {
    width: 27px;
    height: 30px;
    background-image: url(../_images/assets/assets_sprite.png);
    background-repeat: no-repeat;
    background-position: -363px 0;
    opacity: 1;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    float: right;
}
/* End Inside <h1> bars */


/*============================================= H O M E   W R A P P E R =============================================*/

.home_wrapper {
    position: relative;
    width: 920px;
    padding: 30px;
    margin: 420px auto 20px;
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari, Chrome */
    border-radius: 5px;
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    background-color: white;
}


/*============================================= H O M E   H E A D E R   /   P A G E =============================================*/

#connect_home {
    position: absolute;
    right: 14px;
    top: 490px;
}

#connect_home a.social_space {
    margin-top: 8px;
}

/* Social links Sprites */
#connect_home a {
    display: block;
    position: relative;
    width: 46px;
    height: 46px;
    /* float: left; */
}
#connect_home a span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */ 
}
#connect_home a:hover span {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
}
#connect_home a#facebook {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: 0 -40px;
}
#connect_home a#facebook span {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: 0 -94px;
}
#connect_home a#twitter {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -54px -40px;
}
#connect_home a#twitter span {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -54px -94px;
}
#connect_home a#youtube {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -108px -40px;
}
#connect_home a#youtube span {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -108px -94px;
}
#connect_home a#mail {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -162px -40px;
}
#connect_home a#mail span {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -162px -94px;
}
/* Social Transition Effects */
#connect_home a#facebook span,
#connect_home a#twitter span,
#connect_home a#youtube span,
#connect_home a#mail span {
    -o-transition: opacity 0.2s ease-out; /* Opera */
    -moz-transition: opacity 0.2s ease-out; /* Firefox */
    -webkit-transition: opacity 0.2s ease-out; /* Safari, Chrome */
    transition: opacity 0.2s ease-out;
}
/* End Social Transition Effects */
/* End Social links Sprites */

#home_header h1 {
    font-size: 28px; font-size: 2.8rem; /* Font-size for <h1> elements inside selected <header> */
    color: rgb(100,200,80);
}

#home_header p {
    margin: 12px 0 0 0;
}
#home_header p#second_p {
    margin: 20px 0 20px 0;
}

#home_header a {
    font-size: 16px;
}

.home_section h1 {
    padding: 0 8px 3px 399px;
    margin: 50px 0 30px 0;
    color: white;
    background-color: rgb(100,200,80);
}
    
.latest_news_wrapper {
    width: 920px;
    height: 240px;
    /*background-color: red; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

.latest_news_wrapper figure {
    width: 286px;
    -moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    /*background-color: purple; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
    float: left;
}

.latest_news_wrapper .figure_space {
    margin-left: 31px;
}

.latest_news_wrapper figcaption h3 {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px; font-size: 1.6rem;
    color: rgb(100,200,80);
}
.latest_news_wrapper figcaption {
    padding: 8px;
    font-weight: 400;
    font-size: 14px; font-size: 1.4rem;
    color: rgb(240,240,240);
    background-color: rgb(40,40,40);
}
.latest_news_wrapper figcaption a {
    font-weight: 400;
    font-size: 14px; font-size: 1.4rem;
    color: rgb(240,240,240);
}

.latest_news_wrapper figure a img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */ 
}
/* Figure Transition Effects */
.latest_news_wrapper figure a img {
    -o-transition: background-color 0.8s ease-out; /* Opera */
    -moz-transition: background-color 0.8s ease-out; /* Firefox */
    -webkit-transition: background-color 0.8s ease-out; /* Safari, Chrome */
    transition: all 0.8s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
.latest_news_wrapper figure a img:hover {
    -o-transition: background-color 0.2s ease-out; /* Opera */
    -moz-transition: background-color 0.2s ease-out; /* Firefox */
    -webkit-transition: background-color 0.2s ease-out; /* Safari, Chrome */
    transition: all 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Figure Transition Effects */


/*============================================= P A G E   W R A P P E R S =============================================*/

.page_wrapper {
    width: 920px;
    padding: 30px;
    margin: 50px auto 20px;
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari, Chrome */
    border-radius: 5px;
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    background-color: white;
}


/*============================================= P A G E   H E A D E R S =============================================*/

#adults_header,
#puppies_header,
#products_header,
#train_puppy_header,
#puppy_health_header,
#about_us_header,
#contact_header {
    width: 639px; /* Original width was set to 642px but dotted lines looks funny in Chrome, so I removed 3 px */
    height: 174px;
    float: left;
    clear: right;
    /*background-color: lavender; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

#adults_header p {
    padding: 17px 0 0 2px;
    margin: 16px 0 0 0;
    border-top: 3px dotted rgb(250,80,110);
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(100,100,100);
}
#adults_header a {
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(250,80,110);
}
#adults_header a:hover {
    color: rgb(160,160,160);
}
/* Adults page Transition Effects */
#adults_header a {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
#adults_header a:hover {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Adults page Transition Effects */
#puppies_header p {
    padding: 17px 0 0 2px;
    margin: 16px 0 0 0;
    border-top: 3px dotted rgb(250,160,50);
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(100,100,100);
}
#puppies_header a {
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(250,160,50);
}
#puppies_header a:hover {
    color: rgb(160,160,160);
}
/* Puppies page Transition Effects */
#puppies_header a {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
#puppies_header a:hover {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Puppies page Transition Effects */
#products_header p {
    padding: 17px 0 0 2px;
    margin: 16px 0 0 0;
    border-top: 3px dotted rgb(210,200,0);
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(100,100,100);    
}
#train_puppy_header p {
    padding: 17px 0 0 2px;
    margin: 16px 0 0 0;
    border-top: 3px dotted rgb(100,200,80);
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(100,100,100);    
}
#puppy_health_header p {
    padding: 17px 0 0 2px;
    margin: 16px 0 0 0;
    border-top: 3px dotted rgb(40,220,180);
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(100,100,100);    
}
#about_us_header p {
    padding: 17px 0 0 2px;
    margin: 16px 0 0 0;
    border-top: 3px dotted rgb(20,170,250);
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(100,100,100);    
}
#about_us_header p {
    padding: 17px 0 0 2px;
    margin: 16px 0 0 0;
    border-top: 3px dotted rgb(20,170,250);
    font-weight: 400;
    font-size: 20px; font-size: 2.0rem;
    color: rgb(100,100,100);    
}
#contact_header .contact_details {
    padding: 17px 0 0 2px;
    margin: 16px 0 0 0;
    border-top: 3px dotted rgb(20,110,220);
}
#contact_header a {
    font-weight: 400;
    font-size: 1.6px; font-size: 1.6rem;
    color: rgb(20,110,220);
}
#contact_header a:hover {
    color: rgb(160,160,160);
}
/* Contact page Transition Effects */
#contact_header a {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
#contact_header a:hover {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Contact page Transition Effects */

#adults_header h1,
#puppies_header h1,
#products_header h1,
#train_puppy_header h1,
#puppy_health_header h1,
#about_us_header h1,
#contact_header h1 {
    font-size: 40px; font-size: 4.0rem; /* Font-size for <h1> elements inside selected <header> */
}
#adults_header h1 {
    color: rgb(250,80,110);
}
#puppies_header h1 {
    color: rgb(250,160,50);
}
#products_header h1 {
    color: rgb(210,200,0);
}
#train_puppy_header h1 {
    color: rgb(100,200,80);
}
#puppy_health_header h1 {
    color: rgb(20,220,180);
}
#about_us_header h1 {
    color: rgb(20,170,250);
}
#contact_header h1 {
    color: rgb(20,110,220);
}


/*============================================= M O D E L   P U P S =============================================*/

.modelpups {
    float: right;
}


/*============================================= A S I D E S =============================================*/

.side_rail {
    position: absolute;
    width: 248px;
    height: 100%;
    left: 672px;
    /*background-color: yellowgreen; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}
/* This is a div inside .sidebar to fix jumpy sidebar behavior */
.sidebar_padding {
    width: 208px;
    padding: 20px;
    -moz-border-radius: 2px; /* Firefox */
    -webkit-border-radius: 2px; /* Safari, Chrome */
    border-radius: 2px;
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    background-color: rgb(40,40,40);
}
/* End This is a div inside .sidebar to fix jumpy behavior */

.sidebar h1 {
    padding: 2px 8px 4px 8px;
    margin: 0 0 20px 0;
    font-size: 16px; font-size: 1.6rem;
    color: rgb(240,240,240);
    background-color: rgb(120,120,120);
}

.sidebar p, .sidebar a {
    font-weight: 400;
    font-size: 14px; font-size: 1.4rem;
    color: white;
}

#connect {
    margin-top: 0;
    width: 208px;
    /*background-color: salmon; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

#connect hr {
    height: 1px;
    color: rgb(80,80,80);
    background-color: rgb(80,80,80);
    margin: 86px 0 14px 0;
}

#connect a.social_space {
    margin-left: 8px;
}

/* Social links Sprites */
#connect a {
    display: block;
    position: relative;
    width: 46px;
    height: 46px;
    float: left;
}
#connect a span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */ 
}
#connect a:hover span {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
}
#connect a#facebook {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: 0 -40px;
}
#connect a#facebook span {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: 0 -94px;
}
#connect a#twitter {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -54px -40px;
}
#connect a#twitter span {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -54px -94px;
}
#connect a#youtube {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -108px -40px;
}
#connect a#youtube span {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -108px -94px;
}
#connect a#mail {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -162px -40px;
}
#connect a#mail span {
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -162px -94px;
}
/* Social Transition Effects */
#connect a#facebook span,
#connect a#twitter span,
#connect a#youtube span,
#connect a#mail span {
    -o-transition: opacity 0.2s ease-out; /* Opera */
    -moz-transition: opacity 0.2s ease-out; /* Firefox */
    -webkit-transition: opacity 0.2s ease-out; /* Safari, Chrome */
    transition: opacity 0.2s ease-out;
}
/* End Social Transition Effects */
/* End Social links Sprites */

#download {
    margin-top: 50px;
    width: 208px;
    /*background-color: salmon; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

#download hr {
    height: 1px;
    color: rgb(80,80,80);
    background-color: rgb(80,80,80);
    margin: 20px 0 14px 0;
}

#download div a {
    margin-right: 16px;    
}

#download #adobe_reader {
    font-size: 12px; font-size: 1.2rem;
    color: rgb(160,160,160);
}
#download #adobe_reader a {
    font-size: 12px; font-size: 1.2rem;
    color: rgb(240,240,240);
}
#download #adobe_reader a:hover {
    color: rgb(160,160,160);
}
/* Adobe Reader Transition Effects */
#download #adobe_reader a {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
#download #adobe_reader a:hover {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Adobe Reader Transition Effects */

/* Download links Sprite */
#download div a {
    display: block;
    position: relative;
    width: 70px;
    height: 71px;
    float: left;
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -226px -69px;
}
#download div a span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
    background-image: url(../_images/assets/assets_sprite.png);
    background-position: -316px -69px;
}
#download div a:hover span {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
}
/* Download Transition Effects */
#download div a span {
    -o-transition: opacity 0.3s ease-out; /* Opera */
    -moz-transition: opacity 0.3s ease-out; /* Firefox */
    -webkit-transition: opacity 0.3s ease-out; /* Safari, Chrome */
    transition: opacity 0.3s ease-out;
}
/* End Download Transition Effects */
/* End Download links Sprite */

#recommended {
    margin-top: 50px;
    width: 208px;
    /*background-color: salmon; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

#recommended hr {
    height: 1px;
    color: rgb(80,80,80);
    background-color: rgb(80,80,80);
    margin: 20px 0 14px 0;
}

#recommended .reading a {
    color: rgb(160,160,160);
}
#recommended .reading a:hover {
    color: white;
}
/* Recommened Reading Transition Effects */
#recommended .reading a {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
#recommended .reading a:hover {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Recommened Reading Transition Effects */

    
/*============================================= P A G E   M A I N   S E C T I O N S =============================================*/

main {
    position: relative;
    margin-top: 210px;
    /*background-color: violet; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

.main_content section {
    width: 642px;
    margin-top: 50px;
    /*background-color: salmon; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

.main_content section h1 {
    padding: 0 8px 3px 8px;
    margin: 0 0 20px 0; /* !!!!!!!!!!!!!!!!!!!!!!!!!! CHANGED FROM: 0 0 20px 0 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
}
.main_content section h2 {
    margin: 20px 8px 5px 8px;
}
.main_content section h3 {
    margin: 20px 8px 5px 8px;
}
.main_content section p {
    margin: 0 8px 20px 8px; /* !!!!!!!!!!!!!!!!!!!!!!!!!! CHANGED FROM: 0 8px 20px 8px !!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
}
.main_content section ul, section ol{
    margin: 0 8px 20px 25px;
}

.adults_section h1 {
    color: white;
    background-color: rgb(250,80,110);
}
.puppies_section h1 {
    color: white;
    background-color: rgb(250,160,50);
}
.products_section h1 {
    color: white;
    background-color: rgb(210,200,0);
}
.train_puppy_section h1 {
    color: white;
    background-color: rgb(100,200,80);
}
.puppy_health_section h1 {
    color: white;
    background-color: rgb(40,220,180);
}
.about_us_section h1 {
    color: white;
    background-color: rgb(20,170,250);
}
.contact_section h1 {
    color: white;
    background-color: rgb(20,110,220);
}

.adults_section h2 {
    color: rgb(250,80,110);
}
.puppies_section h2 {
    color: rgb(250,160,50);
}
.products_section h2 {
    color: rgb(210,200,0);
}
.train_puppy_section h2 {
    color: rgb(100,200,80);
}
.puppy_health_section h2 {
    color: rgb(40,220,180);
}
.about_us_section h2 {
    color: rgb(20,170,250);
}
.contact_section h2 {
    color: rgb(20,110,220);
}


/*============================================= A D U L T S   P A G E =============================================*/

.gallary_wrapper_adults {
    width: 642px;
    height: 1476px;
    /* background-color: red; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}
.gallary_wrapper_adults figure {
    width: 208px;
    margin-bottom: 9px;
    -moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    /*background-color: purple; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
    float: left;
}

.gallary_wrapper_adults .figure_space {
    margin-left: 9px;
}

.gallary_wrapper_adults figure a img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Figure Transition Effects */
.gallary_wrapper_adults figure a img {
    -o-transition: opacity 0.8s ease-out; /* Opera */
    -moz-transition: opacity 0.8s ease-out; /* Firefox */
    -webkit-transition: opacity 0.8s ease-out; /* Safari, Chrome */
    transition: opacity 0.8s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.gallary_wrapper_adults figure a img:hover {
    -o-transition: opacity 0.2s ease-out; /* Opera */
    -moz-transition: opacity 0.2s ease-out; /* Firefox */
    -webkit-transition: opacity 0.2s ease-out; /* Safari, Chrome */
    transition: opacity 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}
/* End Figure Transition Effects */


/*============================================= P U P P I E S   P A G E =============================================*/

.gallary_wrapper_puppies {
    width: 642px;
    height: 1311px;
    /*background-color: red; /*===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}
.gallary_wrapper_puppies figure {
    width: 208px;
    margin-bottom: 9px;
    -moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    /*background-color: purple; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
    float: left;
}

.gallary_wrapper_puppies .figure_space {
    margin-left: 9px;
}

.gallary_wrapper_puppies figure a img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Figure Transition Effects */
.gallary_wrapper_puppies figure a img {
    -o-transition: opacity 0.8s ease-out; /* Opera */
    -moz-transition: opacity 0.8s ease-out; /* Firefox */
    -webkit-transition: opacity 0.8s ease-out; /* Safari, Chrome */
    transition: opacity 0.8s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.gallary_wrapper_puppies figure a img:hover {
    -o-transition: opacity 0.2s ease-out; /* Opera */
    -moz-transition: opacity 0.2s ease-out; /* Firefox */
    -webkit-transition: opacity 0.2s ease-out; /* Safari, Chrome */
    transition: opacity 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;    
}
/* End Figure Transition Effects */












/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Finish these tags above AVAILABLE PUPPIES
.availability {
    padding: 4px 10px 4px 10px;
    font-weight: 400;
    color: white;
    background-color: green;
    border-radius: 5px;
    float:right;
}
.sex {
    padding: 3px 12px 3px 12px;
    margin: 0 0 0 20px;
    font-weight: 400;
    color: white;
    background-color: cyan;
    border-radius: 5px;
    float:right;
}
 */

/*============================================= P R O D U C T S   P A G E =============================================*/

.products_wrapper {
    width: 642px;
    height: 253px;
    /*background-color: red; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}
.products_wrapper figure {
    width: 198px;
    border: 1px solid rgb(240,240,240);
    -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); /* Firefox */
    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); /* Safari, Chrome */
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    /*background-color: purple;  ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
    float: left;
}
.products_wrapper figcaption {
    padding: 8px;
    font-weight: 400;
    font-size: 14px; font-size: 1.4rem;
    color: rgb(240,240,240);
    background-color: rgb(40,40,40);
}
.products_wrapper figcaption h3 {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px; font-size: 1.6rem;
    color: rgb(210,200,0);
}

.products_wrapper .figure_space {
    margin-left: 21px;
}

section.products_section hr {
    margin: 30px 0 0 0;
}

.products_wrapper figure a img:hover{
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

/* Figure Transition Effects */
.products_wrapper figure a img {
    -o-transition: opacity 0.8s ease-out; /* Opera */
    -moz-transition: opacity 0.8s ease-out; /* Firefox */
    -webkit-transition: opacity 0.8s ease-out; /* Safari, Chrome */
    transition: opacity 0.8s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
.products_wrapper figure a img:hover {
    -o-transition: bopacity 0.2s ease-out; /* Opera */
    -moz-transition: bopacity 0.2s ease-out; /* Firefox */
    -webkit-transition: opacity 0.2s ease-out; /* Safari, Chrome */
    transition: opacity 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Figure Transition Effects */


/*============================================= P U P P Y   T R A I N I N G   P A G E =============================================*/

.train_puppy_section .secondary_info {
    width: 480px;
    padding: 5px 18px;
    margin: 30px auto;
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    border-radius: 10px;
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    color: rgb(100,100,100);
    background-color: rgb(245,255,245);
}

.bullet_heading {
    margin-bottom: 5px;
    font-style: italic;
    font-weight: 400;
    color: rgb(35,35,35);
}

.numbered_heading {
    margin-bottom: 5px;
}

section.train_puppy_section hr {
    margin: 20px 0 0 0;
}


/*============================================= P U P P Y   H E A L T H   P A G E =============================================*/

.puppy_health_section .secondary_info {
    width: 480px;
    padding: 5px 18px;
    margin: 30px auto;
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
    border-radius: 10px;
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    color: rgb(100,100,100);
    background-color: rgb(242,255,250);
}

section.puppy_health_section hr {
    margin: 20px 0 0 0;
}

.secondary_info img {
    margin-left: 25px;
    float: right;
}


/*============================================= A B O U T   U S   P A G E =============================================*/

#about_us_banner {
    margin-bottom: 20px;
}

.about_us_wrapper {
    width: 642px;
    height: 139px;
    /*background-color: red; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}
.about_us_wrapper figure {
    width: 208px;
    margin-bottom: 9px;
    -moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
    /*background-color: purple; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
    float: left;
}

.about_us_wrapper .figure_space {
    margin-left: 9px;
}

.about_us_wrapper figure a img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

/* Figure Transition Effects */
.about_us_wrapper figure a img{
    -o-transition: opacity 0.8s ease-out; /* Opera */
    -moz-transition: opacity 0.8s ease-out; /* Firefox */
    -webkit-transition: opacity 0.8s ease-out; /* Safari, Chrome */
    transition: opacity 0.8s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
.about_us_wrapper figure a img:hover {
    -o-transition: opacity 0.2s ease-out; /* Opera */
    -moz-transition: opacity 0.2s ease-out; /* Firefox */
    -webkit-transition: opacity 0.2s ease-out; /* Safari, Chrome */
    transition: opacity 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Figure Transition Effects */

.about_us_section {
    height: 830px;
    /*background-color: cyan; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}


/*============================================= C O N T A C T   U S   P A G E =============================================*/

#contact_form {
    padding: 20px 0 0 0;
    margin: 30px 0 0 0;
    height: 749px;
    background-color: rgb(240,240,240); /*===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

label {
    display: inline-block;
    margin: 0 0 20px 20px;
    padding: 8px 8px 8px 0px;
    width: 164px;
    height: 20px;
    vertical-align: top;
    /*background-color: rgb(200,220,240); ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

input, textarea {
    padding: 8px;
    width: 412px;
    height: 18px; /* 2px less than <label> elements because of addad <border> */
    font-family: inherit;
    font-size: 1.5rem;
     /*background-color: wheat; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}
textarea {
    width: 412px;
    height: 270px;
}

.input_text {
    border-style: solid;
    border-color: rgb(225,225,225);
    border-top-color: rgb(180,180,180);
    border-width: 1px;
    outline: none;
    -moz-border-radius: 2px; /* Firefox */
    -webkit-border-radius: 2px; /* Safari, Chrome */
    border-radius: 2px;
    behavior: url(../scripts/pie/PIE.htc); /* Link to location of pie.htc file */
}
.input_text:hover,
.input_text:focus {
    border-style: solid;
    border-color: rgb(185,205,225);
    border-top-color: rgb(135,160,180);    
}

/* Placeholder Font Styles for <input> & <textarea> */
::-webkit-input-placeholder {
    color: rgb(185,205,225); /* Safari, Chrome */
}
:-moz-placeholder {
    color: rgb(185,205,225); /* Older Firefox */
    opacity:  1;
}
::-moz-placeholder {
    color: rgb(185,205,225); /* Firefox */
    opacity:  1;
}
:-ms-input-placeholder {
    color: rgb(185,205,225) /* IE */
}
/* End Placeholder Font Styles for <input> & <textarea> */

/* Removes red shodow around <input> & <textarea> with "required attribute */
:invalid {
  box-shadow: none;
  outline: none; /* Needed for IE */
}
:-moz-submit-invalid {
  box-shadow: none;
}
:-moz-ui-invalid {
  box-shadow: none;
}
/* End Removes red shodow around <input> & <textarea> with "required attribure */

/* On Buttons - Removes border around text when focus */
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
}
/* End On Buttons - Removes border around text when focus */

#submit, #reset {
    margin: 20px 20px 20px 0;
    width: 110px;
    height: 40px;
    font-family: inherit;
    font-size: 14px; font-size: 1.4rem;
    color: rgb(110,110,110);
    float: right;
}

.contact_section {
    height: 830px;
    /*background-color: cyan; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}


/*============================================= C O N F I R M   P A G E S =============================================*/

.confirm_wrapper {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 420px;
    height: 240px;
    margin: auto;
    text-align: center;
    /*background-color: wheat; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

.confirm_wrapper img {
    margin: 20px 0 25px 185px;
}

.confirm_wrapper .confirm span {
    display: block;
    width: 50px;
    height: 50px;
    margin: 6px 0 0 0;
    background-image: url(../_images/checks/confirm.png);
    background-repeat: no-repeat;
    float: right;
    /*background-color: green; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}
.confirm_wrapper .confirm #success {
    background-position: top left;
}
.confirm_wrapper .confirm #error {
    background-position: bottom left;
}

.confirm_wrapper .confirm h1 {
    padding: 0 0 0 50px;
    font-weight: 600;
    font-size: 24px; font-size: 2.4rem;
    color: rgb(20,110,220);
    /*background-color: cyan; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

.confirm_wrapper .confirm p {
    padding: 0 0 0 50px;
    font-weight: 300;
    font-size: 22px; font-size: 2.2rem;
    /*background-color: violet; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

.confirm_wrapper p.skip {
    padding: 0 0 0 10px;
    margin: 20px 0 0 0;
    font-weight: 300;
    font-size: 14px; font-size: 1.4rem;
}
.confirm_wrapper a {
    font-weight: 300;
    font-size: 14px; font-size: 1.4rem;
    color: rgb(150,150,150);
}
.confirm_wrapper a:hover {
    color: rgb(20,110,220);
}

/* End Success / Error Pages */


/*============================================= F O O T E R S =============================================*/

.footer {
    height: 300px;
    color: rgb(200,200,200);
    background-color: rgb(40,40,40);
}

.footer_nav {
    width: 824px;
    height: 170px;
    margin: 0 auto;
    /*background-color: cyan; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}

.footer ul {
    margin: 50px 0 50px 50px;
    list-style-type: none;
    float: left;
    /*background-color: wheat; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/    
}

.footer h1 {
    font-weight: 400;
    font-size: 16px; font-size: 1.6rem;
    color: rgb(240,240,240);
    /*background-color: grey; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/    
}

.footer a,
.footer a:link,
.footer a:visited,
.footer a:active {
    font-weight: 400;
    font-size: 14px; font-size: 1.4rem;
    color: rgb(160,160,160);
}
.footer a:hover {
    color: rgb(240,240,240);
}
/* Footer Links Transition Effects */
.footer a {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the backgroud-color back to the specified color for "no-hover" state, (the nav background-color in this case) */
}
.footer a:hover {
    -o-transition: color 0.2s ease-out; /* Opera */
    -moz-transition: color 0.2s ease-out; /* Firefox */
    -webkit-transition: color 0.2s ease-out; /* Safari, Chrome */
    transition: color 0.2s ease-out; /* (Shorthand) This transitions the background-color to specified color for hover state */
}
/* End Footer Links Transition Effects */

.footer hr {
    height: 1px;
    width: 920px;
    margin: 60px auto 20px;
    color: rgb(60,60,60);
    background-color: rgb(60,60,60);
}

.copyright p {
    width: 920px;
    margin: 0 auto 0px;
    font-weight: 400;
    font-size: 14px; font-size: 1.4rem;
    text-align: center;
    color: rgb(160,160,160);
    /*background-color: violet; ===== @@@@@@@@@@ TEMP BACKGROUND COLOR @@@@@@@@@@ =====*/
}