
@charset "utf-8";
/* CSS Document */


/* reset CSS rules */

	html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
	del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
	h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
	dl, dt, dd, ol, ul, li, fieldset, form, label, legend { 
	vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; outline: 0; padding: 0; margin: 0; border: 0; }

a, ins { text-decoration: none; }

a { color: #666;; }
a:hover { text-decoration: underline; }

/* remember to define focus styles! */

	:focus { outline: 0; }
	body { background-image: url(../images/all.png); background-repeat: repeat-x;  background-color: #000; color: #666;; font: .825em/1.6 "Trebuchet MS", "Helvetica", sans-serif; margin-top: 10px; }
	ol, ul { list-style: none; }

/* tables still need cellspacing="0" in the markup */

	table { border-collapse: separate; border-spacing: 0; }
	caption, th, td { font-weight: normal; text-align: left; }

/* remove possible quote marks (") from <q> & <blockquote> */

	blockquote:before, blockquote:after, q:before, q:after { content: ""; }
	blockquote, q { quotes: "" ""; }

/* wrapper setup */

#wrapper1000 { width: 1000px; margin: 0 auto 0 auto; background-image: url(../images/drop_shadow.png); background-repeat: repeat-y; }
body #wrapper1000 #wrapper960 { width: 960px; margin: 0 auto 0 auto; background-image: url(../images/whiteback.jpg); background-repeat: repeat; border-top: solid 1px #333; }

/* default texts styles */

	h1, h2, h3, h4, h5 { font-family:"Arial"; color: #b70000; letter-spacing: 0em; }
	h1 { font-size: 2.4em; font-weight: bold; }
	h2 { font-size: 1.8em; color: #000; line-height: 1.2em; font-weight: bold; }
	h3 { font-size: 1.1em; font-weight: bold; }
	h4 { font-size: 1em; color: #333; font-weight: bold; }
	h5 { font-size: 0.8em; font-weight: bold; margin-bottom: 5px; }
	
    p { margin-bottom: 10px; }
    
	#breadcrumbs { font-size: 0.8em; }

/* span styles */

	span { color: #b70000; }

/* main content layouts */

#header { width: 100%; height: 180px; background-color: #FFF; }
	#logocont { width: 960px; margin: 0 auto 0 auto; padding-top: 10px; }
    #logo { height: 147px; width: 246px; margin-left: 30px; background-image: url(../images/arroba_salsa_logo.png); background-repeat: no-repeat; }

#nav { height: 40px; }
	#nav li { float: left; display: block; background-color: #333; margin: 0 5px 0 0; padding: 5px 6px 5px 6px; }
    	#nav li:last-child { float: left; display: block; background-color: #333; margin: 0 0 0 0; padding: 5px 5px 5px 5px; }
    #nav li a { color: #FFF; font-weight: bold; text-transform: uppercase; }

#topnav { margin: 0 auto 0 auto; height: 51px; border-bottom: solid 1px #959595; border-top: solid 1px #959595; }
/*	#topnav #buttons { width: 960px; margin: 0 auto 0 auto; padding: 0px 0 0 0; font-size: 1.2em; } */
	#topnav li { float: left; margin: 0px 0 0 0px; display:block; }
    #topnav li a { width: 80px; background-color: #333; }

.clear { clear: both; height: 0; padding: 0; margin: 0; }

#main960 { }
#main { min-height: 882px; width: 920px; margin: 0 auto 0 auto; padding-bottom: 20px; padding-top: 15px; }

#main h2 {}

#main1full { clear: both; margin: 5px auto 5px auto; height: auto; }

#main2equal { clear: both; margin: 5px auto 5px auto; background-image: url(../images/main2equalback.png); background-repeat: repeat-y; background-color: #FFF;  }
#left2equal { float: left; width: 435px; margin-right: 30px; height: auto; }
#right2equal { float: left; width: 435px; height: auto; }

#main2lwide { clear: both; margin: 0px auto 5px auto; background-image: url(../images/main2lwideback.png); background-repeat: repeat-y; background-color: #FFF;  }
#left2lwide { float: left; width: 620px; margin-right: 30px; height: auto; }
#right2lwide { float: left; width: 250px; height: auto; }

#main2xlwide { clear: both; margin: 0px auto 5px auto; background-image: url(../images/main2lwideback.png); background-repeat: repeat-y; background-color: #FFF; }
#left2xlwide { float: left; width: 620px; margin-right: 30px; height: auto; }
#right2xlwide { float: left; width: 250px; height: auto; }

#main3equal { margin: 5px auto 0px auto; height: auto; background-image: url(../images/main3equalback.png); background-repeat: repeat-y; background-color: #FFF;  }
#left3equal { float: left; width: 280px; margin-right: 30px; height: auto; }
#mid3equal { margin-left: 310px; height: auto; }
#right3equal { float: right; width: 280px; margin-left: 30px; height: auto; }

.main3columns { margin: 5px auto 0px auto; height: auto; background-color: #FFF;  }
.left3columns { float: left; width: 190px; margin-right: 20px; height: auto; }
.mid3columns { margin-left: 210px; height: auto; width: 500px; }
	.m3cmwr { width: 500px; }
    	.m3clwr { float: left; width: 200px; background-color: #666; padding-top: 5px; }
        	.m3clwr p { color: #FFF; margin: 0px 10px 5px 10px; }
            .m3clwr a { color: #FFF; }
            .m3clwr h1 , .m3clwr h2, .m3clwr h3 { color: #FFF; padding: 0px 10px 5px 10px; }
            .m3clwr h4 { color: #f8c42a; padding: 0px 10px 0px 10px; }
            .m3clwr h5 { color: #333; padding: 0px 10px 5px 10px; }
        .m3crwr { float: right; width: 300px; background-color: #b70000; padding-top: 5px; }
        	.m3crwr p { color: #000; margin: 5px 10px 5px 10px; }
			.m3crwr h1, .m3crwr h2, .m3crwr h3, .m3crwr h4, .m3crwr h5 { color: #550000; padding: 0px 10px 0px 10px; }
		.m3clwr2 { float: left; width: 200px; background-color: #444;; padding-top: 5px; }
        	.m3clwr2 p { color: #FFF; margin: 0px 10px 5px 10px; }
            .m3clwr2 a { color: #FFF; }
            .m3clwr2 h1 , .m3clwr2 h2, .m3clwr2 h3 { color: #FFF; padding: 0px 10px 5px 10px; }
            .m3clwr2 h4 { color: #333; padding: 0px 10px 0px 10px; }
            .m3clwr2 h5 { color: #f8c42a; padding: 0px 10px 5px 10px; }
        .m3crwr2 { float: right; width: 300px; background-color: #550000; padding-top: 5px; }
        	.m3crwr2 p { color: #f8c42a; margin: 0px 10px 5px 10px; }
			.m3crwr2 h1, .m3crwr2 h2, .m3crwr2 h3, .m3crwr2 h4, .m3crwr2 h5 { color: #f8c42a; padding: 0px 10px 0px 10px; }
            .m3crwr2 h3 a { color: #f8c42a; }
			.m3cmwr { width: 500px; }
	.m3cmwl { width: 500px; }
    	.m3clwl { float: left; width: 320px; background-color: #666; }
        	.m3clwl p { color: #FFF; margin: 0px 10px 5px 10px; }
            .m3clwl a { color: #FFF; }
            .m3clwl h1 , .m3clwr h2, .m3clwr h3 { color: #FFF; padding: 0px 10px 5px 10px; }
            .m3clwl h4 { color: #f8c42a; padding: 0px 10px 0px 10px; }
            .m3clwl h5 { color: #333; padding: 0px 10px 5px 10px; }
        .m3crwl { float: right; width: 180px; background-color: #b70000; padding-top: 5px; }
        	.m3crwl p { color: #000; margin: 5px 10px 5px 10px; }
            .m3crwl h3, .m3crwl h4, .m3crwl h5 { color: #f8c42a; padding: 0px 10px 0px 10px; }
		.m3clwl2 { float: left; width: 200px; background-color: #444;; padding-top: 5px; }
        	.m3clwl2 p { color: #FFF; margin: 0px 10px 5px 10px; }
            .m3clwl2 a { color: #FFF; }
            .m3clwl2 h1 , .m3clwr2 h2, .m3clwr2 h3 { color: #FFF; padding: 0px 10px 5px 10px; }
            .m3clwl2 h4 { color: #333; padding: 0px 10px 0px 10px; }
            .m3clwl2 h5 { color: #f8c42a; padding: 0px 10px 5px 10px; }
        .m3crwl2 { float: right; width: 300px; background-color: #550000; padding-top: 5px; }
        	.m3crwl2 p { color: #f8c42a; margin: 0px 10px 5px 10px; }
			.m3crwl2 h1, .m3crwr2 h2, .m3crwr2 h3, .m3crwr2 h4, .m3crwr2 h5 { color: #f8c42a; padding: 0px 10px 0px 10px; }
            .m3crwl2 h3 a { color: #f8c42a; }

.right3columns { float: right; width: 190px; margin-left: 20px; height: auto; }

#main3lwide { margin: 5px auto 0px auto; height: auto; background-image: url(../images/main3lwideback.png); background-repeat: repeat-y; background-color: #FFF;  }
#left3lwide { float: left; width: 330px; margin-right: 30px; height: auto; }
#mid3lwide { margin-left: 360px; height: auto; }
#right3lwide { float: right; width: 230px; margin-left: 30px; height: auto; }

#footer { clear:both; font-size: 0.9em; height: 120px; border-top: solid 1px #959595; padding-top: 10px; }
	#footermain { width: 900px; margin: 0 auto 0 auto; }
    
/* contact form */

#contact label { display: inline-block; float: left; height: 22px; line-height: 22px; width: 155px; font-size: 1.4em; -webkit-border-radius:5px; color: #666 }
#contact input, textarea, select { width: 280px; margin: 0; padding: 5px; color: #333; background: #f5f5f5; border: 1px solid #ccc; margin: -5px 0 5px 0; font:1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; webkit-border-radius:5px; }   
#contact input:focus, textarea:focus, select:focus { border: 1px solid #999; background-color: #fff; color:#333; }
#contact input.submit { width: 85px; cursor: pointer; border: 1px solid #222; background:#333; color:#fff; }
#contact input.submit:hover { background:#444; }
#contact input[type="submit"][disabled] { background:#888; }
#contact fieldset { padding:20px; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; }
#contact legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; }

#contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */
