@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------
   SOLUCIONES PIXEL
   ------------------------------------------------------------
   Description:  Stylesheet for SOLUCIONES PIXEL
   Filename:     styles.css
   -------------------------------------------------------------*/

/* ========================================================================//
   Index of styles used in specific elements and components for the
   project within this CSS.

   1. ELEMENTS
   2. HOME
   3. MENU
   4. INTERNAL PAGES
   
   
   Used in: 
   ========================================================================//

/* ========================================================================//
   1. ELEMENTS:
   These selectors are only applied to the elements mentioned below.
   ========================================================================//
*/

body {background: url(../images/home_bg.jpg) top left repeat-y; font-family:Georgia, "Times New Roman", Times, serif; margin:0px auto;}
p {font-size:11px; color:#7a7a7a;}
h1 {font-size:11px; color:#0C305B; line-height:14px; font-weight:bold; text-align:left; margin:0; padding:0 }
h2 {font-size:14px; color:#0C305B; line-height:18px; margin-bottom:20px; padding:0; font-weight:bold; text-align:left; text-transform:uppercase}
.breakeronly { clear:both; height:0; font-size:0; margin:0; padding:0; }
.noShow {display:none;}

/* ========================================================================//
   2. COMMON:
   These selectors are applied to elements throughout the whole page.
   ========================================================================//
*/
#header{width:100%; height:33px; background-color:#050709}

#homeContent {float:left; display:inline;width:725px; margin:0; padding:0;border-left:1px dashed #5f5e5e;}
#homeContent1 {float:left; display:inline;width:725px; margin:0; padding:0;}
#homeContentPortfolio {float:left; display:inline;width:725px; margin:0; padding:0;}
#fotter{width:960px; height:33px; margin:auto;border-top:1px dashed #5f5e5e; padding:10px 0 0 0; font-style:italic}

/* ========================================================================//
   3. HOME:
   These selectors are applied to home page.
   ========================================================================//
*/


#cntr_all {width:960px; margin:auto; margin-top:53px; /*background:#006666*/ }
#homeTop{width:673px; padding:0 0 25px 23px; float:left}
#title{padding-bottom:32px;font:Georgia, "Times New Roman", Times, serif;font-size:42px;color:#050708;}
#titlePortfolio{padding-bottom:20px;font:Georgia, "Times New Roman", Times, serif;font-size:42px;color:#050708;}

#topNews{display:inline}
#headlineHome{width:640px;padding-right:24px; float:left;}
#headlineHome p{color:#5f5e5e;font-size:14px;line-height:20px;}
#headline{width:435px;padding-right:24px; float:left;}
#headline p{color:#5f5e5e;font-size:14px;line-height:20px;}
#headright{width:190px;padding-right:23px;float:left;}
#headright p{font-size:14px;font-style:italic;line-height:20px;}
#headright h4{font: Arial, Helvetica, sans-serif;font-size:11px;color:#5f5e5e; line-height:13px; font-weight:normal; float:right}

#portfolioTitle{height:34px; padding:17px 0 0 23px}
#portfolioTitle h3 {color:#000; line-height:22px;}

#portfolioExamples{width:960px;padding:0 0 30px 0; float:left}
.example{width:209px;float:left;padding-left:22px}
.exampleFoto1{width:207px;height:102px;border:1px solid #bcbcbc; }
.exampleFoto2{width:207px;height:102px;border:1px solid #bcbcbc; background: url(../images/exampleFoto2.jpg) no-repeat; }
.exampleFoto3{width:207px;height:102px;border:1px solid #bcbcbc; background: url(../images/exampleFoto3.jpg) no-repeat; }
.exampleText h4 {font-family: Arial, Helvetica, sans-serif; color:#3c3c3c; font-size:12px; font-weight:bold; line-height:17px;}
.exampleText h4 a {color:#2c81ab; text-decoration:none}
.exampleText h4 a:hover {color:#2c81ab; text-decoration:underline}
.exampleText h5 {font-family: Arial, Helvetica, sans-serif; color:#9d9c9c; font-size:10px; line-height:12px;}
.exampleText p {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:11px; line-height:15px; padding-bottom:15px}
.exampleText p a {color:#5f5e5e; text-decoration:none}
.exampleText p a:hover {color:#5f5e5e; text-decoration:underline}

#cntrImages {width:958px; margin-bottom:25px;}
#cntrImages img{border:1px solid #bcbcbc; margin-right:5px;}
#cntrImages p {color:#5f5e5e;font-size:13px;line-height:15px; padding:0 0 0 10px}

.cntrBottom {width:958px; margin-bottom:25px;}
.cntrBottom p {color:#5f5e5e;font-size:14px;line-height:18px; padding:10px}
.cntrBottom p a {color:#5f5e5e; text-decoration:none}
.cntrBottom p a:hover {color:#5f5e5e; text-decoration:underline}
/* ========================================================================//
   4. MENU:
   These selectors are applied to the top nav.
   ========================================================================//
*/
#headerMenu{width:830px; margin:auto;height:23px; padding:10px 0 0 132px;background:url(../images/solucionespixel.gif) no-repeat;float:center}
#headerLeft{ width:378px; float:left;}

#hd_cntr_subMenu {width:420px;float:right;display:inline}
#hd_cntr_subMenu ul li {float:right;}

li.mainMenu {font-family:Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;color:#FFFFFF;padding:0 12px 0 0;line-height:13px}
li.mainMenu a {color:#FFFFFF;;text-decoration:none}
li.mainMenu a:hover {color:#8EBFD7; text-decoration:none;}
li.mainMenu .selected  {color:#8EBFD7; text-decoration:none;}


/*li#mainMenu_home a, li#mainMenu_portafolio a, li#mainMenu_contactenos a {background-repeat: no-repeat; background-position:top left; height:13px; display:block;}

li#mainMenu_home {width:27px; padding:0 19px 0 0;}
li#mainMenu_portafolio {width:79px; padding:0 15px 0 0;}
li#mainMenu_contactenos {width:76px;}

li#mainMenu_home a {background-image:url(../images/hd_menu_bottomHome.gif); width:41px;}
li#mainMenu_portafolio a {background-image:url(../images/hd_menu_bottomPortafolio.gif); width:87px;}
li#mainMenu_contactenos a {background-image:url(../images/hd_menu_bottomContactenos.gif); width:76px;}

li#mainMenu_home a:hover, li#mainMenu_portafolio a:hover, li#mainMenu_contactenos a:hover {background-position:bottom left;}*/


/* ========================================================================//
   6. INTERNAL PAGES:
   These selectors are only applied to the elements of internal pages.
   ========================================================================//
*/
#left_menuInterna {float:left;width:214px;padding:0 20px 25px 0;}
#left_menuInterna h3 {color:#000; line-height:22px;}
#left_menuInterna h4 {font-family: Arial, Helvetica, sans-serif; color:#2c81ab; font-size:12px; font-weight:bold; line-height:18px;}
#left_menuInterna h4 a {color:#2c81ab; text-decoration:none}
#left_menuInterna h4 a:hover {color:#2c81ab; text-decoration:underline}
#left_menuInterna h5 {font-size:12px;color:#000; line-height:18px;}
#left_menuInterna p {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:11px; line-height:12px;padding-bottom:10px;}
#left_menuInterna p a {color:#5f5e5e; text-decoration:none}
#left_menuInterna p a:hover {color:#5f5e5e; text-decoration:underline}

#left_menuInternaPortfolio {float:left;width:213px;padding:0 20px 30px 0;border-right:1px dashed #5f5e5e;}
#left_menuInternaPortfolio h3 {color:#000; line-height:22px;}
#left_menuInternaPortfolio h4 {font-family: Arial, Helvetica, sans-serif; color:#2c81ab; font-size:12px; font-weight:bold; line-height:18px;}
#left_menuInternaPortfolio h4 a {color:#2c81ab; text-decoration:none}
#left_menuInternaPortfolio h4 a:hover {color:#2c81ab; text-decoration:underline}
#left_menuInternaPortfolio h5 {font-size:12px;color:#000; line-height:18px;}
#left_menuInternaPortfolio p {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:11px; line-height:15px; padding-bottom:10px}
#left_menuInternaPortfolio p a {color:#5f5e5e; text-decoration:none}
#left_menuInternaPortfolio p a:hover {color:#5f5e5e; text-decoration:underline}

#left_menuInternaAccenture {float:left;width:213px;padding:0 20px 270px 0;border-right:1px dashed #5f5e5e;}
#left_menuInternaAccenture h3 {color:#000; line-height:22px;}
#left_menuInternaAccenture h4 {font-family: Arial, Helvetica, sans-serif; color:#2c81ab; font-size:12px; font-weight:bold; line-height:18px;}
#left_menuInternaAccenture h4 a {color:#2c81ab; text-decoration:none}
#left_menuInternaAccenture h4 a:hover {color:#2c81ab; text-decoration:underline}
#left_menuInternaAccenture h5 {font-size:12px;color:#000; line-height:18px;}
#left_menuInternaAccenture p {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:11px; line-height:15px; padding-bottom:10px}
#left_menuInternaAccenture p a {color:#5f5e5e; text-decoration:none}
#left_menuInternaAccenture p a:hover {color:#5f5e5e; text-decoration:underline}

#left_menuContactenos {float: left;width: 214px; padding:0 20px 50px 0;}
#left_menuContactenos h3 {color:#000; line-height:22px;}
#left_menuContactenos h4 {font-family: Arial, Helvetica, sans-serif; color:#2c81ab; font-size:12px; font-weight:bold; line-height:18px;}
#left_menuContactenos h4 a {color:#2c81ab; text-decoration:none}
#left_menuContactenos h4 a:hover {color:#2c81ab; text-decoration:underline}
#left_menuContactenos p {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:11px; line-height:15px; padding-bottom:15px}
#left_menuContactenos p a {color:#2c81ab; text-decoration:none}
#left_menuContactenos p a:hover {color:#2c81ab; text-decoration:underline}

#homeTopPortafolio{width:672px;padding:0 0 50px 23px; float:left}
#titlePortafolio{font: Arial, Helvetica, sans-serif;color:#5f5e5e;padding:0 0 22px 0;}
#titlePortafolio h4 {font-family: Arial, Helvetica, sans-serif;font-size:17px;color:#5f5e5e; font-weight:bold;}
#titlePortafolio h4 a {color:#2c81ab; text-decoration:none}
#titlePortafolio h4 a:hover {color:#2c81ab; text-decoration:underline}
#titlePortafolio h4 span {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:11px; font-style:italic; font-weight:normal}

.exampleWeb{width:672px;float:left;}
.exampleWebFotoGrande{width:670px;height:470px;border:1px solid #bcbcbc; background-color:#f3f0e7;}
.exampleWebFotoMediana{width:400px;height:470px;border:1px solid #bcbcbc; background-color:#f3f0e7; margin-right:14px; float:left}
.exampleWebFotoPeq{width:255px;height:auto;border:1px solid #bcbcbc; background-color:#f3f0e7; float:right; margin-right:70px;}
.exampleWebFotoPeq p {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:10px; line-height:13px; padding: 10px}
.exampleWebFotoPeq  p a {color:#5f5e5e; text-decoration:none}
.exampleWebFotoPeq  a:hover {color:#5f5e5e; text-decoration:underline}

.WebFotoPeq{width:155px;height:auto;border:1px solid #bcbcbc; background-color:#f3f0e7; float:left; display:inline}
.WebFotoPeq p {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:10px; line-height:13px; padding: 10px}
.WebFotoPeq  p a {color:#5f5e5e; text-decoration:none}
.WebFotoPeq  a:hover {color:#5f5e5e; text-decoration:underline}

.examplePortfolio{width:650px;height:auto;border:1px solid #bcbcbc; background-color:#f3f0e7;/*opacity: 0.5;*/ float:left;display:inline;}

.examplePortfolio p {font-family: Georgia, "Times New Roman", Times, serif; color:#5f5e5e; font-size:12px; line-height:18px; padding: 15px}
.examplePortfolio p a {color:#5f5e5e; text-decoration:none}
.examplePortfolio a:hover {color:#5f5e5e; text-decoration:underline}

#centerImage{border:1px solid #bcbcbc;display:inline;float:left;height:auto;margin-right:13px;width:400px; cursor:pointer}

.exampleAccentureMed{width:600px;height:600px;border:1px solid #bcbcbc; margin:0 13px 13px 0; float:left;}
.exampleJohnnieWMed{width:600px;height:389px;border:1px solid #bcbcbc; margin:0 13px 13px 0; float:left;}
.exampleActivisionMed{width:599px;height:356px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/activision_spidermanBig.jpg) no-repeat; margin:0 13px 13px 0; float:left;}
.exampleBaskinMed{width:400px;height:772px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/baskinNewsletter.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleJohnnieWalkerMed{width:400px;height:760px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/email_johnnieWalkerMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleAprende_PCMed{width:400px;height:300px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/aprende_PCMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleBulleitBourbonMed{width:599px;height:407px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/bulleitBourbonBig.jpg) no-repeat; margin:0 13px 13px 0; float:left; display:inline}
.exampleColombianitosMed{width:400px;height:434px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/colombianitosMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleDataCreditoMed{width:400px;height:256px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/dataCreditoMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleDerecho_uniAndesMed{width:400px;height:288px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/derecho_uniAndesMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleDunkinMed{width:400px;height:510px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/dunkinMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleItassaMed{width:400px;height:286px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/itassaMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleLatinAmericanMed{width:400px;height:454px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/latinAmericanMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleMcCormickMed{width:400px;height:346px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/mcCormickMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleMeinekeMed{width:400px;height:248px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/meinekeMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleMicrosoftCorpMed{width:400px;height:595px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/microsoftEmailMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleMicrosoftGFSMed{width:400px;height:286px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/microsoftGFSMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleNukakMed{width:400px;height:286px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/nukakMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleOldBayMed{width:400px;height:268px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/oldBayMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.examplePetDentalMed{width:400px;height:229px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/petDentalMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.examplePfisterMed{width:400px;height:240px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/pfisterMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleRedBicicletteMed{width:599px;height:407px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/redBicicletteBig.jpg) no-repeat; margin:0 13px 13px 0; float:left; display:inline}
.exampleSeisjagMed{width:400px;height:217px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/seisjagMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleSimonKidgitsMed{width:599px;height:444px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/simonKidgitsMed.jpg) no-repeat; margin:0 13px 13px 0; float:left; display:inline}
.exampleVerdiemMed{width:400px;height:546px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/verdiemMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}
.exampleXboxMed{width:400px;height:904px;border:1px solid #bcbcbc; background:#f3f0e7 url(../images/xboxMed.jpg) no-repeat; margin-right:13px; float:left; display:inline}

/* ========================================================================//
   7. LEFT MENU:
   These selectors are only applied to the elements of left menu.
   ========================================================================//
*/

#left_menu {float: left;width: 214px; background: url(../images/bg_leftMenu.gif) no-repeat; padding:200px 20px 10px 0;}
#left_menu h3 {color:#000; line-height:22px;}
#left_menu h4 {font-family: Arial, Helvetica, sans-serif; color:#2c81ab; font-size:12px; font-weight:bold; line-height:15px; margin-top:8px;}
#left_menu h4 a {color:#2c81ab; text-decoration:none}
#left_menu h4 a:hover {color:#2c81ab; text-decoration:underline}
#left_menu h5 {color:#000;font-size:11px; line-height:22px;}
#left_menu p {font-family: Arial, Helvetica, sans-serif; color:#5f5e5e; font-size:11px; line-height:14px; margin-bottom:8px;}
#left_menu p a {color:#5f5e5e; text-decoration:none}
#left_menu p a:hover {color:#5f5e5e; text-decoration:underline}

/* ========================================================================//
   8. CONTACT FORM:
   These selectors are only applied to the elements of contact Form.
   ========================================================================//
*/

#box_contact {width:632px; height:auto; text-align:left; float:left}

#box_contact_left {width:264px; height:auto; text-align:left; margin-right:5px; float:left;}

#box_contact_rigth {width:355px; height:auto; text-align:center; float:left; font:11px Verdana, Arial, Helvetica, sans-serif;}

#box_contact_rigth_text {width:330px; height:auto; text-align:left; float:left; font:11px Verdana, Arial, Helvetica, sans-serif;}

#box_contact_rigth01 {width:355px; height:300px; float:left; background:url(../images/img_contact_01.jpg) no-repeat top left}

#box_contact_rigth02 {width:20px; height:auto; float:left;}

#box_contact_rigth03 {width:92px; height:auto; margin-top:15px; float:left;font:bold 11px Verdana, Arial, Helvetica, sans-serif ;text-align:rigth}

#box_contact_rigth04 {width:80px; height:auto; margin-top:4px; float:left;font: bold 10px Verdana, Arial, Helvetica, sans-serif;text-align:right}

#box_contact_rigth05 {width:80px; height:auto; margin-top:15px; float:left;font: bold 10px Verdana, Arial, Helvetica, sans-serif;text-align:right}

#box_contact_rigth06 {width:80px; height:auto; margin-top:20px; float:left;font: bold 10px Verdana, Arial, Helvetica, sans-serif;text-align:right}

#box_contact_rigth07 {width:80px; height:auto; margin-top:15px; float:left;font: bold 10px Verdana, Arial, Helvetica, sans-serif;text-align:right}

#box_contact_rigth08 {width:80px; height:auto; margin-top:18px; float:left;font: bold 10px Verdana, Arial, Helvetica, sans-serif;text-align:right}

#box_contact_rigth09 {width:140px; height:auto; margin-top:30px; float:left;font: bold 10px Verdana, Arial, Helvetica, sans-serif;text-align:right}

#box_contact_text01 {width:180px; height:auto; float: left; text-align:left; margin-top:15px}

.box_contact_text02 {width:180px; height:23px; /*float: left;*/ padding:3px 3px 3px 3px;}

.box_contact_text03 {width:180px; height:77px; /*float: left;*/ padding:3px 3px 3px 3px;}

.box_contact_btsubmit{/*width:180px; height:24px; float: left;*/}
.box_contact_btsubmit_en{/*width:180px; height:24px; float: left;*/}

#box_contact_btsubmitxt{width:180px; height:24px; float: left; margin-top:20px; font: 11px Verdana, Arial, Helvetica, sans-serif;text-align:left}

.box_contact_btemail{width:180px;height:24px;float: left;margin-top: 10px;}


/* ========================================================================//
   9. CONTACT FORM ERROR:
   ========================================================================//
*/

#box_form_error{
	width:290px;
	background-color:#cccccc;
	border:1px solid #bcbcbc;
	float:left;
	margin:20px 0 0 20px;
	display:none;
}

#box_form_title{
	background-color:#c0c0c0;
}

#box_form_title, #box_form_errors{
	padding:6px 12px;
	width:266px;
}

#box_form_title p, #box_form_errors p{
	color:#666666;
}

#box_form_title p{
	font-weight:bold;
}

#box_form_errors p{
	text-align:left;
	line-height:16px;
	font-size:10px;
	padding:0 0 10px 10px;
	text-indent:-10px;
}

.box_contact_btsubmit a { 
	width:180px;
	height:24px;
	display:block;
	background:url(../images/contac_submit.jpg) top left no-repeat;
}

.box_contact_btsubmit_en a {
	width:180px;
	height:24px;
	display:block;
	background:url(../images/contact_submit_btn.jpg) top left no-repeat;
}

.box_contact_btsubmit a:hover { 
	background-position:bottom left;
}

.box_contact_btsubmit_en a:hover { 
	background-position:bottom left;
}

span.altText { display:none; }

.txt_shorts { 
	border:1px solid #666;
}

/**
 * Website
 */
#portfolio ul li{
	float:left;
	margin-bottom:10px;
	margin-right:5px;
}
#portfolio ul li a{
	width:212px;
	height:182px;
	float:left;
	display:block;
	padding:10px 0 0 10px;
	background: transparent url(../images/bg_work.png) 0 -192px no-repeat scroll;
	text-decoration: none;	
}
#portfolio ul li a img{
	border:1px solid #fff;
	width:200px;
	height:100px;	
}
#portfolio ul li a:hover{
	background-position:0 -384px;
}