body, div, form, input, textarea, ul, li {
        font-family: helvetica;
        font-size: 14px;
        color: #666;
        line-height: 18px;
}
body {
        background: url(images/mainbg.jpg.htm) #ccc;
        margin: 0;
        padding: 0;
}
a {
        color: #f3a036;
}
a:hover {
        color: #333;
}

img {
        border: none;
        text-decoration: none;
}
#main {
        width: 904px;
        margin: 0 auto;
}
h3 {
        margin: 0 0 10px 0;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        color: #333;
}

/* =========== Header =========== */

#header {
        position: relative;
        height: 404px;
}
#header_in {
        position: relative;
        height: 120px;
}
#search {
        position: absolute;
        top:  18px;
        right: 10px;
        background: url(images/search.png) no-repeat;
        width: 132px;
        height: 25px;
}
.se {
        width: 100px;
        padding: 0;
        border: none;
        font-size: 12px;
        margin: 6px 0 0 5px;
        position: absolute;
        background: none;
        vertical-align: middle;
        line-height: 12px;
}
.bu {
        width: 14px;
        height: 12px;
        background: url(images/ic_search.gif) no-repeat;
        position: absolute;
        right: 5px;
        top: 6px;
        border: none;
        cursor: pointer;
}
.logo {
        position: absolute;
        top:  20px;
        left: 20px;
        font-size: 30px;
        font-weight: 900;
        color: #fff;
        line-height: 25px;
}
a.logo_link, a.logo_link:hover {
        color: #fff;
        text-decoration: none;
}
.logo_accent {
        color: #f3a036;
}
.slogan {
        color: #849286;
        font-size: 16px;
        position: absolute;
        top:  81px;
        left: 250px;
        margin: 0;
        padding: 0;
}

/* =========== End Header =========== */


/* =========== Navigation =========== */

#nav {
        position: absolute;
        top: 22px;
        right: 160px;
        z-index: 20;
}
.sf-menu {
        float: left;
        position: relative;
}
.sf-menu a {
        text-decoration: none;
}
.sf-menu a, .sf-menu a:visited, .sf-menu a:hover  {
        color: #fff;
}
.sf-menu li {
        margin-right: 15px;
        font-size: 12px;
        text-transform: uppercase;
}
.sf-menu li a:hover, .sf-menu li.current {
        background: none;
        border-bottom: 2px solid #f3a036;
}
.sf-menu li.current a:hover {
        border: none;
}
.sf-menu li li a{
        padding: 5px;
        overflow: hidden;
}
.sf-menu li li a:hover {
        background: #f3a036;
        border: none;
}
.sf-menu li li {
        background:        #333;
        margin-top: 1px;
        font-size: 10px;
}
.sf-menu li li li {
        background: #333;
}
/* =========== End navigation =========== */


/* =========== Footer =========== */
#footer {
        background: url(images/bg_footer.png) repeat-y #333;
        padding: 15px 15px 0 15px;
        color: #fff;
        font-size: 14px;
        font-family: helvetica;
        overflow: hidden;
        text-align: center;
}
#footer a {
        color: #666;
}
#footer a:hover {
        color: #ccc;
}
#copyright {
        width: auto;
        margin: 0 auto;
        color: #666;
        font-size: 12px;
        padding: 6px 0;
}
#footer_meta {
        border-bottom: 1px solid #666;
        text-align: left;
        width: 100%;
        color: #CCC;
        overflow: hidden;
        padding-bottom: 15px;
        font-size: 12px;
}

#footer_meta a{

        color: #CCC;
        text-decoration:none;

}

#footer_meta a:hover{


        text-decoration:underline;
}
#footer_meta ul {
        display: inline;
        margin: 0;
        padding: 0;
        width: 200px;
        list-style-type: none;
}
#footer_meta ol {
        display: inherit;
        margin: 0;
        padding: 0;
        list-style-type: none;
}
#footer_meta ol li {
        clear: both;
        margin: 0;
        padding: 0;
        padding-bottom: 8px;
}
#footer_meta li {
        float: left;
        color: #666;
        width: 154px;
        margin-right: 18px;
        font-size: 12px;
        line-height: 14px;
}
#footer_meta h3 {
        padding: 0;
        margin: 0;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        text-transform: uppercase;
}
a.ic_twitter {
        background: url(images/ic_twitter.png) no-repeat;
        width: 19px;
        height: 18px;
        display: block;
        float: left;
        margin-top: 5px;
}
a.ic_twitter:hover {
        background: url(images/ic_twitter.png) no-repeat 0 100%;
}
a.ic_rss {
        background: url(images/ic_rss.png) no-repeat;
        width: 19px;
        height: 18px;
        display: block;
        float: left;
        margin-top: 5px;
}
a.ic_rss:hover {
        background: url(images/ic_rss.png) no-repeat 0 100%;
}

