@import url(reset.css);

/*************************
#415e96 - azul logo
#dd0024 - rojo logo
#a2adc7 - celeste claro
**************************/

body {
  background-color: #f5f5f5;
  font-family: "Arial", sans-serif;
}

.info {
  font-style: italic;
  color: #555;
  font-size: 10px;
  font-family: "Arial", sans-serif;
}

/** layout ********************************************************************/

#main,
#path-nav,
#footer,
#header {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}

#header-banner {
  clear: both;
  margin-bottom: 1px;
}
#header-banner img,
#header-banner object {
  display: block;
}

#path-nav {
  width: 897px;
  background-color: #ddd;
  padding: 3px 0 3px 3px;
  font-size: 11px;
  border-bottom: 1px solid white;
}

#path-nav a {
  text-decoration: none;
  color: #415e96;
}

#main {
  background-color: #ddd;
}
/* clearfix */
#main:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#main {display: inline-block;}
/* Hide this from ie/mac \*/
* html #main {height: 1%;}
#main {display: block;}
/* End hide this from ie/mac */

  #leftbar,
  #rightbar,
  #content {
    float: left;
  }

  #leftbar,
  #rightbar {
    width: 200px;
    min-height: 600px;
    _height: 600px;
  }

  #content {
    width: 497px;
    background-color: white;
    padding: 0 0 1em 3px;
    font-size: 12px;
    min-height: 750px;
    _height: 750px;
  }

#footer {
  clear: both;
  background-color: #415e96;
  color: white;
  font-size: 11px;
  padding: .3em 0;
  font-family: "Arial", sans-serif;
  font-size: 10px;
  border-top: 1px solid white;
  height: 1.3em;
}

#footer .resolution {
  float: left;
  margin-left: 1.3em;
 }

#footer .copyright {
  float: right;
  margin-right: 1.3em;
 }

/** header ********************************************************************/

#header {
  margin-top: 3px;
  background-color: white;
}
#header .logo {
  display: block;
  width: 125px;
  float: left;
}

#header .name {
  text-transform: uppercase;
  color: #415e96;
  font-size: 10px;
  font-family: "Arial", sans-serif;
  width: 280px;
  float: left;
  text-align: right;
  margin-top: 10px;
  margin-left: 10px;
}

#header #i18n {
  float: right;
  font-size: 11px;
  font-family: "Arial", sans-serif;
  margin: 5px 5px 0 0;
}

#header #i18n a {
  color: #415e96;
}

#header #i18n .contact-link {
  padding-left: 10px;
}

#header #i18n a.active {
  font-weight: bold;
}

/** main nav ******************************************************************/

#main-nav {
  clear: both;
  border-bottom: 1px solid white;
  font-size: 12px;
  font-family: "Arial", sans-serif;
  font-weight: bold;
  color: #eee;
}

#main-nav li {
  width: 210px;
  float: left;
  height: 20px;
  line-height: 20px;
  background: transparent url(../img/menu_bullet.png) 5px 5px no-repeat;
  padding-left: 15px;
  border-bottom: 1px solid #a2adc7;
  background-color: #415e96;
  cursor: pointer;
}

#main-nav li.sub {
  position: relative;
}
#main-nav li.wide {
  width: 240px;
}
#main-nav li.narrow {
  width: 180px;
}

#main-nav li a {
  color: #eee;
  text-decoration: none;
  display: block;
}

#main-nav li a:hover {
  color: white;
}

#main-nav li.last {
  clear: right;
}

/* 2nd level */

#main-nav li ul {
  z-index: 5000;
  display: none;
  background-color: white;
  width: 150px;
  position: absolute;
  top: 20px;
  left: 10px;
}

#main-nav li li {
  z-index: 5001;
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 11px;
  background-image: none;
  float: none;
  width: 150px;
  background-color: white;
  font-weight: bold;
}

#main-nav li li a {
  display: block;
  color: #415e96;
  padding: .1em .1em .1em 10px;
}

#main-nav li li a:hover {
  background-color: #ddd;
  border-left: 3px solid #dd0024;
  padding-left: 7px;
  color: #415e96;
}


/** secondary nav *************************************************************/

#secondary-nav {
  margin-bottom: 1.5em;
}

#secondary-nav a {
  text-decoration: none;
  color: #415e96;
  display: block;
  background: #c3c3c3 url(../img/blue_bullet.gif) 7px center no-repeat;
  padding: .3em 0 .3em 20px;
}

#secondary-nav a.highlight {
  font-weight: bold;
}

#secondary-nav a:hover {
  color: #2a34a1;
  background-image: url(../img/red_bullet.gif);
}

