/*****************************************************
*   Cascading Style Sheets (CSS) Style Definitions   *
*   Created by Osman Balci for NationalParks app.    *
*****************************************************/

html, body {
    background-color: linen;
    margin: 0 0 0 0;    /* top right bottom left */
    width: 100%;        /* Set page width horizontally 100% */
    height: 100%;       /* Set page height vertically 100% */
}

body, p {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: black;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: maroon;
}

/*
=======================================
|   Site Template Component Styling   |
=======================================

In XHTML code, we refer to a CSS style defined in a CSS file by using Selectors.

See CSS Selector Reference at https://www.w3schools.com/cssref/css_selectors.asp

#id         defines the style of a page component whose unique identification is id.
.stylename  defines the style of all elements marked as class="stylename".

Since ids are unique, the #id styling is used only once.
.stylename can be used many times to style a class of elements.

Style the div component whose unique id is "page"
<div id="page"> in siteTemplate
*/
#page {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: black;
}
/*
Style the div component whose unique id is "header"
<div id="header"> in siteTemplate
*/
#header {
    background-color: azure;
    width: 100%;
    height: 84px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin-bottom: 16px;
}
/*
Style the div component whose unique id is "editableContent"
<div id="editableContent"> in siteTemplate
*/
#editableContent {
    /* height = 100% window height - (header height 84px + footer height 100px) */
    height: calc(100% - 184px);
    width: 100%;
    left: 0;
    right: 0;
    margin-top: 100px;
    margin-bottom: 16px;
}
/*
Style the div component whose unique id is "footer"
<div id="footer"> in siteTemplate
*/
#footer {
    height: 100px;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
}

/*
==========================
|   Styling Hyperlinks   |
==========================
The <a> tag defines a hyperlink.
Hyperlinks (or links) are styled differently depending on what state they are in:
    a:link      - normal state (unvisited link)
    a:visited   - visited state (link clicked on by user earlier)
    a:hover     - mouse over state (link when the user hovers over it)
    a:active    - active state (link currently clicked on by user)
*/

/* Set the font family for the standard HTML tag "a" for hyperlinks */
a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

a:link {
    text-decoration: none; /* Do not underline the link in normal state */
}

a:visited {
    text-decoration: none; /* Do not underline the link in visited state */
}

a:hover {
    text-decoration: underline; /* Underline the link in hover state */
}

a:active {
    text-decoration: underline; /* Underline the link in active state */
}

/*
===============================
|   Other Style Definitions   |
===============================
*/

/* Used in headerTemplate */
.headerTitle {
    font-family: "Times New Roman", serif;
    font-size: 18pt;
    font-style: italic;
    font-weight: normal;
    text-decoration: none;
    color: mediumblue;
}

.titleSmall, .alertUser {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    color: darkgreen;
}

/* Style p:panelGrid Column 1 */
.panelGridColumn1 {
    text-align: right;
    white-space: nowrap;        /* Disallow line break */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background-color: papayawhip !important;
}

/* Style p:panelGrid Column 2 */
.panelGridColumn2 {
    text-align: left;
    white-space: nowrap;        /* Disallow line break */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background-color: oldlace !important;
}

/* Style p:panelGrid Column 2 with 100% width */
.widePanelGridColumn2 {
    width: 100%;
    text-align: left;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background-color: oldlace !important;
}

/* Used in Profile to style user's profile photo in a circle */
.profilePhoto {
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Used in headerTemplate to style user's profile photo in a circle */
.smallProfilePhoto {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    vertical-align: middle;
}

/* Used in UserFiles */
.previewImage {
    width: auto;
    height: 36px;
}

/*
======================================
|   App Specific Style Definitions   |
======================================
*/

/* Scrolls text vertically */
.scrollableTextBox {
    display: block;
    text-align: left;
    height: 100px;
    overflow-x: hidden;
    overflow-y: auto;    /* Show vertical scrollbar only if there is scrollable data (Windows) */
    white-space: normal;
    overflow-wrap: break-word;
}

/* Style the p:contentFlow image captions */
.caption {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: darkgreen;
}

.smallImage {
    display: block;  /* Displays an element as a block element (like <p>) */
    /*
    top and bottom margins = 0
    right and left margins = auto (The browser calculates a margin)
    Since the default alignment is "center", the image is centered.
    */
    margin: 0 auto;
}

/*
=========================================
|   Image and Video Responsive Design   |
=========================================
*/

/* 
Proportionately scale image to show on mobile devices and smaller browser windows.
Scale the image downward, but do not enlarge it beyond the width size of 500px.
*/
.scalableImage {
    width: 90%;
    max-width: 800px;
    height: auto;
    border: none;
}

/* 
Proportionately scale video to show on mobile devices and smaller browser windows.
Scale the video downward, but do not enlarge it beyond the width size of 600px.
*/
.scalableVideo { 
   width: 90%;
   max-width: 600px;
   height: auto;
}

/*
=========================================
|   Skinning PrimeFaces UI Components   |
=========================================
(1) Go to PrimeFaces documentation site at
    https://primefaces.github.io/primefaces/11_0_0/#/
(2) Search and locate the UI component of interest
(3) Scroll all the way down to the Skinning section
(4) Identify the style you want to modify
(5) Modify the style in this CSS file (See examples below)

You can also Inspect the UI element under your web browser
to determine which CSS style is used so that you can override it.

Styles are applied in a cascading order. To make sure that a
style is applied regardless of where the style is defined in the
cascading hierarchy, use the !important attribute.
*/

/* Set PrimeFaces dataTable row paddings */
.ui-datatable-data td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Color PrimeFaces panel content background */
.ui-panel-content {
    background-color: oldlace !important;
}

/* Color PrimeFaces sidebar background */
.ui-sidebar {
    background-color: linen !important;
}

/* Color PrimeFaces fieldset container background */
.ui-fieldset {
    background-color: aliceblue !important;
}

/* Set PrimeFaces fileupload width */
.ui-fileupload {
    width: 80%;
}

/* Set PrimeFaces fileupload buttonbar padding */
.ui-fileupload-buttonbar {
    /* padding values are specified in clockwise: Top, Right, Bottom, and Left */
    padding: 0 0 8px 0 !important;
}

/* Set PrimeFaces fileupload content minimum height */
.ui-fileupload-content {
    /* The drag-and-drop area height will increase as more files are dropped */
    min-height: 200px;
}