/*
Author - Alexander Bolte
		 Bolte IT Consulting
		 2019

This custom CSS overrides certain default settings 
in the Joomla Protostar standard template.

This way I can customize my site using a standard template 
without loosing any changes I made during software updates.

Major changes are ...
1. Decrease the width of the content canvas to 80 % in the fluid layout / style of the Protostar template.
2. Center the content canvas.
3. Use Google Fonts for body.
4. Increase font sizes and line height.
5. Global table CSS rules. 
6. Proper media queries applied that match my changes in width.

Other changes I applied like the horizontal layout of the navigation 
or the fluid layout of the whole site are settings, 
which can be made in the style of the standard Protostar template. 
*/
body {
	font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.site {
	padding: 0px;
	padding-top: 0px;
}

body.site.fluid {
	background-color: #F5F5F5;
}

.body .container-fluid {
	padding: 0px;
	width: 100%;
}

header.header {
	padding-left: 0px;
	padding-right: 0px;
	margin: auto;
	width: 100%;
	background: url('../../../images/headers/background-01.png'), 
	    url('../../../images/headers/background-05.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/*-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
	-o-animation-duration: 10s;
	-ms-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-delay: 5s;
	-o-animation-delay: 5s;
	-ms-animation-delay: 5s;
	animation-delay: 5s;
	-webkit-animation-name: bgswap;
	-moz-animation-name: bgswap;
	-o-animation-name: bgswap;
	-ms-animation-name: bgswap;
	animation-name: bgswap;
	-webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	animation-timing-function: linear;	
	-webkit-animation-direction: alternate;
	-o-animation-direction: alternate;
	-moz-animation-direction: alternate;
	animation-direction: alternate;*/
}

/*@keyframes bgswap {
    0% {
        background: url('../../../images/headers/background-01.png'),
            url('../../../images/headers/background-05.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    30% {
        background: url('../../../images/headers/background-01.png'),
            url('../../../images/headers/background-05.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
	60% {
	    background: url('../../../images/headers/background-01.png'),
	        url('../../../images/headers/background-04.jpg');
		-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	}		
	100% {
	    background: url('../../../images/headers/background-01.png'),
	        url('../../../images/headers/background-04.jpg');
		-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	}
}

@-webkit-@keyframes bgswap {
    0% {
        background: url('../../../images/headers/background-01.png'),
            url('../../../images/headers/background-05.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    30% {
        background: url('../../../images/headers/background-01.png'),
            url('../../../images/headers/background-05.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
	60% {
	    background: url('../../../images/headers/background-01.png'),
	        url('../../../images/headers/background-04.jpg');
		-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	}		
	100% {
	    background: url('../../../images/headers/background-01.png'),
	        url('../../../images/headers/background-04.jpg');
		-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	}
}*/

h1 {
	font-size: xx-large;
	color: #82B415;	
}

h2 {
	font-size: x-large;
	color: #4C4C4C;
}

h3 {
	font-size: larger;
	line-height: 1.1em;
	color: #82B415;
}

h4 {
	font-size: large;
	color: #4C4C4C;
}

li {
	/*
	Once you start changing the font size as well as the line-heigth, 
	you will have to check that you do not miss any fixed font-sizes 
	or line heights for some tags like lists in the template.css
	of the standard template. 
	
	All of these have to be overridden. 
	Luckily so far I could only find the list items to be configured separately.
	*/
    line-height: normal;
    padding-bottom: 0.1em;
}

p a {
	word-wrap: break-word;
}

/*
The default CSS rules for tables in the JCE Editor are not sufficient.
Simple things like header color should be possible to set globally, not only through a custom CSS.

Below changes the background color of the header row.
Since none of the tables I draw showed a table header (th) tag, 
I had to apply the first-child rule for table row tags.

Also the font family for header rows in tables is changed to Baumans. 
*/
table {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    font-size: small;
}

tbody tr:first-child {
	background-color: #82B415;
	color: #4C4C4C;
	text-shadow: #98D418 1px 1px 0;
	font-family: Baumans;
}

/*
Since I wanted alternating colors for rows in tables, I applied this rule.
*/
tr:nth-child(even) {background-color: #F5F5F5;}

/*
If I want to ensure that all tables show borders, 
I have to set this in the table data tag.
*/
td {
	padding: 0.5em;
	border: 1px solid #4c4c4c;
}

.row-fluid {
	background-color: #FFFFFF;
	padding-top: 20px;
}

.row-fluid .span12 {
	/*
	This is used to center the content div within 
	the parent element in the fluid layout 
	of the Joomla Protostar template.
	*/
	margin: auto;		
	/*
	For the same reason we also increase the font size to large.
	On sites, which do not offer textual content this might be irrelevant.
	*/
	font-size: large;
	line-height: 1.3em;
	/* 
	float has to be switched off in order for the margin: auto; 
	rule to kick in to center the content div.
	 
	display: inline-block; did not work since the float: left; rule 
	from the parent element still overrode the margin-left: auto; rule.  
	*/
	float: none;
}

.row-fluid .span12 p {
	word-wrap: normal;
}

.row-fluid .span12 td p {
	word-wrap: break-word;
}

.row-fluid [class*="span"]:first-child {
	/*
	In addition to margin: auto; I specifically 
	have to override the margin-left: ?; 
	which is inherited from a parent element.
	*/
    margin-left: auto;
}

/*.row-fluid .span12 .pull-left.item-image img {
  width: 50%;
}*/

/*
If I want to apply a multi-column layout in articles 
I have to override my custom setting in above rule 
for the page wide span class rule.
*/
div#profile_alex .row-fluid [class*="span"]:first-child {
	margin-left: unset;
}

/*
For multi-column layouts in articles I prefer a two column layout.
Three or more columns will have to be handled in an exception.
*/
div#profile_alex .row-fluid .span6 {
	width: 45%;	
	min-width: 300px;
    margin-left: 0px;
  	margin-right: 2.5%;
}

/*
If I want to apply a multi-column layout in articles 
I have to override my custom setting in above rule 
for the page wide span class rule.
*/
.item-page .row-fluid [class*="span"]:first-child {
	margin-left: unset;
}

/*
For multi-column layouts in articles I prefer a two column layout.
Three or more columns will have to be handled in an exception.
*/
.item-page .row-fluid .span6 {
	width: 45%;	
	min-width: 300px;
    margin-left: 0px;
  	margin-right: 2.5%;
}

/*
The extra margin makes the content look out of place
 and consumes unnecessary space.
*/
.item-page hr {
	margin: 0px;
}

.navigation {
	/*
	I choose Baumans as the font for headers. It is a nice Google Font, 
	which is available for free and almost matches the Bauhaus Pro font, 
	which I use in my Logo.
	*/
	font-family: Baumans, "Helvetica Neue", Helvetica, Arial, sans-serif;;	
	font-weight: bold;
	/*
	The background for the navigation should not be white, but dark. 
	The site is "glowing" enough already.
	*/
	background-color: #4c4c4c;
	margin-bottom: 0px;
}

.navigation .nav-pills {
	font-size: large;
	/*
	Horizontally center the navigation menu.
	*/
	margin: auto;
	/*
	Margin: auto; only works together with width: ?;
	*/
	width: 70%;	
}

.navigation .nav-child a {
	/*
	Increase the size of the sub menu items
	since the default in the Protostar template is too small. 
	*/
	font-size: 1.5em;
	/*
	Accordingly the fixed line height is changed to a dynamic value as well.
	*/
	line-height: normal;
}

.navigation .pull-left {
	display: none;
}

.nav-collapse, .nav-collapse.collapse {
    overflow: unset;
    height: unset;
}

.nav-collapse .nav > li.active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
	color: #FFFFFF;	
}