#secondary-nav li {
  font-size: 12px;
  background-color: #c3c3c3;
  font-family: "Arial", sans-serif;
  border-bottom: 1px solid white;
}

#secondary-nav li li {
  border-bottom: none;
  margin: 1px 0;
  background: none;
  margin: 0 5px;
  border-top: 1px solid #aaa;
}

#secondary-nav li li a {
  background: #c3c3c3 url(../img/light_blue_bullet.gif) 15px center no-repeat;
  margin-right: 0;
  padding-left: 30px;
}

/** bars **********************************************************************/
#contact-button {
  display: block;
  background: #c3c3c3 url(../img/contact_button.jpg) center top no-repeat;
  height: 108px;
  line-height: 21px;
  padding-left: 20px;
  margin-top: 21px;
  color: #415e96;
  margin-bottom: 25px;
}
.tweeter {
	margin: 30px 0;
	text-align: center;
	display: block;
}

h2.upcoming-events a {
  background:#C3C3C3 url(../img/blue_bullet.gif) no-repeat scroll 7px center;
  color:#415E96;
  display:block;
  padding:0.3em 0 0.3em 20px;
  text-decoration:none;
}
h2.upcoming-events a:hover {
  background-image:url(../img/red_bullet.gif);
  color:#2A34A1;
}

/** content *******************************************************************/

#content h1,
#content h2,
#content h3 {
  font-family: "Arial", sans-serif;
  clear: both;
}

#content h1 {
  color: white;
  background: #415e96 url(../img/header1.png) top left no-repeat;
  text-transform: uppercase;
  font-size: 12px;
  padding-left: 48px;
  height: 22px;
  line-height: 22px;
  font-weight: bold;
  margin: 0 3px 0 0;
}

#content h2 {
  background: #ccc url(../img/squares.gif) 2px 2px no-repeat;
  font-size: 11px;
  line-height: 16px;
  padding-left: 37px;
  margin: 1em 2px 1em;
  color: black;
  font-weight: bold;
  clear: both;
}

#content h3 {
  font-family: "Arial", sans-serif;
  color: #415e96;
  font-weight: bold;
  font-size: 12px;
  margin: 1em 13px .7em;
}

#content address,
#content p {
  margin: 1em 13px;
  font-size: 12px;
}

#content a {
  color: #415e96;
  text-decoration: none;
}

#content ul {
  margin: 1em 0 1em 30px;
}

#content li {
  list-style-type: square;
  margin: .4em 0;
}

#content ul.plain {
  margin: 0;
}

#content ul.plain li {
  list-style-type: none;
  margin: 0;
}

#content ul.event-file {
  margin-left: 1em;
}

#content .notice {
  display: block;
  margin: 1em;
  background-color: #a2adc7;
  text-align: center;
  padding: 1em;
  font-weight: bold;
}

#content form.inline {
  text-align: right;
  padding: .4em 1em;
  background-color: #e3e3e3;
}
#content form.inline input {
  width: 200px;
  border: 1px solid #415e96;
  padding: .2em .4em;
  font-size: 11px;
  color: black;
}
#content form.inline input.submit {
  width: auto;
  border-color: black;
  background-color: #415e96;
  font-weight: bold;
  color: white;
}

/* form big */
#content form.big {
  margin: 1em 13px;
  padding: 1em 30px;
  background-color: #ddd;
}
#content form.big label {
  display: block;
}
#content form.big p {
  margin: 1em 0;
}
#content form.big input,
#content form.big select,
#content form.big textarea {
  width: 400px;
  border: 1px solid #415e96;
  padding: .2em .4em;
  font-size: 11px;
  color: black;
}
#content form.big select {
  width: 410px;
}
#content form.big input:focus,
#content form.big select:focus,
#content form.big textarea:focus {
  border-color: black;
}
#content form.big .buttons {
  text-align: right;
}
#content form.big input.submit {
  width: auto;
  border-color: black;
  background-color: #415e96;
  font-weight: bold;
  color: white;
}
#content form.big .row-errors input,
#content form.big .row-errors select,
#content form.big .row-errors textarea {
	border: 1px solid #db0e2d;
}
#content form span.error {
	color: #db0e2d;
}
#content .message-sent {
	background-color: #ffffcc;
	padding: 20px;
	color: #333;
	font-weight: bold;
}
#content .form-error {
	background-color: #ffcdd2;
	padding: 20px;
	color: #333;
	font-weight: bold;
}