/* =========== End Footer =========== */


/* =========== Index Left =========== */

#index_left {
        overflow: hidden;
        margin: 35px 10px 0 10px;
        float: left;
        width: 485px;
        display: inline;
        position: relative;
}
#index_left ul {
        float: left;
        font-size: 14px;
        color: #6e7870;
        font-family: helvetica;
        line-height: 17px;
        margin: 0;
        padding: 0;
}
#index_left li {
        margin: 0 30px 30px 0px;
        width: 168px;
        text-align: left;
    float: left;
    list-style: none;        
    display: inline;
    overflow: hidden;
    height: 81px;
    color: #666;
    position: relative;
    padding-left: 42px;
}
#index_left h3 {
        font-size: 18px;
        font-weight: 400;
        line-height: 20px;
        margin: 0 0 5px 0;
}
#index_left a {
        text-decoration: none;
        color: #333;
}
#index_left a:hover {
        text-decoration: underline;
        color: #333;
}
.articletitlepic {
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
}
.articlepic {
        position: absolute;
        top: 0;
        left: 5px;
        width: 24px;
}

/* =========== Index Left =========== */


/* =========== Slider =========== */

#slider{
        position: absolute;
        width: 900px;
        top: 80px;
        font-weight: 400;
}        
#slider ul, #slider li{
        margin:0;
        padding:0;
        list-style:none;
}
#slider li{ 
        width:900px;
        height:290px;
        overflow:hidden; 
        background: url(images/slider_shadow.png) no-repeat right bottom;
}        
#prevBtn, #nextBtn{ 
        display:block;
        width:27px;
        height:49px;
        position:absolute;
        left:-35px;
        top:200px;
}        
#nextBtn{ 
        left:912px;
}                                                                                                                
#prevBtn a, #nextBtn a{  
        display:block;
        width:27px;
        height:27px;
        background:url(images/btn_prev.png) no-repeat 0 0;        
}        
#prevBtn a:hover {  
        background: url(images/btn_prev.png) no-repeat 0 -27px;        
}
#nextBtn a{ 
        background:url(images/btn_next.png) no-repeat 0 0;        
}
#nextBtn a:hover{ 
        background:url(images/btn_next.png) no-repeat 0 -27px;        
}
.slide {
        padding: 50px 0 0 22px;
        width: 370px;
        height: 240px;        
        display: block;
        text-decoration: none;
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        position: relative;
}
#slider h3 {
        font-size: 30px;
        font-weight: 900;
        margin: 0 0 15px 0;
        color: #fff;
        line-height: 30px; 
        font-family: caviardreams bold;
}
.sliderimg {
        float: right;
        margin: 0 5px 0 0;
        width: auto;
}
.port_button {
        position: absolute;
        bottom: 0;
        left: 13px;
}
#slider small {
        margin-top: 15px;
        display: block;
        color: #ccc;
}
.content_top {
        position: absolute;
        bottom: 0;
}
#slider a:hover {
        color: #fff;
}
/* =========== End Slider =========== */


/* =========== Content =========== */

#content {
        background: url(images/bg_content.png) #fff;
        overflow: hidden;
        padding: 0 15px 25px 15px;
        border: none;
}
#content_title {
        margin: 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 10px;
        font-size: 24px;
        line-height: 30px;
        color: #333;
        margin-top: 1px;
}
blockquote {
        display: block;
        padding: 5px 15px;
        border-left: 1px solid #ccc;
        margin: 0 0 0 30px;
        color: #888;
        font-style: italic;
        margin: 20px 0 20px 40px;
        font-size: 18px;
        line-height: 22px;
}

/* =========== End Content =========== */


/* =========== Blog =========== */

#blog_items {
        overflow: hidden;
}
.blog_item {
        overflow: hidden;
        padding-bottom: 25px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 25px;
        clear: both;
}
.blogpic {
        padding: 3px;
        border: 1px solid #ccc;
        display: block;
        width: 540px;
        clear: both;
        margin-bottom: 15px;
}
.blogpic2 {
        padding: 3px;
        border: 1px solid #ccc;
        display: block;
        width: 760px;
        clear: both;
        margin-bottom: 15px;
}
.blog_item_text {
        display: block;
        position: relative;
}
#blog_items h3 {
        font-size: 30px;
        font-weight: 400;
        line-height: 30px;
        margin-bottom: 10px;
}
#blog_items a {
        text-decoration: none;
}
#blog_items a:hover {
        color: #333;
}
.blog_meta {
        font-size: 12px;
        display: block;
        padding: 3px;
        line-height: 12px;
        margin: 5px 0;
}

