/* CSS Template by Juuce Interactive ©2008 
   Author: Samuel Larcher
*/   




/* ----------------  INITIAL START ------------- */

* { margin: 0px; padding: 0px;}

h1 { padding-bottom: 10px;}
h2 { padding-bottom: 7px;}
h3, h4, h5 { padding-bottom: 5px;}
p, ul { padding-bottom: 10px; }
img { border: none; }
form label button { cursor: pointer; cursor: hand; }

/* Special form resets and/or styles look in forms.css */

ul li { list-style: none; }

/* ----------------  INITIAL END ------------- */




/* ----------------  FONT  ------------- */

h1 { font: normal normal 18px Arial, Helvetica, sans-serif; color: white; border-bottom: 2px solid #303030; margin-top: 10px; }
h2 { font: normal bold 16px Arial, Helvetica, sans-serif; color: white; }
h3 { font: normal bold 14px Arial, Helvetica, sans-serif; color: white; }
h4 { }
a:link, a:visited { color: white; }
a:hover, a:active { color: #fe6111; text-decoration: none; }

/* ----------------  BASICS  ------------- */

body { background: #4e4e4e url(../images/basics/bg.jpg) left top repeat-x; font: normal normal 13px Arial, Helvetica, sans-serif; color: white; }

#mainWrapper { width: 878px; margin: 0 auto 0 auto; }
#logo { position: relative; top: 6px; }
#leftCol, #rightCol { width: 432px; }
#leftCol { float: left; padding-top: 10px; }
#rightCol { float: right; padding-top: 10px;  }



/* ----------------  BOXES FEATURED CONTAINER  ------------- */
.companyOverview, .projectsOverview, .profile, .overview, .map, .projectsbox { padding: 15px 0 20px 25px; }
.companyOverview li, .projectsOverview li, .profile li, .projectsbox li { padding-bottom: 10px; background: url(../images/basics/listpoint.gif) left top no-repeat; padding-left: 25px; }
.companyOverview ul { height: 200px; overflow: auto; }
.companyOverview li a { color: white; }
.companyOverview li a:hover { text-decoration: none; }

.projectsOverview li a { color: white; }
.projectsOverview li a:hover { text-decoration: none; }

#leftCol ul { }
#leftCol ul li, #rightCol ul li { padding-bottom: 10px; background: url(../images/basics/listpoint.gif) left top no-repeat; padding-left: 25px; }
#leftCol ul li ul, #rightCol ul li ul { padding-top: 8px; }
#leftCol p, #rightCol p { padding-bottom: 25px; }


.profile, .projectsbox { height: auto; padding-bottom: 8px; margin-bottom: 10px; }
.profile { width: 410px; }
.projectsbox { width: 410px; }
.profile ul { height: auto; width: 240px; float: right; }
.profile img { float: left; }


#banner .list { position: absolute; z-index: 5000; background: url(../images/basics/gray_trans.png); display: block; width: 870px; text-align: center; margin-top: 300px; padding-top: 10px; padding-bottom: 13px; }
#banner .list li { display: inline; padding-right: 20px; }
#banner .list li a { color: white; text-decoration: none; font-size: 11px; background: url(../images/basics/orange.gif) left center no-repeat; padding-left: 10px; }
#banner .list li a:hover { color: #fe6111; }
#banner.projects { height: 400px; }
#banner.contact ul.list { margin-top: 230px; }

#dynamicBanner { position: absolute; height: 385px; width: 878px; }
#dynamicBanner.dynamicBG { background: url(../images/basics/project-banners-bg.jpg) left top no-repeat; }

#loader { height: 385px; width: 870px; }
#loader.loading { background: url(../images/basics/ajax-loader.gif) center center no-repeat; }
#loader img { margin: 0 auto 0 auto !important; }

/*--------------------   scroll styles --------------- */
 #btnUp { background: url(../images/basics/arrow_up.png) left top no-repeat; height: 15px; width: 21px; margin: 6px 0 0 63px; cursor: pointer; }
#btnDown { background: url(../images/basics/arrow_down.png) left top no-repeat; height: 15px; width: 21px; position: absolute; margin: 340px 0 0 63px; cursor: pointer; }
#btnReset { display: none; }
#thumbscontainer { width: 150px; z-index: 1; text-align: center; }
#thumbScrollWrapper { position: absolute; background: url(../images/basics/gray_trans.png); margin: 0 0 0 720px; width: 150px; height: 385px; }
#thumbscontainer a { margin-left: auto; margin-right: auto; position: relative; z-index: 1 !important; }
#thumbscontainer a img { position: relative; z-index: 1 !important; }

/* -----------------  ajax styles ----------------  */
.animGif { display: block; margin: 0 auto 0 auto; position: relative; top: 170px; }
.animBackground { height: 385px; width: 870px; background: #555; }

.featuredProjects { padding-top: 15px; padding-bottom: 20px; }
.featuredProjects .projectImages { width: 290px; float: left; }
.featuredProjects .projectImagesComment { width: 130px; float: right; }
.featuredProjects .projectImagesComment .description { height: 200px; overflow: auto; }

#clients ul { text-align: center; }
#clients ul li { display: inline; }

.buttonLeft { background: url(../images/basics/button_left.jpg) left top no-repeat; height: 25px; padding-left: 8px; }
.buttonLeft .button { display: block; overflow: hidden; background: url(../images/basics/button_right.jpg) right top no-repeat; height: 21px; text-align: center; text-decoration: none; padding-right: 8px; color: black; font-weight: bold; font-size: 11px; padding-top: 4px;  }






/* ----------------  BUTTON AND FORMS  ------------- */

/* ----------------  MAIN NAVIGATION  ------------- */
#navigation { height: 46px; margin-top: 11px; }
#navigation ul { height: 46px; padding: 0; }
#navigation ul li { height: 46px; float: left; }
#navigation ul li a { display: block; height: 35px; float: left; width: 218px; text-decoration: none; color: white; font-size: 18px; padding-top: 11px; text-align: center; background: url(../images/basics/navi_separator.jpg) right center no-repeat; }
#navigation ul li a:hover { color: #fe6111; }



#navigation ul li ul { clear:both; height: auto; width: 218px; position: absolute; margin-top: 46px; background: url(../images/basics/1percent.png); display: none; z-index: 10000; }
#navigation ul li:hover ul, #navigation ul li.over ul { display: block; }
#navigation ul li ul li { clear: both; height: auto; background: url(../images/basics/gray_trans.png); margin-bottom: 1px; }
#navigation ul li ul li a { font-size: 12px; height: auto; clear: both; padding-bottom: 5px; padding-top: 5px; background: none; text-align: left; padding-left: 20px; width: 197px; }
#navigation ul li ul li a:hover { color: #fe6111; background: url(../images/basics/navi_a_hover.gif) 10px center no-repeat; }


#navigation ul li ul li ul.sub { display: none; margin-left: 219px; margin-top: 0px; z-index: 5000; }
#navigation ul li ul li:hover ul.sub, #navigation ul li ul li.over ul.sub { display: block; }




/* ----------------  FOOTER  ------------- */

#extraF { background: url(../images/basics/extraFooter.jpg) left top repeat-x; height: 45px; font-size: 11px; }
#extraF ul { text-align: center; padding-top: 15px; }
#extraF ul li { display: inline; }
#extraF ul li a { text-decoration: none; color: #999; }
#extraF ul li a:hover { color: white; }
#extraF .designbyjuuce { position: absolute; margin: -3px 0 0 15px; }
/* ----------------  SPECIALS  ------------- */

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

.gray { color: #5d5d5d; }

.fontSize10 { font-size: 10px; }
.fontSize11 { font-size: 11px; }
.fontSize12 { font-size: 12px; }
.fontSize13 { font-size: 13px; }
.fontSize14 { font-size: 14px; }

.bold { font-weight: bold; }
.normal { font-weight: normal; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }

.backgroundYellow { background: yellow; }
.backgroundRed { background: red; }
.backgroundSilver { background: silver; }
.backgroundBlack { background: black; }
.backgroundBlue { background: blue; }
.backgroundWhite { background: white; }

.padding_B_5px { padding-bottom: 5px; }
.padding_B_10px { padding-bottom: 10px; }
.padding_B_15px { padding-bottom: 15px; }
.padding_L_5px { padding-left: 5px; }
.padding_L_10px { padding-left: 10px; }
.padding_L_15px { padding-left: 15px; }

.posRelative { position: relative; }

.displayNone { display: none; }