.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
	color: #82B415;
}

/*
I did not like the deeper parent sub menu item background 
in the protostar template navigation, so I am overriding it.
*/
.navigation .nav-child li > a:hover,
.navigation .nav-child li > a:focus,
.navigation .nav-child:hover > a {
	text-decoration: none;
	color: #fff;
	background-color: #82b415;
	background-color: #82b415;
	background-image: none;
}

/*
I did not like the design of the default footer from the standard Joomla Template Protostar.
So I decided to apply some changes.
*/
.footer {
	background-color: #82B415;
}

/*
Center the footer content container with a width of 50 %.
The minimum width of the footer will be set to 200 pixels.
*/
.footer .container-fluid {
	width: 50%;
	margin: auto;
	min-width: 200px;
}

/*
Change the CSS rules for the horizontal line separating 
the footer from the content area of your page.

I choose an inset layout, where the darker color 
is on the top border and the lighter color 
is on the bottom border.
Thus the light seems to come from top.
*/
.footer .container-fluid hr {
	border-top: 1px solid #6B9314;
	border-bottom: 1px solid #A8E720;
}

/*
Also the menu in the footer had to be adjusted.
I placed this menu in the footer position just using backend admin functionality. 
No code changes required for that.

However it looked ugly so I changed its CSS rules as well.

Sets the width of the navigation menu in the footer to 20% 
and centers it.

Text is centered as well.
*/
.footer .container-fluid .nav {
	width: 20%;
	min-width: 200px;
	margin: auto;
	text-align: center;
	font-family: Baumans;
	font-size: large;
	font-weight: bold;
}

