/* accreditation/download.html's css file -> accreditationView.css : CSS for the entire webpage */
body { /* Basic styles for the entire body */
font-family:Arial, sans-serif; /* Set font-family to Arial or fallback to sans-serif */
margin:0; /* Remove default margin */
padding:0; /* Remove default padding */
background-color:rgba(251,188,5,0.2) /* Set Background Color */
}
/* -------------------------------------------- Styles for the header section --------------------------------------------*/
header{ /* Styles for the header section */
/*position:fixed;*/ /* Fix the header position */
top:0; /* Position it at the top of the viewport */
/*width: 100%;*/ /* Take the full width of the viewport */
background-color:rgba(234,67,53,1.0); /* Transparent red header background */
color:#fff; /* Set text color to white */
padding:12px; /* Add padding around the header */
text-align:center; /* Center-align text */
left:0; /* Align the left edge to the left side of the viewport */
right:0; /* Align the right edge to the right side of the viewport */
z-index:1000; /* Ensure it stays on top of other content */
}
.spacer{ /* To create red box at background of header */
height:70px; /* Adjust the height according to your header's height */
background-color:rgba(234,67,53,1.0); /* Background color to red */
}
.header-content{ /* Styles for the header content */
display:flex; /* Use flexbox for layout */
justify-content:space-between; /* Distribute content evenly */
align-items:center; /* Center-align vertically */
}
.logo img{ /* Styles for the logo */
max-width:100px; /* Set maximum width for the logo */
height:auto; /* Maintain aspect ratio */
}
.navigation ul{ /* Styles for the navigation links */
list-style:none; /* Remove default list styles */
padding:0; /* Remove default padding */
margin:0; /* Remove default margin */
}
.navigation li{
display:inline; /* Display list items inline */
margin-right:15px; /* Adjust spacing between links */
}
.navigation a{
color:#fff; /* Set link text color to white */
text-decoration:none; /* Remove default underline */
transition:color 0.3s; /* Smooth transition for color change */
font-weight:500; /* Adjust font weight to make text slightly thicker */
}
.navigation a:hover{ /* Change color on hover */
color:yellow; /* Change text color to yellow on hover */
}
/* ------- Drop down style ------- */
.navigation-dropdown{ /* Set the positioning for the navigation dropdown */
position:relative; /* Set the position to relative */
display:inline-block; /* Display as an inline block element */
}
.navigation-dropdown-content{ /* Styles for the dropdown content */
display:none; /* Initially hide the dropdown content */
position:absolute; /* Position the dropdown content */
top:100%; /* Position the dropdown below the list item */
background-color:rgba(234,67,53,1.0); /* Background color for the dropdown */
/*min-width:160px;*/ /* Minimum width of the dropdown */
box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); /* Apply shadow effect */
z-index:1; /* Set the stacking order */
left:0; /* Align the dropdown with the left edge of the list item */
width:auto; /* Adjust the width to fit the content */
}
.navigation-dropdown:hover .navigation-dropdown-content{ /* Show dropdown content on hover */
display:block; /* Display the dropdown content on hover */
}
.navigation-dropdown-content a{ /* Styles for the links inside the dropdown */
display:inline-block; /* Display dropdown links as block elements in one single line*/
color:white; /* Set text color */
padding:10px 17px; /* top-bottom and left-right -> Add padding */
text-decoration:none; /* Remove default underline */
text-align:center; /* Align text to the left */
width:auto; /* Make links take up full width within the dropdown */
box-sizing:border-box; /* Include padding in the width */
white-space:nowrap; /* Prevent line breaks */
vertical-align:middle; /* Adjusts vertical alignment */
font-family:Arial, sans-serif; /* Set the font family */
}
.navigation-dropdown-content a:hover{ /* Styles for the hover state of dropdown links */
background-color:rgba(234,67,53,1.0); /* Change background color on hover */
}
/* ---------------------------------------- Styles for the centered container ---------------------------------------- */
.main-container{
/*max-width:600px;*/ /* Adjust the maximum width as needed */
width:90%; /* Adjust the width to 90% of page */
margin:50px auto; /* Center the container horizontally with top and bottom margin */
background-color:#fff; /* White background color */
border-radius:15px; /* Rounded corners */
padding:20px; /* Add some padding inside the container */
box-shadow:0px 0px 10px rgba(0,0,0,0.1); /* Add a subtle shadow for depth */
position:absolute; /* Position the container absolutely within its parent */
top:43%; /* Position the container 43% down from the top */
left:50%; /* Position the container at the center horizontally */
transform:translate(-50%,-50%); /* Adjust the positioning to center both horizontally and vertically */
}
.container-company-logo{ /* Styles for the logo container and company logo */
text-align:center; /* Center-align the content */
margin-bottom:20px; /* Add some space between logo and other content */
}
.container-company-logo-image{ /* Company Logo Image Styles */
max-width:100%; /* Ensure the logo doesn't exceed its container */
height:auto; /* Maintain the aspect ratio */
}
.main-container-split{ /* Styles for the split container */
display:flex; /* Use flexbox for layout */
}
.main-container-left-section{ /* Left side of container - Image */
flex:1; /* Occupy half of the container */
padding:0px; /* Remove padding */
padding-right:20px; /* Add space right side */
display:flex; /* Use flexbox for nested layout */
justify-content:center; /* Center content horizontally */
align-items:center; /* Center content vertically */
overflow:hidden; /* Hide overflowing content */
border-top-left-radius:15px; /* Rounded top-left corner */
border-bottom-left-radius:15px; /* Rounded bottom-left corner */
}
.main-container-left-section-image{
width:100%; /* Ensure the image covers the entire space */
height:auto; /* Fill the height */
object-fit:cover; /* Maintain aspect ratio and cover the container */
border-top-left-radius:15px; /* Rounded top-left corner */
border-bottom-left-radius:15px; /* Rounded bottom-left corner */
}
.main-container-right-section{ /* Right side of container - Form */
flex:1; /* Occupy half of the container */
padding:0px; /* Add padding for spacing */
}
.main-container-right-section-heading-name{ /* Styles for the heading name */
font-size:1.4rem; /* Set font size */
color:#000; /* Set text color to black */
margin-top:10px; /* Add margin top */
margin-bottom:10px; /* Add margin bottom */
margin-left:10px; /* Add margin right */
}
.main-container-right-section-description{ /* Styles for the description text */
color:#000; /* Set text color to black */
font-size:1.1rem; /* Set font size */
line-height:1.5; /* Set line height */
margin-bottom:20px; /* Add margin at the bottom */
text-align:justify; /* Set text alignment */
}
/* -------- Form Styles - All Formating -------- */
form{ /* Styles for the form */
display:flex; /* Use flexbox */
flex-direction:column; /* Arrange items in a column */
}
.form-container{ /* Styles for the form container - make label and entry in one single row */
display:flex; /* Use flexbox for form container */
flex-direction:column; /* Arrange items in a column */
max-width:300px; /* Set the maximum width of the form */
margin:auto; /* Center the form horizontally */
}
.form-container-input-row{ /* Styles for input rows */
display:flex; /* Use flexbox for input rows */
align-items:center; /* Align items vertically */
margin-bottom:15px; /* Add margin at the bottom */
}
label{ /* Styles for labels */
margin-bottom:1px; /* Add margin at the bottom - Make align with entry box */
font-weight:bold; /* Set font weight */
padding:10px; /* Add padding */
}
input[type="text"], /* Styles for input fields */
input[type="password"]{ /* Not used her */
/*width:auto;*/ /* Take full width */
flex:1; /* Occupy remaining space */
padding:10px; /* Add padding */
border:1px solid #ccc; /* Set border */
border-radius:5px; /* Apply border radius */
margin-bottom:1px; /* Add margin at the bottom */
}
.form-container-button-row{ /* Styles for the button row - both button in single row */
display:flex; /* Use flexbox for button row */
justify-content:space-between; /* Space between buttons */
}
.form-container-forgot-button{ /* Styles for the 'Forgot Reference Id?' button */
flex:1; /* Each button takes up equal space -> top-bottom left-right */
margin:0 5px; /* Optional margin between buttons */
background-color:#000; /* Set button background color */
color:#fff; /* Set text color to white */
padding:10px 20px; /* Add padding -> top-bottom left-right*/
border:none; /* Remove default border */
border-radius:5px; /* Apply border radius */
cursor:pointer; /* Set cursor to pointer */
transition:background-color 0.3s; /* Smooth transition on hover */
text-decoration:none; /* Remove default text decoration */
}
.form-container-forgot-button:hover{
background-color:#EA4335; /* Change background color on hover */
}
.form-container-accreditation-button{ /* Styles for the 'View Accreditation' button */
flex:1; /* Each button takes up equal space -> top-bottom left-right */
margin:0 5px; /* Optional margin between buttons */
background-color:#FBBC05; /* Set button background color */
color:#fff; /* Set text color to white */
padding:10px 20px; /* Add padding -> top-bottom left-right*/
border:none; /* Remove default border */
border-radius:5px; /* Apply border radius */
cursor:pointer; /* Set cursor to pointer */
transition:background-color 0.3s; /* Smooth transition on hover */
text-decoration:none; /* Remove default text decoration */
}
.form-container-accreditation-button:hover{
background-color:#EA4335; /* Change background color on hover */
}
/* -------------------------------------------- Styles for the footer section -------------------------------------------- */
footer{
background-color:#000; /* Set background color to dark gray */
color:#fff; /* Set text color to white */
padding:2px; /* Add padding around the footer */
text-align:center; /* Center-align text */
position:fixed;/*bottom;*/ /* Fix the footer to the bottom of the viewport */
bottom:0; /* Align the footer to the bottom */
height:fit-content; /* Set height to fit the content */
line-height:1; /* Adjust line height to remove extra space */
/*width:100%;*/ /* Set the width of the footer to 100% of the viewport */
left:0; /* Align the left edge to the left side of the viewport */
right:0; /* Align the right edge to the right side of the viewport */
}
.small-text{
font-size:10px; /* Adjust font size as needed */
}
.small-text strong{
font-weight:bold; /* CSS for making the specified text bold */
}