/**
 * Responsive stylesheet
 * Norbert @ Laposa Ltd, 2012/12/20
 *
 * To use change global extra_head in /backoffice/advanced/configuration
 * from: <meta name="viewport" content="width=1024" />
 * to: <meta name="viewport" content="width=device-width" />
 */
 
/**
 * draw border inside elemements, TODO: include to global CSS
 */
 
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/**
 * 1) Always force a scrollbar in non-IE 
 * 2) Remove iOS text size adjust without disabling user zoom: www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ 
 */
 
html { overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }

/**
 * make container full size
 */
 
#pageWrapper { padding: 0; }
#container { max-width: 100%; padding: 0; }

/**
 * fluid images
 */
 
img {max-width: 100%; height: auto; width: auto; /* ie8 fix*/}

/**
 * fluid video to be used in responsive page layout
 * thanks Jonathan Suh http://www.jonsuh.com/blog/tutorials/responsive-youtube-vimeo-embed-and-html5-video-with-css/
 *
 */
 
div.fluid-video {height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden;}
 
div.fluid-video.widescreen {padding-bottom: 57.25%;}
 
div.fluid-video.vimeo {padding-top: 0;}

div.fluid-video embed,
div.fluid-video iframe,
div.fluid-video object,
div.fluid-video video {top: 0; left: 0; width: 100%; height: 100%; position: absolute;}

/**
 * Screen size rules
 */

/* styles for narrow desktop browsers and iPad landscape */
@media all and (max-width: 1024px) {
	#contentWrapper { margin: 0; }
}

/* styles for narrower desktop browsers and iPad portrait */
@media all and (max-width: 768px) {
	#content { width: 100%; float: none; clear: both; }
	#primaryNavigation {width: 100%; margin-bottom: 1em;}
	#primaryNavigation li {float: left; margin-right: 2em;}
    #primaryNavigationWrapper {margin-right: 0;}
    #contentSide {position: static!important; width: 100%!important;}
}

/*make sure primaryNavigation is visibile when interaction with revealNavigationButton */
@media all and (min-width: 768px) {
	#primaryNavigation {display: block!important;}
}

/* styles for iPhone/Android landscape (and really narrow browser windows) */
@media all and (max-width: 480px) {
    #onxshop_cms_content { width: 100%; overflow: hidden; }
    #logo {margin-bottom: 1em;}
    #globalNavigation {clear: both; float: none;}
    #globalNavigation li {float: none;}
    #primaryNavigation li {float: none; margin-right: 0;}
    button,
    a.button {font-size: 200%;}
    /*2cols forms (can be set on whole form or particular fieldset*/
	form.twoColumns label,
	fieldset.twoColumns label {padding-right: 0;}
	form.twoColumns span.label,
	fieldset.twoColumns span.label {width: auto; float: none; text-align: left;}
	form.twoColumns span.field,
	fieldset.twoColumns span.field {width: 100%;}
	input {font-size: 2em;}
	div.twoColumnPage div.columnOne, 
    div.twoColumnPage div.columnTwo,
    div.twoColumnLayout div.layoutColumnOne.ofTwo,
    div.twoColumnLayout div.layoutColumnTwo.ofTwo {width: auto!important; float: none!important;}
    div.twoColumnPage div.columnWrapper {margin: 0!important;}
    div.threeColumnLayout div.layoutColumnOne.ofThree,
    div.threeColumnLayout div.layoutColumnTwo.ofThree,
    div.threeColumnLayout div.layoutColumnThree.ofThree {width: auto; float: none;}
    div.fourColumnLayout div.layoutColumnOne.ofFour,
    div.fourColumnLayout div.layoutColumnTwo.ofFour {width: 50%;}
    div.fourColumnLayout div.layoutColumnThree.ofFour,
    div.fourColumnLayout div.layoutColumnFour.ofFour {width: 50%;}
    div.fiveColumnLayout div.layoutColumnOne.ofFive,
    div.fiveColumnLayout div.layoutColumnTwo.ofFive,
    div.fiveColumnLayout div.layoutColumnThree.ofFive,
    div.fiveColumnLayout div.layoutColumnFour.ofFive,
    div.fiveColumnLayout div.layoutColumnFive.ofFive {width: auto; float: none;}
    div.sixColumnLayout div.layoutColumnOne.ofSix,
    div.sixColumnLayout div.layoutColumnTwo.ofSix,
    div.sixColumnLayout div.layoutColumnThree.ofSix,
    div.sixColumnLayout div.layoutColumnFour.ofSix,
    div.sixColumnLayout div.layoutColumnFive.ofSix,
    div.sixColumnLayout div.layoutColumnSix.ofSix {width: auto; float: none;}
    div.layoutColumnWrapper {margin: 0!important;}
}

/* styles for iPhone/Android portrait */
@media all and (max-width: 320px) {
	
}