/*** Main CSS for Phantom Holocaust ***/
@import url(reset.css);
/*** Alignment styles that are used by the InputfieldTinyMCE for positioning images in bodycopy. If you are using this field type, you may want to include these or similar styles in your site. ***/
.align_left {
float: left;
margin: 0 1em 0.25em 0;
}
.align_right {
float: right;
margin: 0 0 0.25em 1em;
}
.align_center {
display: block;
margin-left: auto;
margin-right: auto;
}
/*** WireFatalError is a class that ProcessWire will use to output fatal errors in the design, but only if debug mode is on, or if you are logged in as a superuser. ***/
.WireFatalError {
background: #a30000;
color: #fff;
padding: 1em;
position: relative;
z-index: 9999;
}
/** The edit link that appears when you are logged in. It is recommended that you implement an edit button in your templates to make it easy to switch to and from the admin control panel when editing pages. ***/
#editpage {
position: absolute;
top: 0;
left: 0;
padding: 5px 6px;
background: #db1174;
color: #fff;
display: block;
font-weight: bold;
}
#editpage:hover {
background: #ffffcc;
color: #000;
}
/* ******************************************************************************************************************* */
/* ***************** START OF MATTHEW SCHENKER'S STYLES FOR PHANTOMHOLOCAUST.ORG *************************** */
/* ******************************************************************************************************************* */
/*** General Styles ***/
body, input, textarea, table {
font-family: 'Raleway', sans-serif;
font-size: 14px;
color: #2f4248;
}
div.clearFloat {
clear: both;
font-size: 0;
height: 0;
line-height: 0px;
}
h4 {
font-size: 1.3em;
color: #A8FCFE;
}
em { /* Override the reset style here */
font-style: italic;
}
strong {
font-weight: bold;
}
body {
background: url(images/body_grain_bg.png) top left repeat;
margin: 0 auto 0 auto;
max-width: 960px;
height: auto;
text-align: center;
}
#upper_container {
background: url(images/ph_logo.png) top center no-repeat;
display: inline;
float: left;
width: 960px;
height: 134px;
}
#main_container {
background: url(images/hatch_bg.png) top left repeat;
margin: 5px 0 0 0;
display: inline;
float: left;
width: 960px;
padding: 20px 0 20px 0;
}
.film_pagetitle,
.general_pagetitle {
font-size: 2.5em;
color: #f6f6f6;
}
.film_pagetitle { /* Styling for the title text on chapter (film) pages */
font-style: italic;
}
.general_pagetitle { /* Styling for the title text on general (non-film) pages */
margin-bottom: 15px;
}
/*** Navigation for CSS dropdown main menu (see http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu) ***/
nav { /* Set position relative and z-index to 1 so menu appears above content instead of falling behind it. */
position: relative;
z-index: 1;
width: 960px;
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
float: right;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li { /* Styling for both the top-level and dropdown elements. */
float: left;
font-weight: bold;
}
nav ul li:hover {
background: #5f6975;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a { /* Styling for both the top-level and dropdown elements. */
display: block;
padding: 0 30px 0 30px;
color: #000;
text-decoration: none;
font-size: 1.3em;
}
nav ul ul { /* Styling for the whole dropdown region. */
background: #747474;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li { /* Styling for each individual "cell" of the dropdown menu. */
float: none;
position: relative;
}
nav ul ul li a { /* Styling for just the dropdown elements. */
padding: 5px 5px 5px 5px;
color: #fff;
font-size: 1em;
text-align: left;
font-weight: normal;
}
nav ul ul li a:hover { /* Styling when hovering on an element of the dropdown menu */
background: #5f6975;
color: #000;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
/*** Home page ***/
#book_cover_box {
margin-left: 30px;
display: inline;
float: left;
border: 1px solid #313140;
}
#home_text_box {
color: #FFFFFF;
display: inline;
float: left;
font-size: 1.199em;
margin: 0 0 0 50px;
text-align: left;
width: 450px;
}
#home_text_box p { /* Font for the temporary text that appears beside the book image on the home page */
font-size: 1em;
color: #E6EBF1;
text-align: left;
margin-bottom: 30px;
line-height: 1.25em;
}
/*** Chapter Pages ***/
#video_container { /* Full-width container holding the video element */
margin-top: 34px;
display: inline;
float: left;
width: 960px;
}
.video_box { /* Box containing the actual video */
margin-left: 17%;
margin-top: 20px;
display: inline;
float: left;
width: auto;
}
#tab_container { /* Full-width container holding the tabs element */
margin-top: 61px;
display: inline;
float: left;
width: 960px;
}
#tab_box { /* Box containing tabs element, inside tab_container */
margin-left: 10%;
display: inline;
float: left;
width: 768px;
}
#tab_headings { /* Unordered list that forms the tab headings */
width: 100%;
height: 33px;
margin: 10px 0 0 0;
}
#tab_headings li { /* Text of the tab headings */
float: left;
text-align: center;
width: 33%;
height: 33px;
}
#tab_headings li a { /* Active tab */
cursor: pointer;
font-size: 1em;
font-weight: bold;
color: #fff;
padding: 8px 0 9px 0;
display: block;
background: #00698C;
}
#tab_headings li a.inactive { /* Inactive tab(s) */
padding: 8px 0 9px 0;
color: #999;
background: #888;
text-align: center;
}
#tab_headings li a:hover,
#tab_headings li a.inactive:hover { /* Hover effects of the tab headings */
color: #A40000;
}
.individual_tabs_container { /* DIVs holding actual content that appears when you click on a tab */
clear: both;
width: 100%;
text-align: left;
padding: 20px 0 20px 0;
background: #666666;
}
.individual_tabs_container h2 { /* inside individual tab areas (you can change to any element you want styled) */
margin: 10px 15px 10px 15px;
color: #5685bc;
font-size: 1.5em;
}
.individual_tabs_container p { /*
text inside individual tab areas (you can change
to any element you want styled) */
margin: 10px 15px 10px 15px;
line-height: 1.3em;
color: #f6f6f6;
}
.individual_tabs_container ol li { /* Ordered list in discussion questions tab (you can change this as needed) */
list-style-type: decimal;
list-style-position: inside;
margin: 0 15px 10px 30px;
text-indent: -1.3em;
color: #fff;
}
/*** General Pages ("About Book," "Table of Contents," etc. ***/
.half_box { /* Container used when we need to split the page into two equal halves of content. */
color: #FFFFFF;
float: left;
padding: 0 2%;
width: 46%;
}
.half_box p { /* Style for paragraphs in general pages. */
font-size: 110%;
color: #E6EBF1;
text-align: left;
margin-bottom: 10px;
line-height: 1.25em;
}
.testimonial_box { /* Container for the rotating testimonials about the book. */
}
.about_box { /* Container holding the bio text on the "About" page. */
margin-top: 95px;
}
#general_text_box { /* Full-width container for text in general pages. */
color: #FFFFFF;
font-size: 1.2em;
text-align: left;
padding: 0px 100px 0 100px;
}
#general_text_box p { /* Style for paragraphs in general pages. */
font-size: 1em;
color: #E6EBF1;
text-align: left;
margin-bottom: 10px;
line-height: 1.25em;
}
#toc_text_box { /* Container for the text in table of contents. */
color: #FFFFFF;
font-size: 1.2em;
text-align: left;
padding: 0 100px 0 100px;
}
#toc_text_box p { /* Styling for the table of contents UL */
margin-bottom: 20px;
}
.toc_number { /* Box holding just the table of contents chapter number. Height is set to the chapter number "hangs" properly. */
float: left;
height: 21px;
margin-right: 5px;
}
.toc_text { /* Box holding the table of contents text entry. */
float: none;
}
/*** Footer ***/
#footer {
clear: both;
border: none;
font-size: 12px;
padding: 2em 0;
}
#footer p,
#footer a {
color: #ddd;
}
#footer p {
text-align: center;
}
#footer a:hover {
text-decoration: underline;
color: #fff;
}
/* BXSlider Overrides */
.bx-wrapper .bx-viewport {
background: none!important;
border: none!important;
box-shadow: none!important;
left: -5px;
}