/******************************************************************************
 Task Management System (LGC) - Version 0.2 Alpha 2015-04-18
 
 This is the main CSS file for the LGC project.
******************************************************************************/



.button {
  background-color: #2470c9;
  border: none;
  border-radius: 5px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button:disabled {
  background-color: #aaa;
  color: white;
  cursor: not-allowed;
}

.footBox a{
  color: #cf7;
  text-decoration: none;
}



/******************************************************************************
 Remove BS default CSS
******************************************************************************/
*
{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 1em;
	vertical-align: baseline;
}

select,
textarea,
input[type="text"],
input[type="button"],
input[type="submit"]
{
     -webkit-appearance: none;
     border-radius: 0;
}

select::-ms-expand { display: none; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

th
{
	text-align: left;
}








/******************************************************************************
 This sets up some of the basics and defaults for this entire project and also clears some default CSS junk that browsers apply.
******************************************************************************

/* Default font size for the document */
html
{
	-webkit-text-size-adjust: none;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-style: normal;
	font-weight: normal;
	word-wrap: break-word;
	box-sizing: border-box;
	overflow: hidden;
}

body
{
	font-size: 1rem;
}

*, *:before, *:after
{
	box-sizing: inherit;
	word-wrap: inherit;
}

/* 
Default table styles
 */
table
{
	table-layout:fixed;
}

th, td
{
	overflow:hidden;
	white-space: nowrap;
}
 
th
{
}
 
td
{
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* 
Pre formatted display for user entered text with wrap enabled. This will keep tabs and spaces displaying correctly but keep words wrapping as needed.
 */
.userText
{
	white-space: pre-wrap;
}

/* 
Clear some default style junk and set up the basic size of headings. These headings may have colours and some other cosmetic aspects changed or set later on in this CSS file, this will be based on where the heading appears on the page. for example the header and content page areas might set different colours for a h1.
*/
h1, h2, h3 
{
	margin: 0;
	padding: 0;
	border: 0;
}

h1 
{
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 2.5em;
	font-weight: normal;
}

h2 
{
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 2.0em;
	font-weight: normal;
}

h3 
{
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
}

textarea,
.selectWrapper,
input[type="text"],
input[type="button"],
input[type="submit"]
{
    border-radius: 8px;
	padding: 5px;
	height: 2em;
}

.selectWrapper
{
	display: inline-block;
    position: relative;
}

select
{
	background: none;
	width: 100%;
    height: 100%;
}

.selectWrapper:after
{
    content: "▼";
	display: inline-block;
    color: #000;
    position: absolute;
	right: 2px;
	top: calc(50% - 0.5em);
	bottom: 0px;
	height: 50%;
    pointer-events: none;
}

.themeSelectorWrapper
{
	height: 1.8em;
	padding: 3px;
	font-size: 1em;
	width: 11em;
}

/*
This can be used on images and maybe other elements to make them dynamically resizeable.
Will trigger if there is not enough room for them at full size.
*/
.dynamicResize 
{
	width: 100%;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* hide and element */
.hidden 
{
	display: none !important ;
}

/* For things that need to be the size of their parent */
.flexColumn 
{
	z-index: 1;
	display: flex;
	flex-direction: column;
	display: -webkit-flex;
	-webkit-flex-direction: column;
}


/* For things that need to be the size of their parent */
.flexRow
{
	z-index: 1;
	display: flex;
	flex-direction: row;
	display: -webkit-flex;
	-webkit-flex-direction: row;
}

/* 
If some flexbox container items need to "float" against the float direction 
this can be places on an invisible middle element to separate them.
*/
.flexBoxSpacer
{
	flex: 1;
	-webkit-flex: 1;
}

.flexBoxCentre
{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* For things that need to be the size of their parent */
.fullSize 
{
	width: 100%;
	height: 100%;
}

/* For things that need to be the size of their parent */
.fullFlex 
{
	flex: 1;
	-webkit-flex: 1;
}

/* For things that need to be the height of their parent */
.fullHeight 
{
	height: 100%;
}

/* For things you really really want to be the size of their parent */
.noBuffers
{
	border: 0;
	margin: 0;
	padding: 0;
}

/* No scroll bars thanks */
.noScroll
{
	overflow: none;	
}


/*
I hate margins and the default box model as they do not work well for designing layouts based on the view portal. Also margins collapse by default in a way that I find hard to maintain control over.

In this CSS file we use box-sizing: border-box and never user margins. This allows us to use width: 100% whenever we want and know that the element will take up all available room with no overflow. As this is set all the way down the chain from HTML onwards, width 100% should always be the width of the screen or smaller... never bigger. No pixels wasted and no horizontal scrollbars.

The margin element below are used on wrapper divs whenever a margin would normally be used. This has the effect of a margin that does not overflow the screen when width or height 100% are used. It also never horizontally collapses.

Elements with either of these two classes set should always be invisible and have no other styling, they should also ALWAYS be the PARENT of the element that they are to provide a margin for.

.marginFull - This represents the desired amount of padding between all elements.
.marginHalf - This is to hold floating elements which then in turn can have a .marginHalf wrapper applied to each of them to ensure all elements are .marginFull distance from each other in all directions.
*/
.marginDouble, .paddingDouble
{
	padding: 1rem;
}

.marginDoubleTop, .paddingDoubleTop 
{
	padding-top: 1rem;
}

.marginDoubleRight, .paddingDoubleRight 
{
	padding-right: 1rem;
}

.marginDoubleBottom, .paddingDoubleBottom 
{
	padding-bottom: 1rem;
}

.marginDoubleLeft, .paddingDoubleLeft
{
	padding-left: 1rem;
}

.marginFull, .paddingFull 
{
	padding: .5rem;
}

.marginFullTop, .paddingFullTop 
{
	padding-top: .5rem;
}

.marginFullRight, .paddingFullRight 
{
	padding-right: .5rem;
}

.marginFullBottom, .paddingFullBottom 
{
	padding-bottom: .5rem;
}

.marginFullLeft, .paddingFullLeft
{
	padding-left: .5rem;
}

.marginHalf, .paddingHalf 
{
	padding: 0.25rem;
}

.marginHalfTop, .paddingHalfTop
{
	padding-top: 0.25rem;
}

.marginHalfRight, .paddingHalfRight 
{
	padding-right: 0.25rem;
}

.marginHalfBottom, .paddingHalfBottom
{
	padding-bottom: 0.25rem;
}

.marginHalfLeft, .paddingHalfLeft
{
	padding-left: 0.25rem;
}

.marginQuarter, .paddingQuarter 
{
	padding: 0.125rem;
}

.marginQuarterTop, .paddingQuarterTop
{
	padding-top: 0.125rem;
}

.marginQuarterRight, .paddingQuarterRight 
{
	padding-right: 0.125rem;
}

.marginQuarterBottom, .paddingQuarterBottom
{
	padding-bottom: 0.125rem;
}

.marginQuarterLeft, .paddingQuarterLeft
{
	padding-left: 0.125rem;
}

.marginNone, .paddingNone
{
	padding: 0rem;
}

.marginNoneTop, .paddingNoneTop
{
	padding-top: 0rem;
}

.marginNoneRight, .paddingNoneRight
{
	padding-right: 0rem;
}

.marginNoneBottom, .paddingNoneBottom
{
	padding-bottom: 0rem;
}

.marginNoneLeft, .paddingNoneLeft
{
	padding-left: 0rem;
}

.icon
{
	height: 2.5em;
	width:  2.5em;
}








/******************************************************************************
 Below is all the structural information for rows of tabs.
******************************************************************************/
.tabRow
{
	position: relative;
	bottom: -1px;
	
	text-align: center;;
	overflow: hidden;
}

.tabRow li
{
	display: inline-block;
}

.tabRow li a
{
	position: relative;
	display: block;
	z-index: 0;
	
	margin-left: -5px;
	margin-right: -5px;
	padding: 0 15px;
	padding-top: 3px;
	padding-bottom: 3px;
	text-decoration: none;
}

.tabRow li a.activeTab
{
	z-index: 2;
}

.tabRow li a:before,
.tabRow li a:after
{
	position: absolute;
	
	bottom: -1px;
	width: 5px;
	height: 5px;
	content: " ";
}

.tabRow li a:before
{
	left: -5px;
}

.tabRow li a:after
{
	right: -5px;
}







/******************************************************************************
 Now that we have all the basics above out of the way we can work on the page structure.
******************************************************************************/

/* This just holds the entire page */
/* It contains 3 rows: headerContainer, contentContainer, footerContainer */
.pageContainer
{
	z-index: 1;
	display: flex;
	flex-direction: column;
	display: -webkit-flex;
	-webkit-flex-direction: column;
}








/******************************************************************************
 Header
******************************************************************************/


/* 
This is the topmost of the 3 primary page rows
The headerContainer holds the headTop and headBottom elements
*/
.headerContainer
{
}

.headerContainer h1 { font-size: 5em }

/*
This is the top half of the header it is meant to contain things like title/title-images, copyright info, slogans and what have you. These child elements should be grouped together into conceptual units contained in floating .headBox classed containers.
*/
.headTop
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-flex-wrap: wrap;
}

/*
This is the bottom half of the header and could be used as a spacer or to contain navigational items/tabs/links/buttons.
*/
.headBottom
{
	position: relative;
	z-index: 1;
}

.headBottom:after 
{
	content:"";
	position: absolute;
	bottom: -15px;
	left: 0px;
	right: 0px;
	height: 15px;
	pointer-events: none;
}

/*
These little boxes sit in the top/main part of the header and offer grouped content. I don't have any special styling for them at this time.
They contain things like the title/title-image and any other header banner info. 
*/
.headBox
{
	display: flex;
}

.headbox.logo
{
  line-height: 100%;
  text-align: center;
}







/******************************************************************************
 Main Content
******************************************************************************/

/*
This is the centre of the 3 primary page rows
*/
.contentContainer 
{
	flex: 1;
	-webkit-flex: 1;
	overflow-y: scroll;
}

.contentContainer h1 
{
}






/******************************************************************************
 Footer
******************************************************************************/

/*
This is default font and style info for the footer of the page.
*/
.footerContainer
{
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-flex-wrap: wrap;
	font-size: 0.8em;
}

.footerContainer:after 
{
	content:"";
	position: absolute;
	top: -15px;
	left: 0px;
	right: 0px;
	height: 15px;
	background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 90%);
	pointer-events: none;
}

/*
This is default font and style info for the footer of the page.
*/
.footBox
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-flex-wrap: wrap;
}






/******************************************************************************
 Dynamic Data
******************************************************************************/
.productSearchContainer,
.bestPriceContainer,
.bestSalePriceContainer,
.clearButtonContainer { float: left; }

.productNameContainer { clear: left; }

.productName{ width: 380px; }

.productSearch
{
	width: 300px;
}
	
.bestPrice,
.bestSalePrice
{
	width: 175px;
}

.themeSelector
{
}

.storeHolder
{
	clear: both;
}

.storeData
{
	float: left;
	width: 33.33%;
	height: 100px;
}

.storeData .heading
{
	font-weight: 600;
	text-align: center;
}








/******************************************************************************
 Below this point are the media queries that help out with particularly extreme page sizes or orientations. Lets go above and beyond simple portal size responsiveness.
******************************************************************************/

/*
This section comes to the rescue if the display aria is or becomes smaller than 800px.
The styles in here will be applied with presidents over the top of any styles listed above in the case of a narrow view environment and are designed to make the page easier to read on smaller devices or windows.
*/

@media screen and (max-width: 75em)
{
	.displayImportance1
	{
		display: none;  
	}
}

@media screen and (max-width: 62.5em)
{
	.displayImportance2
	{
		display: none; 
	}
}

@media screen and (max-width: 51em)
{
	.displayImportance3
	{
		display: none; 
	}
}


@media screen and (max-width: 27em)
{
	/*
	Let's shrink the fonts over the entire page.
	*/
	body 
	{
		font-size: 0.70rem;
	}

	textarea,
	.selectWrapper,
	input[type="text"],
	input[type="button"],
	input[type="submit"]
	{
		border-radius: 7px;
		padding: 8px;
		height: 3em;
		font-size: 1.3em;
	}

	.themeSelectorWrapper
	{
		height: 2.8em;
		padding: 2px;
		font-size: 1em;
	}
	
	.productSearch
	{
		width: 250px;
	}

	.productName{ width: 315px; }
	
	.bestPrice,
	.bestSalePrice
	{
		width: 150px;
	}
	
	.themeSelector
	{
	}
	
	.icon 
	{
		width: 3em;
		height: 3em;
	}
	
	.tabRow li a
	{
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	
	.tabRow
	{
		font-size: 1.2em;
	}
	
	#floatingTableHead thead tr th
	{
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	
	.marginDouble, .paddingDouble
	{
		padding: 0.5rem;
	}

	.marginDoubleTop, .paddingDoubleTop 
	{
		padding-top: 0.5rem;
	}

	.marginDoubleRight, .paddingDoubleRight 
	{
		padding-right: 0.5rem;
	}

	.marginDoubleBottom, .paddingDoubleBottom 
	{
		padding-bottom: 0.5rem;
	}

	.marginDoubleLeft, .paddingDoubleLeft
	{
		padding-left: 0.5rem;
	}

	.marginFull, .paddingFull 
	{
		padding: 0.25rem;
	}

	.marginFullTop, .paddingFullTop 
	{
		padding-top: 0.25rem;
	}

	.marginFullRight, .paddingFullRight 
	{
		padding-right: 0.25rem;
	}

	.marginFullBottom, .paddingFullBottom 
	{
		padding-bottom: 0.25rem;
	}

	.marginFullLeft, .paddingFullLeft
	{
		padding-left: 0.25rem;
	}

	.marginHalf, .paddingHalf 
	{
		padding: 0.125rem;
	}

	.marginHalfTop, .paddingHalfTop
	{
		padding-top: 0.125rem;
	}

	.marginHalfRight, .paddingHalfRight 
	{
		padding-right: 0.125rem;
	}

	.marginHalfBottom, .paddingHalfBottom
	{
		padding-bottom: 0.125rem;
	}

	.marginHalfLeft, .paddingHalfLeft
	{
		padding-left: 0.125rem;
	}

	.marginQuarter, .paddingQuarter 
	{
		padding: 0.1rem;
	}

	.marginQuarterTop, .paddingQuarterTop
	{
		padding-top: 0.1rem;
	}

	.marginQuarterRight, .paddingQuarterRight 
	{
		padding-right: 0.1rem;
	}

	.marginQuarterBottom, .paddingQuarterBottom
	{
		padding-bottom: 0.1rem;
	}

	.marginQuarterLeft, .paddingQuarterLeft
	{
		padding-left: 0.1rem;
	}
	
	.footerContainer
	{
		padding: 0.25rem;
	}
}


@media screen and (max-width: 20em)
{
	.displayImportance4
	{
		display: none; 
	}
}