/* =========== End Blog =========== */

#index_right {
        margin: 35px 10px 0 10px;
        float: right;
        width: 347px;
        display: inline;
        position:relative;
}
#breadcrumbs {
        font-size: 12px;
        color: #6f7870;
        margin: 5px 0 0 50px;
}
#articles {
        width: 890px;
        padding-left: 10px;
        overflow: hidden;
}
#articles h3 {
        font-size: 21px;
        margin-top: 40px;
        font-weight: 400;
        font-family: Helvetica;
        max-width: 250px;
        overflow: hidden;
        height: 30px;
        line-height: 30px;
        color: #6f7870;
}
#articles a {
        color: #6f7870;
}
.article {
        width: 245px;
        float: left;
        margin: 10px 0 0 45px;
        font-size: 14px;
        color: #6e7870;
        font-family: helvetica;
        line-height: 17px;
        display: inline;
        padding-bottom: 35px;
}
.clearboth {
        clear: both;
        height: 1px;
        font-size: 0;
}
#content_wide {
        padding: 25px 10px;
        float: left;
        width: 840px;
        position: relative;
}
#content_left {
        padding: 25px 10px;
        width: 550px;
        font-size: 14px;
        color: #6f7870;
        line-height: 18px;
        float: left;
        position: relative;
}
#content_right {
        float: right;
        width: 180px;
        padding: 30px 50px 50px 10px;
        font-size: 12px;
        position: relative;        
}
#content_right  li {
        font-size: 15px;
        padding: 5px 5px;        
}
#content_right  li li{
        padding: 5px 25px;
        font-size: 13px;
}
#content_right  li li a{
        font-style:italic;
}
#content_right  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#content_right h3 {
        font-size: 20px;
        font-weight: 400;        
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
}
/* =========== Contact form =========== */

#fields{
        position: relative;
}
.notification_error
{
height: auto;
width: 90%;
padding: 8px 12px;
margin-bottom: 15px;
background: #F8F0F1;
text-align: left;
font-size: 14px;
color: #b38d92;
}
.notification_ok
{
height: auto;
width: 90%;
padding: 12px;
text-align: center;
color: #333;
font-size: 22px;
}
#fields input {
        width: 200px;
        padding: 5px 0;
        font-size: 14px;
        border: 3px solid #ccc;
        margin-bottom: 10px;
}
#fields textarea {
        width: 400px;
        height: 150px;
        font-size: 14px;
        border: 3px solid #ccc;
        margin-bottom: 10px;
}
#fields input.button {
    cursor: pointer;
    border: none;
    background: #333;
    color: #fff;
}
#fields input.button:hover {
    background: #555;
    border: none;
}
#fields input:hover, #fields textarea:hover{
        border: 3px solid #999;
}
#fields label  { 
        width: 70px; 
        padding-left: 20px;
        padding-top: 0; 
        margin: 5px; 
        float: left; 
        text-align: left; 
}
br { 
        clear: left;
}

/* =========== End Contact form =========== */
.articles_container {
        overflow: hidden;
        display: inline;
}


/* =========== Services =========== */

#services {
        overflow: hidden;
        margin: 10px 10px 0 10px;
        width: 550px;
        position: relative;
}
#services ul {
        margin: 0;
        padding: 0;
}
#services li {
        margin: 0 30px 30px 0px;
        width: 508px;
        text-align: left;
    float: left;
    list-style: none;        
    color: #666;
    position: relative;
    padding-left: 42px;
    overflow: hidden;
}
#services h3 {
        font-size: 18px;
        font-weight: 400;
        line-height: 20px;
        margin: 0 0 5px 0;
}

#services h3 a {
color: #333;
text-decoration:none;
}

#services h3 a:hover {
color: #f3a036;
text-decoration:none;
}

/* =========== End Services =========== */

/* =========== Portfolio =========== */

#portfolio_series {
        float: left;
        display: inline;
        overflow: hidden;
        position: relative;
}
#portfolio_series ul {
        margin: 0;
        padding: 0;
        float: left;
}
#portfolio_series li {
        margin: 15px 0 0 23px;
        width: 245px;
        height: 200px;
        text-align: center;
        float: left;
    list-style: none;
        overflow: hidden;
        display: inline;
        position: relative;
}
.portfoliopic {
        float: left;
        height: 130px;
        width: 225px;
        margin-bottom: 10px;
        padding: 3px;
        border: 1px solid #ccc;
}
.centrado {
        text align: center;
        display: block;
        margin: auto;
}

