/* ===================================================================================================================
   * Second style sheet imported into screen.css.
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */

/* ===================================================================================================================
Title: HTML5 Master styles - design dependent
   =================================================================================================================== */
   
/* Base
====================================================================================================================== */
 
/* Set bg colour. 
Font size here 100%. Changed small, sub, sup from % to ems in reset.css.
Still 100% for body, html, button etc in reset.css -> address if necessary.
Only body should be 100% -> rest should all be ems (at least for responsive). */
body
{
	font-size: 100%;
	background-image: url(../img/cloth_alike_@2X.png);
	background-repeat: repeat;
}

/* Set the default text color to be slightly lighter than pure black to avoid excessive contrast. 
Set fonts to Arial and Helvetica before fallback to sans-serif -> overwrites reset (sans-serif only). */
body, button, input, select, textarea 
{ 
	font-family: Arial, Helvetica, sans-serif;
	color: rgb(49, 46, 56); /* Dark grey - Purple. */
	margin-top: 25px;
}

/* General horizontal rule. Display block. Set height and border top (same). Margin top and bottom. No padding. */
hr 
{ 
	display: block; 
	height: 1px; 
	border: 0; 
	border-top: 1px solid rgb(115, 45, 35); /* Brown */
	margin: 1em 0; 
	padding: 0; 
}

/* Remove text-shadow in selection highlight (can look messy): h5bp.com/i - these selection declarations have to be separate.
Change bg colour for highlighted text.If necessary also add declaration for text colour. */
::-moz-selection 
{ 
	background: #b3d4fc;
	text-shadow: none; 
}
::-webkit-selection
{
	background: #b3d4fc;
	text-shadow: none; 
}
::selection 
{ 
	background: #b3d4fc;
	text-shadow: none; 
}



/* Fonts
====================================================================================================================== */

