/* div that holds the catch phase on the front page */
div#feature.feature-region{
background-color:#ffc425;
background-image:none;
color:#000000;
    
}

/* Defining the catchphase on the front page */ 
#feature h1 span {
    font: 40px/1 'Garamond Pro thin';
}

/* Defining the catchphase on the front page */ 
#feature h1 {
    font: 55px/1 'Garamond Pro';
}

/* Defines the div that holds the search input field */
div.search-form-container{
background-color:#492f24;
}

/* Helps define the "nav" element on the admin page that holds several of the navigation links for admins*/
nav.navbar{
background-color:white;
color:blue;
}

/* Helps define what happens when the mouse hovers over the "nav" element on the admin page that holds several of the navigation links for admins*/
nav.navbar a:hover{
color:red;
}

/* Helps define an active, clicked on, "nav" element on the admin page that holds several of the navigation links for admins*/
nav.navbar a:active{
color:#492F24;
}

/* helps define the go for gold div on the end of the HTML body of every page */
.uwyo-footer{
text-align:center;
width:100%;
}

/* helps define the go for gold div on the end of the HTML body of every page */
.uwyo-footer-image{
max-width:100%;
}

/* helps define the element that contains the header image and the WyoLearn Logo */
header#app-header{
background-color:#492f24;
}

/* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
.Dropdown__Toggle--header{
background-color:#FFC425;
border-radius:15px;
}

/* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
.Dropdown__ToggleText{
color:#492F24;
}


/* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
.Dropdown__Toggle--header:hover{
background-color:#FFC425;
border-radius:15px;
}

/* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
.Dropdown__ToggleText:hover{
color:#492F24;
}

/* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
.icon-right{
color:#492F24;
}

/* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
.icon-right:hover{
color:#492F24;
}

/* this defines the little arrow by the user name in the top right hand corner of the window*/
.icon-right:focus{
color:#ffc425;
}

/* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
.Dropdown__Toggle--header:focus{
background-color:#FFC425;
border-radius:15px;
}

/* helps define the elements that hold the username or login elements in the top right hand corner of the page*/
.Dropdown__ToggleText:focus{
color:#ffc425;
}

/* on pages that show course listing cards this defines the icon next to the word "refine" and "categories" in the search bar */
.search-refine-button__contents{
color:#ffc425;
}

/* this helps define the icon that indicates a course is free */
.jqflag{
border-top: 79px solid #FFC425;
 }

/* this helps define the icon that indicates a course is free. */
.product-flag.product-flag-free{
background-color:#FFC425;
color:#492F24;
}

/* this is the text at the bottom of course/listings cards*/
.learn-more{
color:#492F24;
}

/* defines the box shadow the user sees when they hover over the catalog cards and course cards */
.product-results .product-tile:hover {
box-shadow: 0px 3px 5px 5px #333333;
}

/* defines the background and text  colors on the catalog listings and product listings pages*/
div#main.product-results{
background-color:rgba(24, 59, 97,0.8);
color:white;
}

/* defines the small circle icon with the book inside on all the course and catalog cards. */
.ProductIcon__LargeCircle--course{
background-color:#FFC425;
color:#492F24;
}

/* defines the Icon on the student dashboard in the "completed" tab */
.Icon__CircleWrap--info{
background-color:#FFC425;
color:#492F24;
}

/* student dashboard page defines the "inprogress" and "completed" tabs when they are not active */
a.DashboardNavigation__Tab{
color:#492F24;
}

/* student dashboard page defines the "inprogress" and "completed" tabs when they are active */
a.DashboardNavigation__Tab.active{
background-color:#492F24;
color:#FFC425;
}


div#user-nav.pull-right{
background-color:#FFC425;
border-radius:5px;
}

/* makes all text in the catchphrase container centered */
#catchphrase{
text-align:center;
}

/* this makes sure the catch phrase doesn't have any padding or margin */
#catchphrase h1 h2{
padding:0; 
margin:0;
}

/* on the product page this makes the background of the feature element white */
section#product-page #feature{
background-color:white;
}

/* on the product page, this makes the background color of the div that holds the product blue and makes normal text white */
section#product-page div.product-bg {
background-color:rgba(24,59,97,0.8);
color:white;
}

/* makes the header text on the product page white so it can be seen on the blue background */
section#product-page #feature h2.hero-head.h1  {
color:white;
}

/* makes the text on the product page white on the blue background */
section#product-page #feature p  {
color:white;
}

/* makes the button on the enroll page yellow with black text */
section#product-page .btn{
background-color:#FFC425;
color:black;
}

/* defines the bottom part of the product page which is blue and has the yellow enroll button in it. */
section#product-page footer{
background-color:rgba(24,59,97,0.8);
color:white;
}

/* If a course is published but enrollment is not enabled then this notice will show up on the product page as pink text so this changes that pink text to a more readable white. */
.ProductEnrollment__Notice{
color:white;
}


/* defines the boarder and background color of the page users see when they are enrolling in a course */
div#registration{
border:solid 1px black;
background-color:#492f24;
}

/* defines the background blue color of the page users see when they are enrolling in a course */
div#main.registration-page{
background-color:rgba(24,59,97,0.8);
}

/*This is for programs to change the color of the text and links */
.Product__AssociatedProducts{
color:white;
}

span.Product__AssociatedProductsListSpan a{
color:yellow;
}