/* CSS Document */

@import url(/web/css/Forms.css);
@import url(/web/css/Text.css);
@import url(/web/css/Photos.css);
@import url(/web/css/Tables.css);
@import url(/web/css/Buttons.css);
@import url(/web/css/Boxes.css);

@font-face { font-family:"OratorStd"; src:url("http://www.totopobrown.com/web/fonts/OratorStd.woff") format("woff"); font-weight:normal; font-style:normal; }


h1,h2,h3,h4,h5,h6,ul,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 } 
iframe                                                              { border:none; }

body { font-family:OratorStd, Helvetica, Arial, sans-serif; color:#55504A; background:#55504A; font-size:15px; }

h1 { font-size:2.8em; text-align:center; font-weight:normal; position:relative; padding-top:6px; height:74px; margin:1% 5% 4% 5%; color:#F0EEE1; background:url('/web/images/h1.gif'); background-size:cover; }	 
	h1:before { background:url('/web/images/h1_right.gif'); content:''; width:45px; padding-top:6px; height:74px; display:inline-block; position:absolute; right:0; top:0; background-size:cover; }
	
h2 { font-size:2.2em; margin-bottom:3%; line-height:30px; font-weight:normal; color:#458670; }
h3 { font-size:1.3em; margin-bottom:15px; color:#55504A; font-weight:normal; min-height:27px; }
h4 { color:#999; font-size:1em; margin-bottom:10px; }

*+h1, *+h2, *+h3 { margin-top:20px; }
	h1+h1, h1+h2, h1+h3, h2+h1, h2+h2, h2+h3, h3+h1, h3+h2, h3+h3 { margin-top:0; }

ul { list-style:none; }

a  { text-decoration:none; cursor:pointer; color:#0070C0; }
	a:hover { color:#000; }

h2 a { color:#1A74B0; }
	h2 a:hover { color:#145B8B; }
	
img { border:none; }

textarea { font-family:OratorStd, Helvetica, Arial, sans-serif; }

/******************************************************/

.wrap { margin:0 15%; position:relative; }

header { position:relative; background:url('http://www.totopobrown.com/web/images/header.jpg') top center repeat-x; }

	header .banners { text-align:center; }
		header .banners img { height:90px;  }

	header .wrap  { height:275px; }
	
	header .logo    { position:absolute; top:35px; left:3%; height:180px; display:inline-block; vertical-align:middle; }	
	
	/*
	header .social { position:absolute; top:3%; right:20%; z-index:999; }
		
		.social a         { width:25px; height:25px; display:inline-block; background-image:url('http://www.totopobrown.com/web/images/social.gif'); margin-left:2px; }
		.social .facebook { background-position:0 0;  }
		.social .twitter  { background-position:-25px 0;  }
		.social .gplus    { background-position:-50px 0;  }
		.social .youtube  { background-position:-75px 0;  }		
		.social .linkedin { background-position:-100px 0;  }	
		.social .blogspot { background-position:-125px 0;  }		
	*/
	
	header .social { position:absolute; top:140px; right:7%; }
		
		.social a         { width:50px; height:50px; display:inline-block; background-image:url('http://www.totopobrown.com/web/images/social.png'); margin-left:20px; }
		.social .facebook   { background-position:0 0;     }
			.social .facebook:hover   { background-position:0 -50px; }
		.social .instagram { background-position:-50px 0; }
			.social .instagram:hover { background-position:-50px -50px; }
		.social .blogspot   { background-position:-100px 0;}		
			.social .blogspot:hover   { background-position:-100px -50px;}	
	
	
	header .menu-top { position:absolute; top:0; left:1%; color:#bbb; }
		header .menu-top li { display:inline-block; font-size:0.8em; }
		header .menu-top  a { color:#ccc; padding:0 5px; line-height:25px; display:inline-block; }
			header .menu-top  a:hover { color:#eee; }
			
			header .menu-top  li.current { background:#458670; color:#eee; }
			
		
	header nav { position:absolute; top:225px; left:0; right:0; text-align:center; z-index:999; }
	
		header .logo-mini { display:inline-block; visibility:hidden; vertical-align:top; height:40px; margin:6px 20px 0 0; transition:opacity 0.2s linear; }
		header .menu { display:inline-block; vertical-align:top; }
	
		header .menu > li { position:relative; display:inline-block; vertical-align:top;  }
			header .menu > li+li { }
			
			header .menu > li > a { text-decoration:none; color:#ddd; text-align:center; display:block; padding:0 15px; line-height:50px; font-weight:normal; font-size:1.2em; transition:font-size 0.2s linear; }
				header .menu > li > a:hover, header .menu > li.hover > a { color:#fff; }
				
				header .menu > li.current > a { background:#AE9765; color:#fff; } 				
		
		header .menu .cart { margin-left:20px; font-size:0.9em; padding-right:2px; background:url('http://www.totopobrown.com/web/images/header_cart.png') no-repeat center; background-size:contain; }	
		
		header nav.fixed { position:fixed; top:0; background:#935354; }
			
			header nav.fixed .logo-mini { visibility:visible; }
		
			/*
			header nav.fixed .menu > li > a { line-height:34px; font-size:1.1em; }
			header nav.fixed .cart { font-size:0.7em; }
			*/
				
		header .submenu { display:none; position:absolute; top:90px; left:0; text-align:center;  
						 box-shadow:0px 5px 5px 0px rgba(50, 50, 50, 0.5); z-index:99999; width:100%; }

			header .submenu ul { background:#fff;  }		
				header .submenu li    { position:relative; }				   
				header .submenu li+li {  }
				
				header .submenu a { padding:7px 10px; display:block; color:#000; font-size:0.92em; font-weight:normal; text-align:left; }
					header .submenu a:hover        { color:#000; background:#FFE1BF;  }		
					header .submenu li.current > a { color:#fff; background:#0284C5;  }				
				
				header .submenu li > ul { display:none; position:absolute; top:-5px; left:100%; }			/* niveles anidados */
					header .submenu li:hover > ul { display:block; }		

	header .header-button, header .aside-button { display:none; position:absolute; top:5px; z-index:9999; }
		header .header-button                                { right:20px; }
		header .aside-button                                  { right:20px; }
		header .header-button img, header .aside-button img { width:40px; }
					
			header nav.fixed .header-button img, header nav.fixed .aside-button img  { width:36px; }
	
	header .login { left:inherit; right:1%; }
				
	header .navSections { position:absolute; top:285px; left:4%; font-size:0.8em; z-index:999; }
		header .navSections li { display:inline-block; padding-right:5px; }
			header .navSections li+li   { background:url("http://www.totopobrown.com/web/images/list_list.gif") 0 6px no-repeat; padding-left:10px;  }	
			
		header .navSections a	{ font-weight:normal; color:#777; }	
			header .navSections a:hover { color:#444; }			

#page { position:relative; background:#F0EEE1; }
	#page .wrap { padding:3% 0 7% 0; }	

section { margin:0 5%; min-height:200px; }
aside      + section {  }
.otherside + section { float:right; width:54%; margin-right:3%; }
	
/*****************************/

aside { display:none; float:left; width:17%; padding:0; margin-left:3% } 

	/* Menú primer nivel */
	aside .menu  { margin-bottom:20px; }
		aside .menu > ul {  }

			aside .menu > ul > li+li { border-top:solid 1px #ccc; }
				aside .menu > ul > li > a { padding:10px 10px; display:block; color:#111; background:#eee; font-size:1em; border-left:5px #aaa solid; min-height:20px; font-weight:normal; }
					aside .menu > ul > li:hover > a,
					aside .menu > ul > li.hover > a   { color:#000; background-color:#e5e5e5; border-left-color:#777;    }
					aside .menu > ul > li.current > a { color:#fff; background-color:#EB6841; border-left-color:#D15936; }

			/* Menú segundo nivel */
			aside .menu > ul > li > ul {  }
				aside .menu > ul > li > ul > li { }
					aside .menu > ul > li > ul > li > a { background:url("http://www.totopobrown.com/web/images/list.gif") 13px 12px no-repeat; padding:8px 8px 8px 25px; display:block; 
													border-left:5px #d5d5d5 solid; font-weight:normal; color:#444; }
						aside .menu > ul > li > ul > li:hover > a   { color:#333;    background-color:#f3f3f3; border-left-color:#bbb; }				
						aside .menu > ul > li > ul > li.current > a { color:#9D0D1C; background-color:#FCE3DC; border-left-color:#EB6841; }
						
			/* Menú tercer nivel  */
			aside .menu > ul > li > ul > li > ul { background:url("http://www.totopobrown.com/web/images/list.gif") 10px 10px no-repeat; border-left:4px solid #AA007B; }			
			
			/* Menú tercer nivel en adelante */
			aside .menu > ul > li > ul > li ul { border-right:solid 1px #BFCCD5; }
				aside .menu > ul > li > ul > li > ul li { padding-right:20px; background:url("http://www.totopobrown.com/web/images/list.gif") 10px 10px no-repeat; }
				aside .menu > ul > li > ul > li > ul li a { padding:5px 0; width:100%; display:inline-block; color:#555;  }
					aside .menu > ul > li > ul > li > ul li a:hover     { color:#000; }				
					aside .menu > ul > li > ul > li > ul li.current > a { color:#AA007B; }	
					
			aside .menu li.current > ul { display:inherit; }		/* Los padres los habilito desde el Sidebar.php */			

	aside h3 { text-align:center; margin-bottom:5px; }

	aside .search { border:solid 1px #ccc; padding:5px; margin-bottom:20px; }
		aside .search input { display:inline-block; vertical-align:middle; border:none;  }
			aside .search input[type="text"]   { color:#999; padding:2px; width:140px; }			
			aside .search input[type="submit"] { background:url('http://www.totopobrown.com/web/images/search.gif'); height:20px; width:20px; cursor:pointer; }				
									   
	aside .banner { border:solid 1px #ccc; }									   

	aside .cart	{ padding:6% 7%; margin-bottom:20px; background:url('http://www.totopobrown.com/web/images/aside_cart.png') center right no-repeat #ddd; }			
		aside .cart p+p { margin-top:10px; }

	aside .login	{ background:#eee; padding:6% 7% 9% 7%; color:#333; margin-bottom:20px; }		   
		aside .login label                  { display:block; padding:7px 0 3px 0; }	
		aside .login p+p                    { margin-top:15px; }
		aside .login div                    { display:inline-block; margin-bottom:15px; width:47%; }
			aside .login div + div          { margin-left:2%; }
		aside .login input[type="text"],
		aside .login input[type="password"] { padding:4%; border:solid 1px #aaa; border-radius:4px; width:85%; }
		aside .login input.button.mini      { float:right; margin-top:-7px; }
		
		
.otherside { float:right; width:17%; height:400px; margin-right:3%; }		
		
	.otherside .banners { margin-bottom:20px; }						
		.otherside .banners li+li { margin-top:10px; }				   
		.otherside .banners img   { border:solid 1px #ccc; width:100%; }
		
		
.addthis_toolbox { margin-top:20px; min-height:25px; }


footer { background:url('http://www.totopobrown.com/web/images/footer.jpg') top center repeat-x; }
	footer .wrap { height:195px; text-align:center; }
	
	footer .menu {  }
		footer .menu li  { display:inline-block; vertical-align:middle; height:25px; }
		footer .menu a  { color:#F0EEE1; display:inline-block; padding:4px 15px; font-size:0.85em; }
			footer .menu a:hover       { color:#fff; }
			footer .menu li.current a { background:#C6B694; color:#55504A; }
			
		footer .menu li img{ height:25px; }
			
	footer .logo { margin:23px 0; height:100px; }
		
	footer .textSmall { color:#294E41; }		

.addthis_sharing_toolbox { float:right; margin-top:18px; }

#cookies { position:fixed; bottom:0; left:0; width:98%; padding:10px 1%; background:url('http://www.totopobrown.com/web/images/alpha2.png'); color:#eee; text-align:center; font-size:12px; z-index:99999; }
	#cookies a { color:#fff; }
		#cookies a:hover { text-decoration:underline; }
			
.adminMenu { background:url("/web/images/admin.png") no-repeat 10px 10px #FFFFCC; padding:10px 10px 10px 35px; border:solid 1px #CCC; margin-bottom:20px; color:#444; }
	.adminMenu p  { margin-bottom:5px; }
	.adminMenu li { display:inline; padding-right:10px; float:none !important; margin:0 !important; }
	.adminMenu li + li { border-left:solid 1px #CCC; padding-left:10px; } 
		
html.iframe { min-width:0; }
	html.iframe body { background:none;  }		
		html.iframe .menu { padding:10px; width:190px; float:left; background:#eee; }
			html.iframe .menu li { padding:3px 0 3px 10px; background:url("/web/images/submenu.gif") no-repeat 0 7px; }
			html.iframe .menu a  { font-weight:normal; }
				html.iframe .menu a.current { font-weight:bold; }
					
		html.iframe .menu+.content { width:550px; float:right; }		

/********************************************************/


#tabsButtons { margin-bottom:15px; }
	#tabsButtons li { display:inline-block; }

.tab { clear:both; }
	.tab + .tab { display:none; }

.width48p { width:48%; }
.width380 { width:380px; }
.width490 { width:490px; }

.margin       { margin:15px; }
.marginTop    { margin-top:15px; }
.marginRight  { margin-right:15px; }
.marginBottom { margin-bottom:15px; }
	.marginBottom.mini { margin-bottom:5px; }
.marginLeft   { margin-left:15px; }		   

.padding      { padding:15px; } 

.relative { position:relative; }

.left  { float:left; }
.right { float:right; }
.clear { clear:both;  }

.textLeft   { text-align:left; }
.textRight  { text-align:right; }
.textCenter { text-align:center; }

.hidden     { visibility:hidden; }
.notDisplay { display:none; }	
.inline     { display:inline; }

.border { border:1px solid #CCC; }
		
.msgError { color:#714041; font-weight:bold; text-align:center; margin-bottom:20px; font-size:1.1em; }
.msgOK       { color:#458670; font-weight:bold; text-align:center; margin-bottom:20px; font-size:1.1em; }
.msgInfo   { color:#5D84B3; font-weight:bold; margin-bottom:20px; padding:10px 10px 10px 33px; border:solid 1px #5D84B3; background:url("/web/images/information.png") no-repeat 10px 10px; }

.alpha   { opacity:0.5; }
.pointer { cursor:pointer; }

.ui-datepicker.ui-widget-content { display:none; }


/* ==========================================================================
   Media Queries
   ========================================================================== */ 


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

	.wrap { margin:0 12%; }	
	h1    { font-size:2.8em; height:69px; }
		h1:before { width:42px; height:69px; }
}

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

	.wrap { margin:0 5%; }	
	h1    { font-size:2.5em; height:64px; }
		h1:before { width:39px; height:64px; }
}

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

	.wrap { margin:0 2%; }
}  
  
@media only screen and (max-width:900px) {	
	
	body { font-size:13px; }
	
	h1    { font-size:2.2em; height:49px; margin-top:2%; }
		h1:before { width:31px; height:49px; }
	
	.wrap { margin:0; }
	
	header .menu { display:none; position:absolute; top:0; left:0; right:0; background:#935354; box-shadow:0px 5px 5px 0px rgba(30, 30, 30, 0.35); }
		header .menu > li { display:block; }
		header .menu .cart { margin-left:0; }
		
	header .header-button { display:inline-block; }
	
	header .social { right:80px; }
	
	aside { width:250px; position:absolute; top:0; left:-330px; z-index:9999; background:#fff; padding:10px 20px; box-shadow:0px 5px 5px 0px rgba(30, 30, 30, 0.35); } 
		aside + section      { width:auto; float:none; margin:0 3%; }
		
	.otherside { width:20%; }	
		.otherside + section { width:71%; }
		
	header .aside-button { display:inline-block; }	
}

@media only screen and (max-width:640px) {	
	
	h1    { font-size:2em; height:44px; margin-top:4%; }
		h1:before { width:27px; height:44px; }
	
	.otherside { display:none; }
		.otherside + section { width:auto; float:none; margin:0 3%; }
}

@media only screen and (max-width:590px) {
	
	h1  { margin-top:6%; }
}

@media only screen and (max-width:530px) {
	
	h1    { font-size:1.8em; height:39px; margin:8% 2% 3% 2%;  }
		h1:before { width:26px; height:39px; }
	
	header { margin-top:25px; }
	header .menu-top { top:-25px; }
	header .login    { top:0; }
	
	header .social { top:30px; right:3%; }		
		.social a   { display:block; margin:10px 0 0 0; }	
		
	footer .menu a { padding:6px 4px; font-size: 0.7em; }
	footer .menu li img {display:none; }
	
}

@media only screen and (max-width:400px) {	
	
	h1    { font-size:1.6em; height:34px; margin:8% 2% 3% 2%;  }
		h1:before { width:23px; height:34px; }
}

/*