/* ------------------------------------------------------------------
    Copyright (c) Demosphere International Inc.
    No permission is granted for any purpose without prior
    written consent from Demosphere International Inc.
-------------------------------------------------------------------*/

/*-------- General --------*/

a#navbar-tab-design_edit,
a#navbar-tab-juno { display: none; }

body { background: url('../images/bg.gif') repeat-x #fff; }
div#design-wrapper-responsive { z-index: 2; position: relative; width: 98%; max-width: 960px; margin: 0 auto; padding-top: 3px; }
div#design-wrapper-responsive > header,
div#design-wrapper-responsive > main { width: 100%; }

/*-------- Header --------*/

div#design-header-bg { position: absolute; z-index: 1; width: 100%; height: 391px; background: url('../images/bg-top.jpg') top center no-repeat; }
div#design-header-bg > div { max-width: 978px; height: 126px; margin: 0 auto; background: url('../images/header-bg.jpg') top center no-repeat; }

header > div#design-header-block1 { z-index: 998; position: relative; display: inline-block; top: 2%; width: 25%; max-width: 180px; min-width: 102px; max-height: 162px; padding-left: 16px; text-align: center; }
header > div#design-header-block1 img { max-width: 135px; min-height: 125px; }
header > div#design-header-block2 { position: relative; display: inline-block; top: 42px; left: -8px; width: 50%; }
header > div#design-header-block2 > img { max-width: 375px; min-width: 210px; min-height: 39px; }
header > div#design-header-block3 { position: absolute; top: 103px; right: 4%; }
header > div#design-header-block3 > a { display: inline-block; margin-left: 12px; border-left: 1px solid #2c6495; padding: 1px 0 2px 12px; font-size: 10px; color: #fff; }
header > div#design-header-block3 > a:first-child { margin-left: 0; border-left: 0; padding-left: 0; }
header > div#design-header-block4 { position: absolute; top: 126px; width: 100%; max-width: 960px; height: 100%; max-height: 39px; background: url('../images/header-nav.gif') right top no-repeat; text-align: right; }

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

main > div { float: left; }
main > div:last-child { clear: both; height: 10px; }
main > div > div { min-height: 180px; margin-top: 10px !important; -webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15); -moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15); box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15); background-color: #fff; padding: 4px; }
div#design-block1 { width: 25%; }
div#design-block1 > div { margin: 0 7px 0 10px; }
div#design-block2 { width: 75%; }
div#design-block2 > div { margin: 0 10px 0 3px; }

/*-------- Footer --------*/

footer { clear: both; position: relative; margin: 0 10px; }
footer > div#design-footer-block1 { position: absolute; display: inline-block; top: 40%; left: 0; width: 75%; }
footer > div#design-footer-block1 > div { padding-left: 10px; font-weight: bold; color: #fff; }
footer > div#design-footer-block2 { position: absolute; display: inline-block; top: 20%; right: 20px; width: 25%; max-width: 218px; max-height: 39px; }
footer > div:last-child { max-width: 960px; max-height: 70px; }

/*-------- Responsive --------*/

@media screen and (max-width: 800px) {
	div#design-wrapper-responsive header > div#design-header-block1 img { height: 123px; width: 100px; }
	div#design-wrapper-responsive header > div#design-header-block4 div.ww-item-nav > ul { display: block; margin-right: 0; }
	div#design-wrapper-responsive header > div#design-header-block4 div.ww-item-nav > ul > li { display: block; }
	div#design-wrapper-responsive header > div#design-header-block4 div.ww-item-nav > ul > li > a { display: block; }
	div#design-wrapper-responsive header > div#design-header-block4,
	div#design-wrapper-responsive > main,
	div#design-wrapper-responsive > footer { position: relative; top: 0; max-height: none; }
	/* Main Content */
	div#design-block1 { width: 100%; }
	div#design-block1 > div { margin: 0 10px; }
	div#design-block2 { height: auto; }
	div#design-block2,
	div#design-block3,
	div#design-block4,
	div#design-block5 { width: 50%; }
	div#design-block2 > div,
	div#design-block4 > div { margin: 0 5px 0 10px; }
	div#design-block3 > div,
	div#design-block5 > div { margin: 0 10px 0 5px; }
	footer > div#design-footer-block1 { top: 30%; width: 50%; }
	footer > div#design-footer-block1 > div { font-weight: 400; }
	footer > div#design-footer-block1 > div > span.design-mq-800 { display: none; }
	footer > div#design-footer-block2 { top: 10%; width: 50%; }
}
@media screen and (max-width: 480px) {
	div#design-wrapper-responsive header > div#design-header-block4 div.ww-item-nav > ul > li { float: none; }
	/* Main Content */
	main > div#design-block1,
	main > div#design-block2,
	main > div#design-block3,
	main > div#design-block4,
	main > div#design-block5 { width: 100%; }
	main > div#design-block1 > div,
	main > div#design-block2 > div,
	main > div#design-block3 > div,
	main > div#design-block4 > div,
	main > div#design-block5 > div { margin: 0 10px; }
	footer > div#design-footer-block1 > div > span.design-mq-480 { display: none; }
	footer > div#design-footer-block2 { top: 0; }
}