/*
Change the line height and the margin in 
the menu items in the footer navigation.
*/
.footer .container-fluid .nav li {
	margin-bottom: 0.5em;
	line-height: 2.5em;
}

.footer .container-fluid .nav li a {
	color: #4C4C4C;
	text-shadow: #98D418 1px 1px 0;
	border-radius: 3px;
}

/*
This rule changes the Back to Top link to an inset layout.
font-size is increased from originally 13px.
*/
.footer .pull-right a {
	color: #4C4C4C;
	text-shadow: #98D418 1px 1px 0;
	font-size: medium;
}

/*
The copyright information is also set to inset layout.
font-size is increased from originally 13px.
*/
.footer p {
	color: #4C4C4C;
	text-shadow: #98D418 1px 1px 0;
	font-size: medium;
}

.article-info {
	font-size: small;
    line-height: 1.2em;
}

.breadcrumb {
	font-size: small;
	line-height: 1.2em;
}

.pager.pagenav {
	font-size: small;
}

/* Portrait and Landscape */
@media (min-width: 951px) {

    /*
    Since the human eye feelds more comfortable with reading at max 60 characters per line, 
    the width of the content div should be limited to a reasonable space.

    In the fluid layout of the Joomla Protostar template 
    the width is unfortunately set to 100 %.
    */
  
  	.blog-featured {
        width: 70%;
        margin: auto;
        float: none;
    }
	
	.row-fluid .search {
		float: none;
		margin: auto;
		width: 70%;	
	}
	
	.navigation .nav-pills {
		/*
		Margin: auto; only works together with width: ?;
		*/
		width: 70%;	
	}
	
	header.header {
		width: 100%;
		height: 500px;
	}

	.header .nav.pull-right, .header-search {
		position: absolute;
		top: 486px;
		right: 28px;
	}
	
	.row-fluid .span12 .item-page {
      	margin: auto;
      	float: none;
		/*width: 60%;*/
		width: 70%;
	}
	
	.row-fluid .span12 .item-page p {
		padding-right: 15%;
	}
	
	.row-fluid .span12 .item-page p img {		
  		max-width: none;
	}
	
	div#project_detail.row-fluid .span6 {
		width: 49%;
	}
	
	div#profile_alex .row-fluid .span6 p {
		padding-right: unset;
	}
	
	/* This condition needs to be set to remove the padding-right 
	in paragraphs in my profile article. */
	div#profile_alex p {
		padding-right: unset;
	}
  
	.tag-category {
		width: 70%;
		margin: auto;
		float: none;
	}

	.blog {
		width: 70%;
		margin: auto;
		float: none;
	}
}