/* secretariat */
body.secretariat #content .photo {
  float: left;
  margin-right: 1em;
  border: 3px solid #415e96;
}
body.secretariat #content .secretariat {
  display: block;
  margin: 3em auto 1em;
}
body.secretariat #content .name {
  font-weight: bold;
  font-family: "Arial", sans-serif;
  font-size: 14px;
}
body.secretariat #content .role {
  font-style: italic;
  margin-bottom: 1em;
}
body.secretariat #content .employee {
  clear: both;
  margin-bottom: 2em;
  background-color: #ddd;
  padding: 1em;
  margin: .7em;
}
body.secretariat #content form.big {
	width: 320px;
	padding: 0;
	margin: 0 0 0 75px; 
	clear: both;
}
body.secretariat #content form.big input,
body.secretariat #content form.big textarea {
	width: 320px;
}
body.secretariat #content form.big .buttons input {
	width: 100px;
}
body.secretariat #content .message-sent {
	clear: both;
	background-color: #ffffcc;
	color: #666;
	padding: 5px;
	/*margin-left: 77px;*/
}
#content .AntiSPAM {
	display: none;
}

/* clearfix */
body.secretariat #content .employee:after
  {content: "."; display: block; height: 0; clear: both; visibility: hidden}
body.secretariat #content .employee {display: inline-block;}
/* Hide this from ie/mac \*/
* html body.secretariat #content .employee {height: 1%;}
body.secretariat #content .employee {display: block;}
/* End hide this from ie/mac */

body.member-list #content .members {
  margin-left: 40px;
}

#content .news-image {
  margin: 0 5px 0 13px;
}
#content .news-image-left {
  float: left;
}
#content .news-image-right {
  float: right;
}

#content .news-attachments {
  clear: both;
  margin: .5em 13px;
  list-style-type: none;
}

#content .news-attachments li {
  list-style-type: none;
}

#content .news-image img {
  border: 2px solid #415e96;
}

#content .search-result-info {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
}

#content .archive {
  display: block;
  background: transparent url(../img/papers.gif) left center no-repeat;
  padding: 6px 0 6px 20px;
  clear: both;
}

/** gallery *******************************************************************/
.gallery {
  clear: both;
}
.gallery div {
	float: left;
	border: solid 1px #ccc;
	margin: 5px;
}
.gallery a {
	display: table-cell;
	width: 120px;
	height: 100px;
	text-align: center;
	vertical-align: middle;
}
.gallery img {
	vertical-align: middle;
}
.gallery-small {
  margin: 0 10px;
}
.gallery-small a {
	width: 55px;
	height: 55px;
}

body.home #content h1 {
  display: none;
}
body.home #content h2 {
  color: white;
  background: #415e96 url(../img/header1.png) top left no-repeat;
  text-transform: uppercase;
  font-size: 12px;
  padding-left: 48px;
  height: 22px;
  line-height: 22px;
  font-weight: bold;
  margin: 0 3px 0 0;
}

body.home #content h3 {
  background: #ccc url(../img/squares.gif) 2px 2px no-repeat;
  font-size: 11px;
  line-height: 16px;
  padding-left: 37px;
  margin: 1em 2px 1em;
  color: black;
  font-weight: bold;
  clear: both;
}

/** headers *******************************************************************/

body.news #content h1
  {background-image: url(../img/headers/committee-social-responsability.jpg); height: 71px}
body.events #content h1
  {background-image: url(../img/headers/secretariat.jpg); height: 71px}
body.about #content h1
  {background-image: url(../img/headers/about.jpg); height: 71px}
body.regional-information #content h1
  {background-image: url(../img/headers/regional_information.jpg); height: 71px}
body.institutional-networking #content h1
  {background-image: url(../img/headers/institutional_networking.jpg); height: 71px}
body.secretariat #content h1
  {background-image: url(../img/headers/secretariat.jpg); height: 71px}
body.member-list #content h1
  {background-image: url(../img/headers/member_list.jpg); height: 71px}
body.committee-energy-integration #content h1
  {background-image: url(../img/headers/committee-energy-integration.jpg); height: 71px}
body.committee-exploration-and-production #content h1
  {background-image: url(../img/headers/committee-exploration-and-production.jpg); height: 71px}
body.committee-enviroment-health-and-safety #content h1
  {background-image: url(../img/headers/committee-enviroment-health-and-safety.jpg); height: 71px}
body.committee-refining #content h1
  {background-image: url(../img/headers/committee-refining.jpg); height: 71px}
body.committee-climate-change-and-energy-efficiency #content h1
  {background-image: url(../img/headers/committee-climate-change-and-energy-efficiency.jpg); height: 71px}
body.committee-pipelines-and-terminals #content h1
  {background-image: url(../img/headers/committee-pipelines-and-terminals.jpg); height: 71px}
body.committee-social-responsability #content h1
  {background-image: url(../img/headers/committee-social-responsability.jpg); height: 71px}
body.contact #content h1
  {background-image: url(../img/headers/contact.jpg); height: 71px}