/* =========== End Portfolio =========== */

/* =========== Tutorial =========== */

.inicio {float:right;}
.inicio img {border:0px;}

/* =========== End Tutorial =========== */

.titulo{
        margin: 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 10px;
        font-size: 24px;
        line-height: 30px;
        color: #333;
        margin-top: 1px;
}

a.linkopacity img {
        filter:alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        -khtml-opacity: 1.0;
}

a.linkopacity:hover img {
        filter:alpha(opacity=50);  
        -moz-opacity: 0.5;  
        opacity: 0.5;
        -khtml-opacity: 0.5; 
}
.idioma {
        text-decoration:none;
        font-size: 16px;
        margin-top: 40px;
        float:left;
}
.idioma a{
        text-decoration:none;
        margin-top: 10px;
        color:#666;
}
.idioma a:hover{
        color:#f3a036;
}
.bandera img{
        float:left;
        margin: 0px 10px 0px 30px;
}
.separacion li{
                margin: 0 30px 10px 0px !important;
                }

/* =========== Agrandar imagenes =========== */
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px double gray;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}

/* =========== Fin Agrandar imagenes =========== */


        .sprite_bg {
            background-color: #777;
        }
        .cal, .cal .m, .cal .d {
            background: url(cal-sprite64.png) no-repeat 0 0;
        }
        .cal {
            display: inline-block;
            height: 64px;
            position: relative;
            width: 64px;
        }
        .cal .m {
            position: absolute;
            height: 10px;
            left: 7px;
            top: 17px;
            width: 17px;
            text-indent: -9999em;
        }
        .m1 .m  { background-position: -62px 0; }
        .m2 .m  { background-position: -84px 0; }
        .m3 .m  { background-position: -105px 0; }
        .m4 .m  { background-position: -126px 0; }
        .m5 .m  { background-position: -147px 0; }
        .m6 .m  { background-position: -168px 0; }
        .m7 .m  { background-position: -188px 0; }
        .m8 .m  { background-position: -211px 0; }
        .m9 .m  { background-position: -231px 0; }
        .m10 .m { background-position: -253px 0; }
        .m11 .m { background-position: -274px 0; }
        .m12 .m { background-position: -295px 0; }

        .cal .d {
            position: absolute;
            height: 25px;
            left: 17px;
            top: 25px;
            width: 32px;
            text-indent: -9999em;
        }

        .d1 .d, .d2 .d, .d3 .d, .d4 .d, .d5 .d, .d6 .d, .d7 .d, .d8 .d, .d9 .d {
            left: 24px;
            width: 17px;
        }

        .d1 .d  { background-position: -63px -9px; }
        .d2 .d  { background-position: -80px -9px; }
        .d3 .d  { background-position: -97px -9px; }
        .d4 .d  { background-position: -115px -9px; }
        .d5 .d  { background-position: -131px -9px; }
        .d6 .d  { background-position: -147px -9px; }
        .d7 .d  { background-position: -165px -9px; }
        .d8 .d  { background-position: -182px -9px; }
        .d9 .d  { background-position: -199px -9px; }
        .d10 .d { background-position: -216px -9px; }
        .d11 .d { background-position: -245px -9px; }
        .d12 .d { background-position: -275px -9px; }
        .d13 .d { background-position: -306px -9px; }
        .d14 .d { background-position: -337px -9px; }
        .d15 .d { background-position: -368px -9px; }
        .d16 .d { background-position: -399px -9px; }
        .d17 .d { background-position: -429px -9px; }
        .d18 .d { background-position: -459px -9px; }
        .d19 .d { background-position: -63px -38px; }
        .d20 .d { background-position: -95px -37px; }
        .d21 .d { background-position: -126px -37px; }
        .d22 .d { background-position: -159px -37px; }
        .d23 .d { background-position: -192px -37px; }
        .d24 .d { background-position: -224px -37px; }
        .d25 .d { background-position: -257px -37px; }
        .d26 .d { background-position: -288px -37px; }
        .d27 .d { background-position: -320px -37px; }
        .d28 .d { background-position: -352px -37px; }
        .d29 .d { background-position: -384px -37px; }
        .d30 .d { background-position: -416px -37px; }
        .d31 .d { background-position: -447px -37px; }