/*
Website: http://www.thecoppertree.org
Description: Website to accompany the publication of the book The Copper Tre
Author: Joke de WINTER 
Author URI: http://www.jokedewinter.co.uk
Version: 01
Date: February 2012
Type: responsive.css
*/

/**
 * ------------------------------------------------------------------------------- 
 * MIN-WIDTH 480px
 * -------------------------------------------------------------------------------
 */

@media screen and (max-width: 479px) {

/* Logo */
.logo { width: 100%; text-align:center; float: none; }

/* Top menu */
.top-navigation {display: none;}

/* Search */
.search-wrapper { width: 100%; text-align:center; float: none;}
.construction { width: 80%; text-align:center; float: right; }
.search  { display: none; }


/* Main menu */
.menu-wrapper { height: 2.8em; }
.menu-wrapper select { float: right; width: 98%; margin: 0.3em;}
ul.top-menu li div.subnav { max-width: 95.8%; z-index: 1000;} 
ul.top-menu li:hover div.subnav ul.level2 li a { font-size: 0.9em;}

/* Submenu */
.left-nav ul li {font-size:1.1em;}

/* Banner */
.content-banner-container .banner .message { display: none }

/* Pagetools */
#pageTools { display: none; }

/* Content columns */
.content-right-column, .content-left-column, .content-left-column.flip, .content-left-column.flip  {float: none !important; width: 100% !important;}
.rgt-col-rgt-section {float:none; width: 100%; display: inline-block;}
.content-section {float:none; width:100% /* 490px / 786px */; margin:2.2em 0 0 0 /* 22px 35px / 786px 0 0 */; padding-bottom:1em /* 58px */}

/* Breadcrump */
.breadcrumb-wrapper ul {margin-left: 0%/* 194px / 980px */}

/* Adobe reader container */
#adobeContainer { display: none; }

/* Footer */
.footer-wrapper {width:100%; padding:0.7em 0 /* 10px 0 */; height:11em /* 110px */; background-color:#e5e5e6; clear:both; text-align: center;}
.footer {width:95.703% /* 980px / 1024px */; margin:0 auto; padding:0; max-width: 98em;}
ul.footer-nav {width:100% /* 850px / 980px */; margin:0 0 0 0 /* 0 12px / 980px 0 0 */; padding:0; float:none}
ul.footer-nav li {float:none; color:#999; margin:0 0 0 0 /* 0 24px 0 0 */; font-size:1.2em;}
ul.footer-nav li a {color:#999; display: block; padding: 0.5em; background-color: #f1f1f1; margin-bottom: 0.2em;}
ul.footer-nav li a:hover {color:#ff3700}
ul.aware-logo { margin-top: 1.5em; }
ul.aware-logo a { color: #999; float:none; display: block; }
ul.aware-logo li:hover a { color: #ff3700;}

}

/**
 * ------------------------------------------------------------------------------- 
 * MIN-WIDTH 480px
 * -------------------------------------------------------------------------------
 */

@media screen and (min-width: 480px) {

/* Logo */
.logo { width: 25%; }

/* Top menu */
.top-navigation {display: none;}

/* Search */
.search-wrapper  { width: 40% }

/* Main menu */
.menu-wrapper { height: 2.8em; }
.menu-wrapper select { float: right; margin: 0.3em; } 

/* Submenu */
.left-nav ul li {font-size:1.1em;}

/* Banner */
.content-banner-container .banner .message { width: 53%; display: inline-block }
.content-banner-container .banner .message span { font-size: 1em; left: 3.5%; line-height: 1em; }

/* Pagetools */
#pageTools span { display: none; }
#shareitContainerImage { width: 60%; }
#printContainer,#bookmarkContainer, #shareitContainer, #contactUsContainer { width: 78%; }
#pageToolsContainerLeft { width: 28%;}
#pageToolsContainer { width: 67% }

/* Content columns */
.content-left-column, .content-right-column.flip {padding-bottom:8em /* 80px */; }
.rgt-col-rgt-section {float:none; width: 100%;}
.content-section {float:none; width:100% /* 490px / 786px */; margin:0em 0 0 0 /* 22px 35px / 786px 0 0 */; padding-bottom:1em /* 58px */}

/* Breadcrump */
.breadcrumb-wrapper ul {margin-left:25.4% /* 194px / 980px */}

/* Adobe reader container */
#adobeContainer { display: inline-block; }

/* Adobe reader container */
#adobeContainer { display: block; }

/* Footer */
.footer-wrapper {width:100%; padding:1em 0 /* 10px 0 */; height:11em /* 110px */; background-color:#e5e5e6; clear:both}
.footer {width:95.703% /* 980px / 1024px */; margin:0 auto; padding:0; max-width: 98em;}
ul.footer-nav {width:80% /* 850px / 980px */; margin:0 1% 0 0 /* 0 12px / 980px 0 0 */; padding:0; float:left}
ul.footer-nav li {float:left; color:#999; margin:0 2.823% 0 0 /* 0 24px 0 0 */; font-size:1.2em}
ul.footer-nav li a {color:#999}
ul.footer-nav li a:hover {color:#ff3700}
ul.aware-logo a { color: #999; float:right; }
ul.aware-logo a:hover { color: #ff3700;}
ul.aware-logo img { margin-top: 0.5em }
}

/**
 * ------------------------------------------------------------------------------- 
 * MIN-WIDTH 600px
 * -------------------------------------------------------------------------------
 */

@media screen and (min-width: 601px) {

/* Logo */
.logo { width: 25%; }

/* Top menu */
.top-navigation {width:31% ; display: inline-block;}
.top-navigation ul li a {font-size:1.1em;}

/* Search */
.search-wrapper  { width: 40% }

/* Main menu */

/* Submenu */
.left-nav ul li {font-size:1.1em;}

/* Banner */
.content-banner-container .banner .message span { font-size: 1.2em; left: 3.5%; line-height: 1.3em; }

/* Pagetools */
#pageTools { font-size: 1.1em; }
#pageTools span { display: inline-block; }
#shareitContainerImage { width: 45% /* 31 / 125 */; }
#printContainer,#bookmarkContainer, #shareitContainer, #contactUsContainer { margin-right: 0; }
#shareitContainer { position: relative; }
#twitterShare { position: absolute; top: 0.3em; }
#printContainer,#bookmarkContainer, #shareitContainer, #contactUsContainer { width: 91%; }
#pageToolsContainerLeft { width: 14.838%;}
#pageToolsContainer { width: 80.645% }

/* Content columns */
.content-left-column, .content-right-column.flip { width:30% /* 176px / 980px */; float:left; margin:0 1.836% 0 0 /* 0 18px 0 0 */; padding-bottom:8em /* 80px */; }
.content-left-column, .content-right-column.flip { margin:0 0 0 1.836% /* 0 0 0 18px */; }
.content-right-column, .content-left-column.flip { width:68.163% /* 786px / 980px */; float:left; margin:0}
.rgt-col-rgt-section {float:left; width:43.078%; padding-bottom: 8em; }
.content-section {float:left; width:59.340% /* 490px / 786px */; margin:0em 4.452% 0 0 /* 22px 35px / 786px 0 0 */; padding-bottom:5.8em /* 58px */}

/* Breadcrump */
.breadcrumb-wrapper ul {margin-left:22.7% /* 194px / 980px */}

/* FCE products group image on top */
.top-navigation ul li.fce-product-group div { left: -250% /* 40.5 / 960 */; height: 4em; width: 21em /* 349 / 960 */; top: 4em; }
.top-navigation ul li.fce-product-group div.fce-sections-big { left: -250% /* 40.5 / 960 */; height: 5.5em; width: 21em /* 349 / 960 */; top: 4em; }
.fce-product-group div a { bottom: 0.9em; width: 4.5em; height: 1em;}
.fce-product-group div a.industry { left: 22.5% /* 12px / 260px */; }
.fce-product-group div a.automotive { left: 48.2% /* 95px / 260px */; }
.fce-product-group div a.packaging { right: 0.4em /* 178px / 260px */; }
.fce-product-group div a.fce { bottom: 3.1em; width: 7em;}

}

/** 320 480 600
 * ------------------------------------------------------------------------------- 
 * MIN-WIDTH 640px
 * -------------------------------------------------------------------------------
 */

@media screen and (min-width: 640px) {

/* Top menu */
.top-navigation {width:41% /* (574px - 15px) / 980px */;}

/* Search */
.search-wrapper  { width: 30% }

/* Main menu */
.menu-wrapper { height: 5.6em; }
ul.top-menu li ul.level2 { max-width: 95.8%; } 
ul.top-menu li:hover ul.level2 li a { font-size: 0.9em;}

/* Slider */
#content-banner .flex-caption { font-size: 1.1em; line-height: 1.2em;}
#content-banner .flex-caption h2 { font-size: 1.6em; padding-top: 0.1em; }
#content-banner .flex-container { height: 10em;}

/* Banner */
.content-banner-container .banner .message span { font-size: 1.2em; left: 3.5%; }

/* Content columns */
.content-left-column, .content-right-column.flip {width:17.959% /* 176px / 980px */; float:left; margin:0 1.836% 0 0 /* 0 18px 0 0 */; padding-bottom:8em /* 80px */; }
.content-left-column, .content-right-column.flip { margin:0 0 0 1.836% /* 0 0 0 18px */; }
.content-right-column, .content-left-column.flip {width:80.204% /* 786px / 980px */; float:left; margin:0}

/* Breadcrump */
.breadcrumb-wrapper ul {margin-left:19.795% /* 194px / 980px */}

/* FCE products group image on top */
.top-navigation ul li.fce-product-group div { left: -300% /* 40.5 / 960 */; height: 5em; width: 27em /* 349 / 960 */; top: 3.2em; }
.top-navigation ul li.fce-product-group div.fce-sections-big { left: -300% /* 40.5 / 960 */; height: 6.7em; width: 27em /* 349 / 960 */; top: 3.2em; }
.fce-product-group div a { bottom: 0.9em; width: 6em; height: 1.2em; border: none;}
.fce-product-group div a.fce { width: 9em;}

}

/**
 * ------------------------------------------------------------------------------- 
 * MIN-WIDTH 768px
 * -------------------------------------------------------------------------------
 */

@media screen and (min-width: 768px) {

/* Top menu */
ul.top-menu li div.subnav { max-width: 96.5%; z-index: 1000;}
.top-navigation {width:46% /* (574px - 15px) / 980px */;}

/* Search */
.search-wrapper  { width: 25.715% } 

/* Banner */
.content-banner-container .banner .message { width: 43%; }
.content-banner-container .banner .message span { font-size: 1.3em; }

/* Content columns */
.rgt-col-rgt-section {float:left; width:33.078% }
.content-right-column.flip .rgt-col-rgt-section {float:left; width: 100% }
.content-section {float:left; width:59.340%; margin:0em 4.452% 0 0; /* 22px 35px / 786px 0 0 */; padding-bottom:5.8em /* 58px */}
.content-left-column, .content-right-column.flip { width: 17.959%; float: left; margin: 0 1.836% 0 0  0 18px 0 0 ; padding-bottom: 8em /* 80px */; }

/* FCE products group image on top */
.top-navigation ul li.fce-product-group div { left: -600% /* 40.5 / 960 */; height: 6em; width: 30em /* 349 / 960 */; top: 2.2em;}
.top-navigation ul li.fce-product-group div.fce-sections-big { left: -600% /* 40.5 / 960 */; height: 8em; width: 30em /* 349 / 960 */; top: 2.2em;}
.fce-product-group div a { bottom: 1.5em; width: 6.7em; height: 1.3em;}
.fce-product-group div a.fce { width: 9.5em;}

}
@media screen and (max-width: 800px) { 

.content-right-column, .content-left-column, .content-left-column.flip, .content-left-column.flip  {float: none !important; width: 100% !important; margin: 0;}

/* BeAlerted */
#beAlerted #tab_container, #beAlerted .tab_container { display: block; width: 99%; padding-bottom: 20px; padding-right: 8px; }
#signup-button { width: 20%; display: inline; margin: 0; float: none; line-height: 19px; margin-top: 7px; }
#signup-email { width: 75%; } }
/**
 * ------------------------------------------------------------------------------- 
 * MIN-WIDTH 800px
 * -------------------------------------------------------------------------------
 */

@media screen and (min-width: 800px) {

/* Top menu */
.top-navigation ul li a {font-size:1em;}
ul.top-menu li div.subnav { max-width: 97.2%; z-index: 1000;} 
ul.top-menu li:hover div.subnav ul.level2 li a { font-size: 1em;}

/* Slider */
#content-banner .flex-caption { font-size: 1.1em; line-height: 1.4em; }
#content-banner .flex-caption h2 { font-size: 1.8em; padding-top: 0.3em; }
#content-banner .flex-container { height: 28.2em;}

/* Banner */
.content-banner-container .banner .message span { font-size: 1.4em; }


/* Pagetools */
#pageTools { font-size: 1.2em; }
#printContainer,#bookmarkContainer, #shareitContainer, #contactUsContainer { margin-right: 5%; }

/* FCE products group image on top */
.top-navigation ul li.fce-product-group div { left: -800% /* 40.5 / 960 */; }
.fce-product-group div a { width: 7em; height: 1.5em; border: none;}

/* BeAlerted */
#beAlerted #tab_container, #beAlerted .tab_container { display: block; width: 99%; padding-bottom: 20px; padding-right: 8px; }

.content-left-column #beAlerted .tab_container
{
	display: block; 
	width: 79.5%; 
	padding-bottom: 20px; 
	padding-right: 8px;
}

#signup-button { width: 25%; display: inline; margin: 0; float: none; line-height: 19px; margin-top: 7px; }
#signup-email { width: 60%; } 
}

/**
 * ------------------------------------------------------------------------------- 
 * MIN-WIDTH 960px
 * -------------------------------------------------------------------------------
 */

@media screen and (min-width: 960px) {

/* Logo */
.logo {width:15.714% /* 154px / 980px */}

/* Top menu */
.top-navigation ul li a {font-size:1.1em;}
.top-navigation {width:57% /* (574px - 15px) / 980px */;}
ul.top-menu li div.subnav { max-width: 106em; z-index: 1000; } 

/* Submenu */
.left-nav ul li {font-size:1.1em;}

/* Slider */
#content-banner .flex-caption { font-size: 1.1em; line-height: 1.2em; }
#content-banner .flex-caption h2 { font-size: 2.1em; padding-top: 0.3em; }
#content-banner .flex-container { height: 28.2em;}

/* Banner */
.content-banner-container .banner .message span { font-size: 1.6em; left: 4.402%; line-height: 1.4em; }

/* FCE products group image on top */
.top-navigation ul li.fce-product-group div { left: -1100% /* 40.5 / 960 */; height: 6em; width: 30em /* 349 / 960 */; }
.fce-product-group div a { width: 6.5em; border: none;}
.fce-product-group div a.fce { width: 9.7em; bottom: 3.5em;}

/* -------------------------------------------------- */



}

/**
 * ------------------------------------------------------------------------------- 
 * MIN-WIDTH 1000px and 1200px
 * -------------------------------------------------------------------------------
 */
@media screen and (min-width: 1024px) {

/* Top menu */
.menu-wrapper { height: 2.8em; }
.top-navigation ul li a {font-size:1.2em;}
ul.top-menu li div.subnav { max-width: 108.9em; z-index: 1000; } 

/* Submenu */
.left-nav ul li {font-size:1.2em;}

/* Slider */
#content-banner .flex-caption { font-size: 1.2em; line-height: 1.2em; }
#content-banner .flex-caption h2 { font-size: 2.734em; padding-top: 0em; }
#content-banner .flex-container { /*height: 28.2em;*/ height:auto;}

/* FCE products group image on top */
.top-navigation ul li.fce-product-group div { left: -17.5em; height: 6.4em; width: 34.9em; }
.top-navigation ul li.fce-product-group div.fce-sections-big { left: -17.5em; height: 8.4em; width: 34.9em; }
.fce-product-group div a { bottom: 0.9em; width: 5.35em; height: 1.6em;}
.fce-product-group div a.fce { width: 16em;}


/* -------------------------------------------------- */



}

@media screen and (max-width: 800px) {
	#content-banner{
		display: none!important;
	}
}
.dropdown-menu {
	/*font: 14px sans-serif;*/
	position: absolute;
	z-index: 9999999;
	display: none;
}

.dropdown-menu UL {
	max-width: 252px;
	list-style: none;
	background: #FF3700;
	/*border: solid 1px #DDD;*/
	/*border: solid 1px rgba(0, 0, 0, .2);*/
	/*border-radius: 6px;*/
	/*box-shadow: 0 5px 10px rgba(0, 0, 0, .2);*/
	overflow: visible;
	padding: 4px 0;
	margin: 0;
}

.dropdown-menu.has-tip {
	margin-top: 8px;
}

.dropdown-menu.has-tip:before {
  position: absolute;
  top: -6px;
  left: 9px;
  content: '';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #CCC;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  display: inline-block;
}

.dropdown-menu.has-tip.anchor-right:before {
	left: auto;
	right: 9px;
}

.dropdown-menu.has-tip:after {
  position: absolute;
  top: -5px;
  left: 10px;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FFF;
  display: inline-block;
}

.dropdown-menu.has-tip.anchor-right:after {
	left: auto;
	right: 10px;
}


.dropdown-menu.has-scroll UL {
	max-height: 358px;
	overflow: auto;
}

.dropdown-menu LI {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 19px;
	font-size: 12px;
}

.dropdown-menu LI > A,
.dropdown-menu LABEL {
	display: block;
	/*color: #555;*/
	color: white;
	text-decoration: none;
	line-height: 19px;
	/*padding: 3px 15px;*/
	padding: 0.2em 0.6em;
	/*white-space: nowrap;*/
}

.dropdown-menu LI > A:hover,
.dropdown-menu LABEL:hover {
	background-color: #878787;
	/*color: #FF3700;*/
	cursor: pointer;
}

.dropdown-menu .divider {
	height: 1px;
	background: #E5E5E5;
	margin: 5px 1px;
	overflow: hidden;
}

/* Icon Examples - icons courtesy of http://p.yusukekamiyamane.com/ */
.dropdown-menu.has-icons LI > A {
	padding-left: 30px;
	background-position: 8px center;
	background-repeat: no-repeat;
}

.dropdown-span {
	width: 83.8% /* 215px / 252px */;
	height:1.2em /* 15px */;
	padding:0.2em 3.255% 0.2em 3.255%/* 2px 7px / 215px 2px 7px / 215px */;
	color:#FFFFFF;
	border:0.1em solid #ff3700 /* 1px */;
	background-color:#ff3700;
	font-size:1.2em;
	font-family:Arial, Helvetica, sans-serif;
	display: inline-block;
}

.dropdown-span:hover {
	cursor: pointer;
}

.btn_down
{
	position: relative;
	float: right;
	display: block;
	height: 1.5em;
	width: 8.5%;
	background: #FF3700 url(/automotive/content/images/down-btn.gif) no-repeat 45% 35%;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	/*offset problem IE7*/
	.top: -20px;
}

/*.dropdown-menu .undo A { background-image: url(icons/arrow-curve-180-left.png); }
.dropdown-menu .redo A { background-image: url(icons/arrow-curve.png); }
.dropdown-menu .cut A { background-image: url(icons/scissors.png); }
.dropdown-menu .copy A { background-image: url(icons/document-copy.png); }
.dropdown-menu .paste A { background-image: url(icons/clipboard.png); }
.dropdown-menu .delete A { background-image: url(icons/cross-script.png); }*/
/* root element for tabs  */

#content #column_2 ul.css-tabs li
{
	margin: 0px 5px 0px 0px;
}

ul.css-tabs {  
	margin:0 !important; 
	padding:0;
	height:28px;
	border-bottom:1px solid #e4e2d5;
	position: relative;
}

/* single tab */
ul.css-tabs li {  
	float:left;	 
	margin: 0px;
	padding: 0px;
	list-style-type:none;	
	background: url(../content/images/tabs.jpg) repeat top right;
}

/* link inside the tab. uses a background image */
ul.css-tabs a { 
	float:left;
	font-size:13px;
	display:block;
	padding:5px 15px;	
	text-decoration:none;	
	height:18px;	
	color:#777;
	margin-right:2px;
	position:relative;	
	outline: none;
	background: url(../content/images/tab_left.jpg) no-repeat top left;
}

ul.css-tabs a:hover {	
	color: #ff3700;
}

/* single tab */
ul.css-tabs li.current
{  
	float:left;	 
	margin: 0px;
	padding: 0px;
	list-style-type:none;	
	background: url(../content/images/tabs_selected.jpg) top right;	
}
	
/* selected tab */
ul.css-tabs a.current {	
	background: url(../content/images/tabs_selected_left.jpg) no-repeat top left;
	border:0px solid #fff;	
	color:#000;	
	cursor:default;
}

	
/* tab pane */
div.css-panes div
{
	display: none;	
	border-width:0 1px 1px 1px;
	min-height:150px;
	padding:15px 20px;
	background-color: #fff;	
}

div.css-panes div .media
{
	display: block;
}

div.css-panes div .collapse
{
	display: block;
	min-height: 0px;
	padding: 0px;
}

div.css-panes div .collapse_box
{
	min-height: 0px;
	padding: 0px;
}