body.sitemap #content h1
  {background-image: url(../img/headers/sitemap.jpg); height: 71px}


/** leftbar *******************************************************************/

#leftbar {
  background: transparent url(../img/photo_meeting.jpg) left top no-repeat;
  padding-top: 138px;
}


/** rightbar ******************************************************************/


/** paginator *****************************************************************/

.pagination {
  text-align: center;
  margin: 1em 0 1.5em;
}

/** calendar ******************************************************************/
#current-month-cal {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding: 20px 0;
}

/* arpel category */
#leftbar .arpel-category {
  background-color: #d9e6f5;
}
#leftbar .arpel-category .event-calendar-note {
  color: #666;
}
#leftbar .arpel-category .event-calendar caption {
  color: #5b81ae;
}
#leftbar .arpel-category table {
  background-color: #d9e6f5;
  border: 3px solid #3f6591;
}
#leftbar .arpel-category table th {
  background-color: #3f6591;
  color: #eee;
}
body.home #content .arpel-category h3,
#content .arpel-category h2 {
  background-color: #5b81ae;
  color: white;
  font-weight: bold;
  background-image: none;
  padding-left: 10px;
}
#content .arpel-category {
  background-color: #d9e6f5;
  padding-bottom: 10px;
  border-bottom: 1px dashed #5b81ae;
}
#content .arpel-category li strong {
  color: #5b81ae;
}
#content .arpel-category li.arpel {
  line-height: 30px;
  padding-right: 20px;
  background: transparent url(../img/evento_arpel.png) center right no-repeat;
  width: 100px;
}
#content .arpel-category li.arpel span {
  display: none;
}

/* others category */
#leftbar .others-category {
  background-color: #f4fbff;
}
#leftbar .others-category .event-calendar-note {
  color: #415E96;
}
#leftbar .others-category .event-calendar caption {
  color: #7baac6;
}
#leftbar .others-category table {
  background-color: #f4fbff;
  border: 3px solid #5489a9;
}
#leftbar .others-category table th {
  background-color: #5489a9;
  color: #eee;
}
body.home #content .other-category h3,
#content .other-category h2 {
  background-color: #7baac6;
  color: white;
  font-weight: bold;
  background-image: none;
  padding-left: 10px;
}
#content .other-category {
  background-color: #f4fbff;
  padding-bottom: 10px;
  border-bottom: 1px dashed #7baac6;
}
#content .other-category li strong {
  color: #5489a9;
}

/* genericos */
.event-calendar {
  font-size: 11px;
  margin: 0 auto;
  font-family: "Arial", sans-serif;
  background-color: #c8c8c8;
  border: 3px solid #c8c8c8;
}

.event-calendar caption {
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  color: white;
  font-weight: bold;
  margin-top: 10px;
}

.event-calendar th {
  font-weight: bold;
  text-align: center;
  background-color: #bbb;
  color: #333;
}

.event-calendar td,
.event-calendar th {
  padding: 2px 4px;
}

.event-calendar .event {
  background: #bbb;
}

.event-calendar .event a {
  color: #415e96;
  font-weight: bolder;
}

.event-calendar .day-not-in-month {
  color: transparent;
}

.event-calendar .day-not-in-month a {
  color: #888;
}

.event-calendar .today,
.event-calendar .today a {
  color: white;
  background-color: #666;
  font-weight: bold;
}

.event-calendar-note {
  font-size: 10px;
  color: #415e96;
  text-align: center;
  margin: 5px 0;
  font-family: "Arial", sans-serif;
}


/** lightbox *****************************************************/

#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}

#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}

#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}

#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}

#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}

#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}

#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}

#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}

#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}

#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	

#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			

#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

#lightbox-nav-btnNext {
  background-position: right 10px !important;
}

#lightbox-nav-btnPrev {
  background-position: left 10px !important;
}

#lightbox-secNav {
  text-align: right;
}

/* contact */
body.contact #content form {
	padding: 12px;
}
body.contact #content form .field {
	margin: 10px 0;
}
body.contact #content form label {
	width: 110px;
	display: block;
	float: left;
	text-align: right;
	margin-right: 10px;
}
body.contact #content form input,
body.contact #content form textarea,
body.contact #content form select {
	width: 250px;
}
body.contact #content p {
	color: #666;
}
body.contact #content form button {
	background-color: #3b5f9b;
	padding: 5px 10px;
	color: white;
	border: 0;
	font-weight: bold;
	margin-left: 303px;
}
body.contact #content .field-error {
	color: #db0e2d;
	margin-left: 120px;
}
body.contact #content .row-errors input,
body.contact #content .row-errors textarea,
body.contact #content .row-errors select {
	border: 1px solid #db0e2d;
}