/*Styling for the entire page,
can set bg images here*/

html {
    background-image: url(/Users/Wiktoria/Desktop/Fern_Wardrobe/images/css/bg.png); 
    background-repeat: repeat;
}

/*default text color*/

body {
    color: #202020;
}

/* Use custom fonts for stuff that you wanna use it for */
h1,h2, button, #page-header a,#page-subheader a {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


/*TITLE*/

#page-header {
    color: #E6CFBC;
}

/*BELOWTITLE*/
#page-subheader {
    color: #202020;
}

#page-subheader a {
    color: #202020;
    transition: 0.3s;
}

#page-subheader a:hover {
    color: black;
}

button {
    color: #202020;
    background-color: #b3957b;
    outline: 1px solid #3f2b2b;
    border: 0;
}

/* Button hover styling */
button:hover {
    background-color: #ede3da;
    color: black;
    outline: 1px solid black;
    border: 0;
}

/* This specifies styles that will affect all the boxes. Change to your own colors!*/
#bodyArea,#swatchesArea,.ui-tabs-panel {
    outline: 1px solid #202020; /* Switched border with outline, to prevent offset issues on mobile */
    background: #ede3da;
}

#swatchesArea a {
    outline: 1px solid #3f2b2b;
	position: middle;
}

#swatchesArea a:hover {
	outline: 1px solid black;
}

#tabsbar li a {
   border: 1px solid #3f2b2b;
   border-bottom: 1px solid #9C7E9A;
   background-color: #b3957b;
   color: #202020;
}

/* Tabs hover styling, only for unselected tabs */
#tabsbar .ui-state-default a:hover {
    border-bottom: 3px solid #ede3da;
    background-color: #ede3da;
}

#tabsbar .ui-state-active a,#tabsbar .ui-state-active a:hover {
    border-bottom: 3px solid #ede3da;
    background-color: #ede3da;
}