/* TTF = Screen, EOT = IE5-8, WOFF = IE9, FF3.6, Chrome 5, SVG = IOS. */
/* Create font-face declarations that defines the embedded font name and source file. 
Creates arbitrary name for the font and associates it with the a direct link to the font itself. 
Eot for older IE versions, will ignore the ☺ local rule and the comma separated list and use only eot.
☺ separates from IE before other declarations. Non IE browsers in comma separated list. */
@font-face 
{
    font-family: 'AllerRegular';
    src: url('../fonts/aller_rg-webfont.eot'); /* IE6–8 */
    src: local('☺'),
    url('../fonts/aller_rg-webfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
    url('../fonts/aller_rg-webfont.ttf') format('truetype'), /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
    url('../fonts/aller_rg-webfont.svg#webfontgDXHfW0Z') format('svg'); /* iOS devices */
}
@font-face 
{
    font-family: 'AllerBold';
    src: url('../fonts/aller_bd-webfont.eot'); /* IE6–8 */
    src: local('☺'),
    url('../fonts/aller_bd-webfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
    url('../fonts/aller_bd-webfont.ttf') format('truetype'), /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
    url('../fonts/aller_bd-webfont.svg#webfontMnsVbD2F') format('svg'); /* iOS devices */
}


/* Apply new font to certain definitions: h1 etc*/
/* Fallback to font declarations made in body above. */
h1, h2, h3, h4
{
	font-family: 'AllerBold', Helvetica, Arial, sans-serif; /* CHANGE TO Helvetica, Arial, sans-serif AFTER TESTS!!! */
	font-weight: normal;
}
#primaryContent p, #headRight p, #primaryContent ul, #footer p
{
	font-family: 'AllerRegular', Helvetica, Arial, sans-serif; /* CHANGE TO Helvetica, Arial, sans-serif AFTER TESTS!!! */
}



/* Typography generic
====================================================================================================================== */

/* Standard paragraph. Set colour for text or leave inherited from body declaration above. Line-Height for leading. */
p 
{
	color: inherit;
	padding-bottom: 5px; /* CHANGE OR DELETE, if required. */
	line-height: 1.3;
}

/* Change all heading colours, if required. */
h1, h2, h3, h4, h5, h6
{
	color: rgb(115, 45, 35); /* Brown */
}

/* Addresses font sizes and margins set differently in IE 6/7. 
Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, and Chrome. */
h1 {
	font-size: 2em;
	margin-bottom: 0.5em;
}

h2 {
	font-size: 1.5em;
	margin-bottom: 0.83em;
}

h3 {
	font-size: 1.3em;
	margin-bottom: 1em;
	padding-left: 50px; /* Move heading in appropriately. */
}

h4 
{
    font-size: 1em;
    margin-bottom: 1.33em;
}



/* ===================================================================================================================
   Links
   =================================================================================================================== */

/* Declaring the default link and visited link colours ensures that they are applied in IE6/7.
No underline. Also background colour to be inherited. Then set colour for all link states. LVHA. */
a 
{ 
	color: rgb(255, 0, 0); /* Red. */
	text-decoration: underline;
	background-color: inherit;
}

/* Visited links to be Red. */
a:visited 
{ 
	color: rgb(255, 0, 0); /* Red. */
}

/* Hover and active links to be darker red. */
a:hover, a:active
{ 
	color: rgb(200, 0, 0); /* Darker Red. */
}

/* Improve readability when focused and hovered in all browsers: h5bp.com/h - The outline is shown only if the link gains keyboard focus. */
a:hover, a:active 
{
	 outline: 0;
}


/* Boxes (Round Corners etc)
====================================================================================================================== */

/* Standard definition for rounded corners. */
.boxRound 
{
	-webkit-border-radius: 10px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-moz-border-radius: 10px; /* FF1-3.6 */
	-khtml-border-radius: 10px; /* Linux */
	border-radius: 10px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
	/* useful if you don't want a bg color from leaking outside the border: */
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;	
}


/* Notice when JavaScript is off
====================================================================================================================== */
/* Paragraph with id in HTML. If JS is on -> do not display. If JS is off -> Modernizr adds .no-js class to html tag -> display text. */
.js #jsnotice 
{ 
	display: none; 
}
.no-js #jsnotice 
{
	display: block;
	color: teal; /* CHANGE COLOUR OR DELETE */
	background-color: fuchsia; /* CHANGE COLOUR OR DELETE */
}


/* Page Header
====================================================================================================================== */
/* Set height for header. */
#header
{
	height: 190px;
}

/* Float container responsible for heading text to the right. Float img to the left. 
Appropriate padding. */
#header #headRight
{
	float: right;
	padding-right: 50px;
	padding-top: 15px;
}
#header img
{
	float: left;
	padding-left: 50px;
	padding-top: 20px;
}


/* Wrapper
====================================================================================================================== */

/* Order important for search engines. Calculations: 
590px (primary right) + 370px (secondary left) = 960px */

/* Main wrapper with centres the whole page with set width. 
No background colour or image if faux column to allow bg filler to shine through. */
#wrapper 
{
	width: 960px;
	margin: 0 auto;
	background-color: rgb(255, 255, 255); /* White. */

}


/* PrimaryContent (left column)
====================================================================================================================== */
/* Two main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. */
#primaryContent 
{
	float: left;
	width: 960px;
	display: inline;
}

/* Specifying twoColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float right, set width to 590px. */
#twoColLayout #primaryContent
{
	float: right;
	width: 590px;
}

section
{
	padding-top: 30px;
}

section ul
{
	padding-left: 80px;
	padding-right: 60px;
}

section ul li
{
	padding-bottom: 7px;
	line-height: 1.3;
}



/* SecondaryContent - (left column). Div and not aside in case js is off in IE.
====================================================================================================================== */
/* Secondly content to the right of primary content. Float left. Set width to 370px. */
#aside {
	float: left;
	width: 370px;
}

/* Box inside secondary content (aside). Margin around for distance to aside. Margin left and right for distance between outer edge of container and text. */
.sideContainer
{
	margin: 0px 10px 0px 0px;
}


/* Footer
====================================================================================================================== */

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. Set height. */
#footer 
{
	clear: both;
	width: 960px;
}

/* Appropriate padding for footer content. */
#footer p 
{ 
	font-size: 0.875em;
	padding: 20px 60px 20px 60px; 
	text-align: center;
}


/* Skiplinks 508 Requirements - Accessibility
====================================================================================================================== */

.skiplist 
{
	margin: 0; 
	padding: 0
} 
.skip 
{
	display: none; 
	text-align: left; 
	margin: 0; 
	padding: 0; 
	position: absolute
} /*All incl Opera*/

/* * html */ .skip {display: block} /*Seen by IE*/

.skip 
{
	display: block
} /*Seen by Moz, FF and Safari*/
	
.skip a 
{
	padding: 0 0.5em; 
	display: inline; 
	z-index: 2; 
	text-decoration:none; 
	position: absolute; 
	width: 14em; left: -200em;
}

.skip a:focus, .skip a:active 
{
	position: absolute; 
	left: 0.5em; 
}
	
.skip a:hover 
{
	cursor: default
}


/* Self-Clear Floats
====================================================================================================================== */
/* Clear both after floating boxes anywhere in all browsers. */
.clearing {
  height: 0;
  clear: both;
}





/* Media Queries
====================================================================================================================== */
/* ??? */
@media only screen and (min-width: 35em) 
{

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {

}




/* ======================================================================================================================================================================================================================================
   ======================================================================================================================================================================================================================================
	-- non-semantic helper classes -  Please define your styles before this section. --
=========================================================================================================================================================================================================================================
======================================================================================================================================================================================================================================== */

/* Image replacement. Add the .ir class to any element you are applying image-replacement to. 
Be sure to include background-image: url(pathtoimage.png); for that specific element so that image replacement can occur. */
.ir 
{ 
	background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before 
{
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/* Add the .hidden class to any element you want to hide from all presentations. Hide from both screenreaders and browsers: h5bp.com/u */
.hidden 
{ 
	display: none !important; 
	visibility: hidden; 
}

/* Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden 
{ 
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px; 
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p. */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus 
{ 
	clip: auto; 
	height: auto; 
	margin: 0; 
	overflow: visible; 
	position: static; 
	width: auto; 
}

/* Add the .invisible class to any element you want to hide without affecting layout (display: none would remove completely). 
Hide visually and from screenreaders, but maintain layout. */
.invisible 
{ 
	visibility: hidden; 
}

/* Adding .clearfix to an element will ensure that it always fully contains its floated children. Contain floats: h5bp.com/q. */ 
.clearfix:before, .clearfix:after 
{ 
	content: ""; 
	display: table; 
}
.clearfix:after 
{ 
	clear: both; 
}
.clearfix 
{ 
	zoom: 1; 
}


/* Print styles
====================================================================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}