/**********************************************************
 *                                                        *
 *                        GLOBAL RESET                    *
 *                                                        *
 **********************************************************/

*
{
	margin:                     0;
	padding:                    0;
}
 
html, body
{
  width:                      100%;
  height:                     100%;
  text-align:                 center;
}



/**********************************************************
 *                                                        * 
 *                           FONTS                        *
 *                                                        *
 **********************************************************/
 
 
@font-face {
  font-family: "GillSansLight";
  src: url('../fonts/light-webfont.eot');
  src: url('../fonts/light-webfont.eot?#iefix') format('eot'), url('../fonts/light-webfont.woff') format('woff'), url('../fonts/light-webfont.ttf') format('truetype'), url('../fonts/light-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
@font-face {
  font-family: "GillSansMedium";
  src: url('../fonts/medium-webfont.eot');
  src: url('../fonts/medium-webfont.eot?#iefix') format('eot'), url('../fonts/medium-webfont.woff') format('woff'), url('../fonts/medium-webfont.ttf') format('truetype'), url('../fonts/medium-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}



/**********************************************************
 *                                                        * 
 *                        TYPOGRAPHY                      *
 *                                                        *
 **********************************************************/

body 
{
  font:                       15px/1.2em Arial, "Trebuchet MS", Helvetica, sans-serif;
  color:                      #222;  
}

a, a:link, a:active, a:visited
{
  outline:                    none;
  text-decoration:            underline;
  color:                      #77AEE5;
}

a:hover
{
  text-decoration:            none;	
}

h1
{
	padding:                    1px 0 1px 0;
	color:                      #212C50;
	font-weight:                none;
	font-size:                  30px;
	line-height:                1.3em;
	font-family:                GillSansLight;
}

h2
{
	padding:                    4px 0 4px 0;
	line-height:                1.2em;
	font-size:                  20px;
	color:                      #344DA0;
	font-family:                GillSansLight;
}

h3
{
	font-weight:                bold;
	padding:                    8px 0 0 0;
	line-height:                1.4em;
	color:                      #344DA0;
	font-size:                  15px;
	font-family:                GillSansLight;
}

p 
{
  line-height:                1.5em;
  cursor:                     default;
  padding:                    0 0 0 0;
  text-align:                 justify;
}

img 
{
  border:                     none;
}

td 
{
  vertical-align:             top;
  line-height:                1.5em;
}

ul 
{
  padding:                    0 0 7px 0;
  margin:                     0;
}

li 
{
	line-height:                1.7em;
  padding:                    0 0 0 2px;
  text-align:                 justify;
}


/**********************************************************
 *                                                        *
 *                        STRUCTURE                       *
 *                                                        *
 **********************************************************/
 
body 
{
	background:                 #1C2C3E;
}

div.wrapper
{
	position:                   relative;
  text-align:                 left;
  width:                      970px;
  margin:                     0 auto;
  padding:                    0;	
}

h1.first
{
	padding:                    1px 0 1px 0;
	color:                      #212C50;
	font-weight:                none;
	font-size:                  35px;
	line-height:                1.3em;
	font-family:                GillSansLight;
  border-bottom:              solid 1px #aaa;
  width:                      970px;
  margin-bottom:              15px;
}

div#header
{
  width:                      100%;
	background:                 #fff url(../img/header.jpg) no-repeat 100% 0;
	height:                     160px;
}

div#top
{
	background:                 #fff;
}

div#top-background
{
	background:                 #fff url(../img/top.jpg) repeat-x 0 0;
	height:                     90px;
}
div#logo
{
	position:                   absolute;
	height:                     100px;
	top:                        -241px;
}

div#slogan
{
	position:                   absolute;
	height:                     100px;
	top:                        -200px;
	left:                       180px;
}

div#slogan h1
{
	font-size:                   50px;
	letter-spacing: 1px;
}

div#slogan h2
{
	font-size:                   13px;
	color:                       #212C50;
	letter-spacing: 7px;
}

div#flag
{
	position:                   absolute;
	height:                     100px;
	top:                        -200px;
	right:                      -6px;
}
div#content
{
	position:                   relative;
	text-align:                 left;
	padding:                    20px 20px 10px 0px;
}

/**********************************************************
 *                                                        *
 *                        Bottom                          *
 *                                                        *
 **********************************************************/
 div#bottom
{
	background:                 transparent url(../img/footer.jpg) repeat-x 0 0;
	height:                     528px;	

}

div#social
{	
	height:                     180px;
}

div#footer
{	
	font-family:                GillSansLight;
	font-size:                  14px;
	color:                      #696C6E;
}

div#footer ul
{
	list-style:                 none;
	padding:                    0 0 0 2px;
  margin:                     0;
}

div#footer h2
{
	font-size:                  20px;
	padding:                    4px 0 6px 0;
	color:                      #fff;
	text-shadow:                1px 1px 1px #000;
}

div#footer li
{
  padding:                    0 0 4px 0;
}

div#footer a
{
	
	display:                    block;
  color:                      #696C6E;
  text-decoration:            underline;
}

div#footer a:hover
{
	text-decoration:            underline;
	color:                      #fff;
}

div#footer-logo
{
	position:                   absolute;
	top:                        -31px;
}

div#slogan-footer
{
	position:                   absolute;
	top:                        30px;
	left:                       150px;
	color:                      #fff;
}

div#slogan-footer h1
{
	color:                      #fff;
  font-size:                  43px;
  letter-spacing: 2px;
}
div#slogan-footer h2
{
	color:                      #fff;
	font-size:                  11px;
	letter-spacing:             7px;
}
/**********************************************************
 *                                                        * 
 *                       Menu                             *
 *                                                        *
 **********************************************************/
 
 div#menu
{
  position:                   absolute;
  top:                        -85px;
  right:                      -20px;
  height:                     100px;
} 

/**********************************************************
 *                                                        * 
 *                        button                          *
 *                                                        *
 **********************************************************/
 
a.button,
a.button:link,
a.button:active,
a.button:visited
{
  position:                   relative;
  color:                      #959595;
  font-size:                  15px;
  padding:                    3px 7px 3px 7px;
  text-decoration:            none;
  background-color:           #EEEEEE;
  border:                     1px solid #BBBBBB;
  -webkit-border-radius:      5px; 
  -khtml-border-radius:       5px; 
  -moz-border-radius:         5px; 
  border-radius:              5px;
}

a.button:hover
{
  background-color:           #999999;
  color:                      #fff;
}

div#mapa
{
	position:                  absolute;
	right:                     85px;
	top:                       335px;
}

/**********************************************************
 *                                                        * 
 *                        areas                           *
 *                                                        *
 **********************************************************/
a.saneamento,
a.saneamento:link,
a.saneamento:visited,
a.saneamento:active,
a.saneamento:hover
{
	position:                   absolute;
	top:                        140px;
	right:                      10px;
	background:                 transparent url(../lib/areas/saneamento.jpg);
	width:                      223px;
	height:                     294px;
	text-decoration:            none;
}
 
a.saneamento span
{
	position:                   absolute;
	top:                        255px;
	right:                      62px;
  color:                      #B9B9B9;
	font-family:                GillSansLight;
	font-size:                  16px;
  cursor:                     pointer;
} 

a.saneamento:hover span
{
  color:                      #fff;
}

a.abastecimento-agua,
a.abastecimento-agua:link,
a.abastecimento-agua:active,
a.abastecimento-agua:visited,
a.abastecimento-agua:hover
{
	position:                   absolute;
	top:                        110px;
	right:                      198px;
	background:                 transparent url(../lib/areas/abastecimento-agua.jpg);
	width:                      223px;
	height:                     294px;
	text-decoration:            none;	
}
 
a.abastecimento-agua span
{
	position:                   absolute;
	top:                        255px;
	right:                      14px;
  color:                      #B9B9B9;
	font-family:                GillSansLight;
	font-size:                  16px;
	cursor:                     pointer;
}

a.abastecimento-agua:hover span
{
  color:                      #fff;
}

a.recursos-hidricos,
a.recursos-hidricos:link,
a.recursos-hidricos:active,
a.recursos-hidricos:visited,
a.recursos-hidricos:hover
{
	position:                   absolute;
	top:                        70px;
	right:                      385px;
	background:                 transparent url(../lib/areas/recursos-hidricos.jpg);
	width:                      223px;
	height:                     294px;
	text-decoration:            none;	
}

a.recursos-hidricos span
{
	position:                   absolute;
	top:                        255px;
	right:                      40px;
	color:                      #B9B9B9;
	font-family:                GillSansLight;
	font-size:                  16px;
	cursor:                     pointer;

}

a.recursos-hidricos:hover span
{
  color:                      #fff;
}

div#slideshow
{
  padding:                    30px 0 0 0;
}



/**********************************************************
 *                                                        * 
 *                     calendar                           *
 *                                                        *
 **********************************************************/

div#dnaeventsview_calendar
{
	position:                   relative;
	width:                      256px;
}

div#dnaeventsview_calendar .instructions
{
	text-align:                 right;
	font-size:                  9px;
}

div#dnaeventsview_calendarblock
{
	position:                   relative;
	width:                      256px;
	height:                     285px;
	background:                 transparent url(../view/dnaeventsview/img/calendar.png) no-repeat 0 0;
}

a.prev
{
	position:                   absolute;
	top:                        28px;
	left:                       10px;
	width:                      20px;
	height:                     20px;
	background-image:           url(../view/dnaeventsview/img/prev.gif);
	background-position:        0 -20px;
	background-repeat:          no-repeat;
}

a.prev:hover
{
	background-position:        0 0;
}

a.next
{
	position:                   absolute;
	top:                        28px;
	right:                      14px;
	width:                      20px;
	height:                     20px;
	background-image:           url(../view/dnaeventsview/img/next.gif);
	background-position:        0 -20px;
	background-repeat:          no-repeat;
}

a.next:hover
{
	background-position:        0 0;
}

span#dnaeventsview_monthname
{
	position:                   absolute;
	top:                        28px;
	left:                       34px;
	width:                      184px;
	text-align:                 center;
	color:                      #fff;
	text-shadow:                1px 1px 1px #000;
}

table#calendar
{
	position:                   absolute;
	top:                        54px;
	left:                       4px;
}

table#calendar th
{
  font-weight:                none;
  font-size:                  12px;
  padding:                    0;
  text-align:                 center;
  height:                     32px;
}

table#calendar td
{
	border:                     solid 1px #CFCFCF;
}
table#calendar td.cal-day-today
{
	border:                     solid 1px #f00;
}

table#calendar td a,
table#calendar td a:link,
table#calendar td a:active,
table#calendar td a:visited,
table#calendar td a:hover
{
	display:                    block;
	width:                      33px;
	height:                     25px; /* 30 */
	padding:                    5px 0 0 0;
	text-align:                 center;
	font-size:                  10px;
	background-color:           #fff;
	color:                      #000;
	text-decoration:            none;
	cursor:                     default;
	text-shadow:                1px 1px 1px #888;
}

table#calendar td a.cal-day-today,
table#calendar td a.cal-day-today:link,
table#calendar td a.cal-day-today:active,
table#calendar td a.cal-day-today:visited,
table#calendar td a.cal-day-today:hover { background-color: #DDEAFF; }
table#calendar td a.cal-day-event,
table#calendar td a.cal-day-event:link,
table#calendar td a.cal-day-event:active,
table#calendar td a.cal-day-event:visited,
table#calendar td a.cal-day-event:hover { color: #fff; background-color: #1757C1; cursor:pointer; }
table#calendar td a.cal-day-today-event,
table#calendar td a.cal-day-today-event:link,
table#calendar td a.cal-day-today-event:active,
table#calendar td a.cal-day-today-event:visited,
table#calendar td a.cal-day-today-event:hover { color: #fff; background-color: #3C72CC; cursor:pointer; }
table#calendar td a.cal-day-other,
table#calendar td a.cal-day-other:link,
table#calendar td a.cal-day-other:active,
table#calendar td a.cal-day-other:visited,
table#calendar td a.cal-day-other:hover { color: #555; background-color: #eee; }
table#calendar td a.cal-day-other-event,
table#calendar td a.cal-day-other-event:link,
table#calendar td a.cal-day-other-event:active,
table#calendar td a.cal-day-other-event:visited,
table#calendar td a.cal-day-other-event:hover { color: #fff; background-color: #3B537B; cursor:pointer; }

div#dnaeventsview-balloon
{
	position:                   absolute;
	top:                        0;
	left:                       0;
	width:                      300px;
	filter:                     progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
	filter:                     progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../view/dnaeventsview/img/balloon.png", sizingMethod="scale");	
	opacity:                    0.9;
}

div#dnaeventsview-balloon div.top
{
	background:                 transparent url(../view/dnaeventsview/img/balloon.png) no-repeat 0 0;
	padding:                    17px 10px 10px 15px;
	color:                      #fff;
	font-size:                  10px;
}

div#dnaeventsview-balloon div.bottom
{
	height:                     26px;
	
	background:                 transparent url(../view/dnaeventsview/img/balloon.png) no-repeat 0 -290px;
}

div#dnaeventsview-balloon p
{
	margin: 0;
	padding: 2px 0 2px 0;
}

div.rounded
{
	position:                   relative;
	width:                      960px;
	height:                     300px; 
  overflow:                   hidden;	
  border:                     solid 3px #132253;
  -webkit-border-radius:      5px; 
  -khtml-border-radius:       5px; 
  -moz-border-radius:         5px; 
  border-radius:              5px; 
  margin-bottom:              20px;
}

div#slide
{   
  width:                      930px;
	height:                     300px; 
	border:                     solid 3px #132253;
  -webkit-border-radius:      5px; 
  -khtml-border-radius:       5px; 
  -moz-border-radius:         5px; 
  border-radius:              5px;
}