/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

/* Left & Right alignment */

.left { float:left;}
.right { float:right;}
.wrapper {width:100%; overflow:hidden;}

/* Global properties ======================================================== */

body{ background: url(../images/bg.jpg) center top repeat; border:0; font:13px Arial, Helvetica, sans-serif; color:#9f9f8f; line-height:18px; min-width:1005px; overflow:hidden; position:relative;}

.spinner{ position:absolute;background: url(../images/bg.jpg) center top repeat #f7f7ea; z-index:99; width:100%; height:100%; top:0; left:0}
.spinner > div{ background: url(../images/loader.gif) 50% 50% no-repeat; width:100%; height:100%;}

/* Global Structure ============================================================= */

.main {	margin: 0 auto;	width: 985px; padding:0 18px}

.bg1{ background:url(../images/bg_top.jpg) 30% top repeat-x;}

.extra {min-height:100%; height:auto !important; height:100%; position:relative}
.extra > .main{ padding-bottom:90px;}
body, html {height:100%;}
.footer{ height:90px; position:absolute; bottom:0; width:100%;}

/*.bg_footer{ background:url(../images/line_footer.gif) 0 0 repeat-x;}*/

/* ============================= main layout ====================== */

a{ color:#af2a31; text-decoration: none; outline:none}
a:hover{ color:#000}
h1{ padding:47px 22px 97px 107px; margin-top:38px; float:left; background:url(../images/logo_bg.png) 0 0 no-repeat}
h2{ font:20px Georgia, "Times New Roman", Times, serif; color:#af2a31; line-height:1.2em; font-weight:normal; font-style:italic; padding:0 0 11px 0;}
p{ padding-bottom:18px;}

/* ============================= header ====================== */
header{ height:220px;}

#logo{ float:left; margin:-30px -92px; display:block; text-indent:-9999px; background:url(../images/logo.png) 0 0 no-repeat; width:310px; height:100px;}
#tweet{ float:right; margin:47px 0px 0 0; background:url(../images/tweet.png) 0 0 no-repeat; width:100px; height:57px; text-indent:-9999px; display:block;}
#slogan{float:left; padding:0px 0 0 65px; width:600px; font-size:36px; line-height:45px; color:#313131; text-transform:uppercase; word-spacing:2px;}
#slogan a{ color:#313131;}
#slogan a:hover{ color:#b32b2c; background:url(../images/underline.gif) 0 bottom repeat-x;}

/* ============================= content ====================== */

#content{ background:url(../images/line.gif) 0 top repeat-x; padding-top:1px; padding-bottom:18px;}

#content > #menu > dt, .title{ padding-top:8px; padding-bottom:9px; background:url(../images/line.gif) 0 bottom repeat-x; font:30px Georgia, "Times New Roman", Times, serif; line-height:51px; font-style:italic; position:relative; zoom:1; width:100%; overflow:hidden}
#content > #menu > dt span{ background:url(../images/line.gif) 0 top repeat-x; display: block; position:absolute; top:-1px; left:0; width:100%; height:1px;}
#content > #menu > dt a, .title a{ display:block; color:#fff; padding-left:29px; background:url(../images/nav1.jpg) 0 0 repeat-x; position:relative; zoom:1; cursor:pointer}
#content > #menu > dt a em, .title a em{ position:absolute; width:100%; height:100%; background:#3d3530; top:0; left:0}
#content > #menu > dt a strong, .title a strong{ font-weight:normal; position:relative;}
#content > #menu > dt a img, .title img{ position:absolute; top:16px; right:-35px;}
#content > #menu > dt a.active img, .title img{ right:15px}
.title{ margin-left:10px;}
.title img{ right:25px}
#content > #menu > dd{ overflow:hidden; position:relative; margin-left:-10px;}

.container_16 > .wrapper{ padding:17px 0 21px 0;}

.box1{ background:url(../images/bg_box.gif) 0 0 repeat; position:relative; box-shadow: 0 0 5px #ebebe5; -moz-box-shadow: 0 0 5px #ebebe5; -webkit-box-shadow: 0 0 5px #ebebe5; }
.box2{ background:#fff; position:relative; box-shadow: 0 0 5px #ebebe5; -moz-box-shadow: 0 0 5px #ebebe5; -webkit-box-shadow: 0 0 5px #ebebe5; }

.box1, .box2, .container_16{ min-height:450px}

.inner1{ padding:30px 39px 10px}
.inner2{ padding:31px 30px 10px}
.inner3{ padding:11px 20px 10px}

.pad_top1{ padding-top:11px;}
.pad_top2{ padding-top:16px;}
.pad_bot1{ padding-bottom:18px;}

.link1{ display:inline-block; font:14px Georgia, "Times New Roman", Times, serif; color:#3e352e; font-style:italic; padding-right:18px; background:url(../images/marker_3.gif) right 7px no-repeat}
.link1:hover{ color:#b32b2c}

.caption{ text-align:right; padding:19px 3px 10px 0;}
.caption span{ display:block;}
.caption a{ font:15px Georgia, "Times New Roman", Times, serif; color:#ba5f15; font-style:italic; line-height:20px;}

.caption2{ text-align:left; padding:19px 3px 10px 0;}
.caption2 span{ display:block;}
.caption2 a{ font:15px Georgia, "Times New Roman", Times, serif; color:#ba5f15; font-style:italic; line-height:20px;}

.list1{}
.list1 li{ font-size:11px; line-height:24px;}
.list1 a{ text-transform:uppercase; color:#9f9f8f; padding-left:12px; background:url(../images/marker_2.gif) 0 5px no-repeat;}
.list1 a:hover{color:#b32b2c}
.list1 .link1{ float:right; padding-right:0; margin-right:66px; text-transform:none;color:#3e352e; padding-left:19px;background:url(../images/marker_3.gif) 0 7px no-repeat; font-style:normal}

#gallery{ padding-top:10px}
.gallery1_big_img{ position:relative; width:514px; height:362px; float:left; margin-right:20px;}
.gallery1_big_img img{ position:absolute; top:0; left:0;}

#gallery1{ float:left; width:334px; margin-right:-30px; margin-bottom:17px;}
#gallery1 a{ margin-bottom:20px; margin-right:20px; float:left;}
#gallery1 a.last{ margin-right:0}
#gallery1 .wrapper{ width:354px;}

.next{ float:right; margin-right:-7px; padding-right:16px;}
.prev{ float:left; margin-left:20px; padding-left:16px; background-position:0 7px}
.pagination{ float:left; padding-left:74px;}
.pagination a{ float:left; margin-right:7px; font:14px Georgia, "Times New Roman", Times, serif; color:#3e352e; font-style:italic}
.pagination a:hover, .pagination a.active{ color:#cc4b1f}

.cols{ float:left;}

#page_Services .cols{ width:167px; padding-right:20px;}
#page_Contacts .cols{ width:194px; float:none}

.accordion{ padding-top:4px;}
.accordion dt{ padding-bottom:9px}
.accordion dt a{ font:20px Georgia, "Times New Roman", Times, serif; color:#fffff4; font-style:italic; display:block; background:url(../images/bg_box3.jpg) 0 0 no-repeat; line-height:40px; padding-left:8px;}
.accordion dd{ padding:1px 0 10px 0}

.color1{ color:#af2a31}

/* ============================= footer ====================== */

footer { height:42px; background:url(../images/line_footer.gif) 0 bottom repeat-x; font-size:11px; color:#8a8a8a; text-transform:uppercase; padding:27px 13px 0 6px;}
footer a{ color:#8a8a8a;}
footer a:hover{ text-decoration:underline; color:#8a8a8a;}

#footer_menu{ float:left; margin-top:-2px;}
#footer_menu li{ float:left; padding-right:14px; background:url(../images/footer_menu_line.gif) right 3px no-repeat; margin-right:13px;}
#footer_menu a{ font:16px Georgia, "Times New Roman", Times, serif; text-transform:none; color:#7d7d7d; font-style:italic;}
#footer_menu .last{ background:none;}
#footer_menu a:hover, #footer_menu .active a{ color:#474747; text-decoration:none;}

/* ============================= scrollbar ====================== */
/*track background-color: #B18904*/
/*thumb background-color: #191007*/

#scrollbar1 { width: 520px; margin: 10px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 500px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none; }

/* ============================= forms ============================= */

#ContactForm{ position:relative; padding-top:7px; width:437px;}
#ContactForm .wrapper{ overflow:inherit; min-height:40px;}
#ContactForm .success{ display:none; position:absolute; bottom:-10px; left:0; right:0; z-index:2}
#ContactForm label{ position:relative;min-height:30px; display: inline-block; z-index:1}
#ContactForm .message{ height:132px;}
#ContactForm  span{ display:block}
#ContactForm .error, #ContactForm .empty{ font-size:10px; color:#cc4b1f; line-height:14px; display:none; width:100%}
#ContactForm a{ margin-left:20px; float:right;}
#ContactForm .input { margin:0;width:208px; height:14px; background: none; padding:7px 10px;color:#979991; font:11px Arial, Helvetica, sans-serif;}
#ContactForm textarea { overflow: auto; margin:0;width:415px; height:100px; background: none; padding:6px 10px;color:#979991; font:11px Arial, Helvetica, sans-serif;}


#ContactForm  .bg{ background:#fff; border:1px solid #cececc; display:inline-block}


/* Twitter Feed */


#twitter {
    background: url(../images/bg.jpg);

    width: 400px; /* Up to you but remember to change the div width below as well if you change it */
    padding: 0 10px;

    overflow: hidden; /* clearfix */

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

    #twitter h2 {
        float: left; /* We'll make the heading sit on its own line next to the tweets */
        width: 85px; /* Might wanna change this depending on the text in the heading */
        margin: 0;
        padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */

        font-size: 12px;
        color: #4b9fff;
        line-height: 1;
    }

    /* The marquee plug-in turns a marquee element into a div */
    #twitter p, 
    #twitter marquee, 
    #twitter div {
        float: left;
        width: 325px; /* Container width - heading width - 10px (for some right padding) */
        margin: 0;
        padding: 6px 0; /* Again we set the padding in here so as not to cut text */
        line-height: 1;
    }

        /* All the tweets will be links pointing to your page on twitter */
        #twitter marquee a, 
        #twitter div a {
            margin: 0 10px 0 0;
            color: #333;
            text-decoration: none;
        }

            /* The i is used to display the date of the tweet */
            #twitter marquee a i, 
            #twitter div a i {
                font-style: normal;
                color: #999;
            }