@media (min-width: 1800px) {
  	header.header {
		width: 100%;
		height: 600px;
	}

	.header .nav.pull-right, .header-search {
		position: absolute;
		top: 583px;
		right: 28px;
	}
}

@media (min-width: 2250px) {
  	header.header {
		width: 100%;
		height: 750px;
	}

	.header .nav.pull-right, .header-search {
		position: absolute;
		top: 735px;
		right: 28px;
	}
}

@media (min-width: 2800px) {
  	header.header {
		width: 100%;
		height: 850px;
	}

	.header .nav.pull-right, .header-search {
		position: absolute;
		top: 835px;
		right: 28px;
	}
}

/* To support 4k monitors. */
@media (min-width: 3250px) {
  	header.header {
		width: 100%;
		height: 1020px;
	}

	.header .nav.pull-right, .header-search {
		position: absolute;
		top: 1010px;
		right: 28px;
	}
}

/* Portrait and Landscape */
@media (max-width: 950px) {	
	/*
	Since the human eye feelds more comfortable with reading at max 60 characters per line, 
	the width of the content div should be limited to a reasonable space.

	In the fluid layout of the Joomla Protostar template 
	the width is unfortunately set to 100 %. 

	For mobile devices I want the site to use as much width as possible.
	I might have to regard horizontal as well as vertical orientation of mobile devices or tablets 
	in addition to make it look good and comfortable to read.
	*/
	.row-fluid .span12 {		
		width: 90%;
		font-size: medium;
		line-height: 1.3em;
	}
	
	.navigation .nav-pills {
		/*
		Margin: auto; only works together with width: ?;
		*/
		width: 90%;
	}
	
	header.header {
		width: 100%;
		height: 300px;
	}
  
	.tag-category {
		width: 90%;
		margin: auto;
		float: none;
	}

	.blog {
		width: 90%;
		margin: auto;
		float: none;
	}
	
	.row-fluid .search {
		float: none;
		margin: auto;
		width: 90%;	
	}
	
	.header .nav.pull-right, .header-search {
		position: absolute;
		top: 279px;
		right: 2.4em;
	}
	
	.header .brand {
		margin-bottom: 0.5em;
	}
	
	div#project_detail.row-fluid .span6 {
		width: inherit;
	}
	
	div#profile_alex .row-fluid .span6 p {
		padding-right: unset;
	}

	.inputbox.search-query.input-medium {
		/* height: 12px; */
		/* padding: 2px 3px; */
		/* font-size: 12px; */
		/* line-height: 15px; */
	}
}

/*
Since the protostar template defines a media query 
for the brand / logo area, which sets the text align to center
the below attribute has to be overwritten especially for 
device width up to 768 pixel.
*/
@media (max-width: 768px) {
	header.header {
		width: 100%;
		height: 210px;
	}
  
    .header .brand {
		/*
		float: none;
		display: block;	
		*/
		/* Resetting the text-align to "left". */
		text-align: left;
		margin-bottom: 2.5em;
	}
	
	.header .nav.pull-right, .header-search {
		position: absolute;
		top: 196px;
		right: 2.4em;
	}

	.inputbox.search-query.input-medium {
		width: 140px;
		height: 15px;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.navigation .nav-pills {
        font-size: medium;
	}

	.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
        padding: 6px 15px;
	}
}

@media (max-width: 450px) {
	.header.header {
		height: 150px;
	}

	.header .nav.pull-right, .header-search {
		position: absolute;
		top: 138px;
		right: 1.0em;
	}

	.inputbox.search-query.input-medium {
		width: 140px;
		height: 15px;
		padding-top: 2px;
		padding-bottom: 2px;
	}
}