/* CSS for Clark Eriksson website - copyright Parthian Systems 2010 */


body {
    font-family: Verdana, Arial, sans-serif;
    font-size: medium;
    text-align: center;
    color: #333;
    background-color: #cccccc;
    /* background: url(../jquery-ui-1.8.custom/css/blitzer-soft/images/ui-bg_inset-soft_100_a8abbd_1x100.png) repeat-x 50% 50%;  */
    margin: 0;
    padding: 0;
}
div, p, img, a, td, ul, ol {
    font-size: 13px;
}

h1, h2, h3, h4 {
        font-family: Verdana, Arial, sans-serif;
        font-weight: bold;
        margin: 0 0 0.7em 0;
        letter-spacing: .07em;
        line-height: 1.1em;
}
h1 { font-size: 150%; margin-top: 0px;}
h2 { font-size: 125%; margin-top: 12px; }
h3 { font-size: 115%; margin-top: 12px; }
h4 { font-size: 105%; letter-spacing: 0.15em; }

ul { margin: 0px 0 8px 16px; list-style-position: outside; padding-left: 0; } /* Clever stuff for IE/FF/Safari alignment make margin-top -ve to move up  */
li {  margin: 2px 0 2px 0; padding: 0; }
p { margin: 6px 0px; }

/*
a, a:link {
    text-decoration: none; color: #69c;
    border-bottom: 1px dotted #69c;
}
a:visited { color: #669; border-color: #669; }
a:hover { color: #693; border-color: #693; text-decoration: none; }
a:active { color: #c33; border-color: #c33 }
*/

a { color: #008 !important;  /* #3C81C4; */
  text-decoration: none;
  border-bottom-width: 1px; /* stops thick lines on IE6 */ }

a img, img {
    border: none;
}

.clear {
    clear: both;
    height: 1px;
    margin: -1px 0 0;
    font-size: 1px;
}

#page {
    width: 960px; /* was 770 */
    margin: 0 auto;
    text-align: left;
    background-color: white;
    /* background:  was url(images/tile.gif) repeat-y; */
        }


/* Header
------------------------------------------------------------------------- */

#header {
    padding-top: 1em;
    width: 960px;
    height: 6em;
    position: relative; /* for rHM to float inside */
    z-index:1; /* For IE6-7 bug where Absolute Pos Search Results ignore z-index. This must be higher than z of absolute item  */
        }

#logo {float: left; width: 380px; height: 4em; font: 1.5em/2em Geneva, Tahoma, sans-serif; text-align: justify; margin-left: 20px; padding: 0; border:0}
.clark { color: #000080; letter-spacing: 1.5em;}
.eriksson { color: #FF0000; letter-spacing: 1em;}

/* No Longer used but nice example of floating an image behind another image.
#headerImage  img{ width:256px; height:95px; position: absolute; top: 0px; left: 12px;
                        filter:alpha(opacity=15);
                        opacity:0.15; }
*/

#rightHeaderMenu { float:right; width: 500px; height: 50px; }

#breadcrumbs { margin: 0 0 30px 20px; padding: 0; position: relative; bottom: 0px; font-size: 11px; }
#breadcrumbs a { font-size: 11px;}


/* Horizontal Menu -----------------------------------------  */

#menu { width: 920px; height: 50px;  margin: 20px auto 0px auto; }

.navigation { /* Menu goes here */
        position: relative;
                /* top: 10px; left: 10px; */
        width: 920px; height: auto;
        left: 0px;
        line-height: 150%;
                color: #B7B7B7;
                font-family: Verdana, "calibri", "arial", sans-serif;
                font-size: 1.6em; /* This appears to only affect the height of the text with regard to padding - probably a{13px} from top overrides it   */
                list-style-type:none;
                margin: 0;
                z-index: 0;
                }

/* .navItems {margin-left: 50px; float:left; } /* all items inc. subNavs */
/* only float horizontally the immediate List Items. This uses a selector parent > child - .navigation > li - but this doesn't work in IE6 so
repeat the li to cancel those changes at .subNav li */
.navigation  li {
        float:left;
        width: 12.2%; height: 1.8em; /* width is a function of the number of menu items  8 / 100 = 12 (nearly) */
        text-align: center;
        margin-bottom: 0px;
        margin-right: 0px;
        margin-left: 0px; /* Change this to move main menu */
        }

/* Make anchor have a big area for chunky hover buttons. Watch this if more menu items are added */
.navigation li a { margin: 0px; padding: 8px 14px 12px 14px; font-size: 0.55em; }
/* Make background image appear when hover - and use style from jquery css for .ui-state-hover
BUT PseudoClass hover may not work on IE6 so hover won't work... */
.navigation li:hover {
border: 1px solid #cdd5da;
background: #a6a6a6 url(../jquery-ui-1.8.custom/css/blitzer-soft/images/ui-bg_highlight-soft_100_cdb7b7_1x100.png) 50% 50% repeat-x; color: #FF0000;
}

.subNav {
                position: absolute;
                font-size: 0.8em; /* Like a percentage of parent. So half of 1.6em from above */
                background-color: #FFF;
                z-index: 0; clear:both; padding: 0; line-height:100%; list-style-type:none; }
.subNav li {
                border: 1px solid #EEE; padding: 2px; width:100%;
                } /* width:100% makes the box big enough for biggest text. But on IE6 appears to be inherited down to li */

/* now fixes for .navigation > li IE6 failure. Shown separately for comment purposes */
.subNav li { clear: both; margin: 0 0 0 0; } /* ie6.css specific code */

/* make the subNav disappear */
.navigation li ul {
                display:none; clear:both; margin-left: 0px; line-height:100%;
                }
/* show subNav ul on rollover - this replaces onmouseover js but :hover doesn't work in IE6 see behavior URL in body above */
.navigation li:hover ul {
                display:block;
                }

/* breadcrumb .active a { color: red; } */
.self a { color: #080000; }



/* DropMenu --------------------------------------------------------------
*/
/* #61783F is the dark accordion green - #8D9F6A is the lighter accordion green  */
#dropmenu  { position: relative; top: 8px;  /* perhaps move down a little for alignment */ }

#dropmenu ul, #dropmenu p { color: #010101; font-weight: bold; list-style-type: disc;
    padding: 0px 0px 0px 15px;
    margin-left: 0px;
}
#dropmenu ul { margin-bottom: 0em; }
#dropmenu ul ul { margin-bottom: 0; border-bottom: 1px solid #ddd;
padding: 0px; /* make all bullets same depth */}
#dropmenu ul ul ul { border-bottom: none; margin-bottom: 0; }
#dropmenu ul li ul li { background: url(images/tictac_green.gif) no-repeat 0 6px; }

#dropmenu a, #dropmenu a:link {
    text-decoration: none; color: #010101;
    border-bottom: none;
}
#dropmenu a:visited { color: #010101; border-color: #669; }
#dropmenu a:hover { color: #61783F; border-color: #693; text-decoration: none; }
#dropmenu a:active { color: #010101; border-color: #c33 }

/* WayFinder Menu currently active */
#dropmenu .self a { color: #61783F; }
#dropmenu .self ul li a { color: #010101; } /* but stop self colour cascading */



/*  Search ---------------------------------------------------------------
  */
#search { /* override from site.css - Search results text */
           position: absolute; top: 0; right: 0px; padding: 0;
                   width: 190px;  /* Width uncertain - see also current-search-results */
                   height: 2em; margin: 0;
                   z-index: 10;
                   /*  color: #3A3; Body text of search results */
                    font-family: 'Arial';
}

/*
#search a, #search a:link {
    text-decoration: none;
    color: #69c;
    border-bottom: 1px dotted #69c;
}
#search a:visited { color: #669; border-color: #669; }
#search a:hover { color: #693; border-color: #693; text-decoration: none; }
#search a:active { color: #c33; border-color: #cFF }
*/

form { position: absolute; top: 0; right: 0px; margin: 0; padding: 0; text-align: left; }

#ajaxSearch_form {
                        margin: 0; padding: 0;
           height: 2em; width: 190px; /* was 153px;  prior was auto; - Different Box Model in FF and IE8 */
       }

fieldset { background: transparent;
        margin: 0; padding: 0;
    border: thin none;
}

#ajaxSearch_input {
           width: 100px;
           display: inline;
           height: 17px;
           border: 1px solid #ddd;
           border-left-color: #c3c3c3;
           border-top-color: #7c7c7c;
           /* background: #fff url(images/input-bg.gif) repeat-x top left; */
                   background-color: white;
           margin: 0 3px 0 0;
           padding: 3px 0 0;
       }

           /* Don't need styling just accept default for a button */
       #ajaxSearch_submit {
           display: inline;
           height: 26px;
           line-height: 22px;
                   width: 30px;
                   padding: 0px;
                   margin: 0px;
       }


           /* Just makes a white blob.
       #ajaxSearch_output {
           border: 1px solid #444;
           padding: 10px;
           background: #fff;
           display: inline;
           height: auto;
           vertical-align: top;
           width: 300px;
       }
           */

           #searchClose { position: absolute; top: 0px; left: 145px; width: 1.5em; height: 1.5em; cursor: pointer; }
           #indicator { position: absolute; top: 0px; left: 165px;}

           #current-search-results {
                   position: absolute; top: 3em; right: 0px;
                   text-align: left;
                   width: 390px;
                   z-index: 0; /* #header has z-index higher than this for IE6-7 bug where abspos items are underneath elements */
                   background: #DDD;
                   border: 3px outset #F00;
                   padding-left: 6px;
                   /* for IE */
                        filter:alpha(opacity=95);
                        /* CSS3 standard */
                        opacity:0.95;
       }
       .AS_ajax_result {
           padding: 3px;
       }
       .AS_ajax_resultLink a {
           text-decoration: underline;
                   color: #333; /* Dark Grey */
       }
       .AS_ajax_resultDescription{ /*  Description text from MODx - can be technical in nature so do not display */
           color: #444; /*  #61783F; */
                   display: none;
       }

           .AS_ajax_resultExtract{ /* Text found by Search */
           color: #444;
       }


       .AS_ajax_more {
           color: #61783F;
       }


/* Content and Sidebars -------------    */

#content {
    float: left;
    position: relative; top: 0px;
    text-align: left;
    width: 730px; /* was 393  */
    margin: 10px 20px 20px 20px;
    padding: 0; border: 0;
    line-height: 1.4em; /* may not have an impact */
}

/* Fixed Height for Accordions  - height may need to increase if there are more Accordion entries */
#AccordionContainer { height: 600px; overflow: auto; }
.AccordionContent { height: 300px; }

#homeImpactPicture { margin-top: 18px; width:560px; height: 229px; }

/* 3 selectors for Animation - list across the top
#MainAnimate { margin: 0 0 20px 0; position: relative; list-style-type:none; left: 80px; color: #008; font-weight: bold; font-size: 16px; text-align: center; }
#MainAnimate li { float:left; width: 200px; margin: 0 0 20px 0 }
<ul id="MainAnimate">
<li>No Nonsense Attitude</li>
<li>Team Approach</li>
<li>Knowledge Base</li>
</ul>
*/

/* 3 Selectors for Animation - Float Blocks */
#Testimonials { list-style-type:none; margin: 0px; padding: 0px; }
#Testimonials div {  float:left; width: 215px; height: 250px; margin: 24px 0 12px 10px; color: #008; padding: 12px 6px 12px 6px;
background: #3C81C4 url(../jquery-ui-1.8.custom/css/blitzer-soft/images/ui-bg_glow-ball_100_blue_600x600.jpg) 50% 5% repeat-x;}

.MainAnimate { margin-bottom: 20px; }


/* Thumb Scroll from jQuery book for main page */
#photos {
  overflow: hidden;
  width: 500px;
  margin: 0px auto 30px auto;
  height: 200px;
  position: relative;
  padding: 0px 0 0px 0;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}


#photos_inner {
  left: 0px; /* required for everything except FF which turns NaN into 0. Others get NaN. */
  height: 200px;
  width: 1500px; /* this needs to increase automatically via jQuery for 600*Number of LI */
  overflow: hidden;
  position: relative;
}



#photos_inner img {
  float: left;
  width: 300px;
  height: 200px;
  margin: 0px; /* override image-tv-landscape style */
}


.photos-text {
  float: left;
  width: 188px;
  height: 200px;
  margin: 0px;
  padding: 12px 6px 0px 6px;
  font: Helvetica;
  font-weight: bold;
  font-size: 120%;
  color: #008;
  background: #3C81C4 url(../jquery-ui-1.8.custom/css/blitzer-soft/images/ui-bg_glow-ball_100_blue_600x600.jpg) 50% 50% repeat-x;
}


.photo-buffer {
  position: absolute;
  width: 30px;
  height: 200px;
  display: inline;
  z-index: 10;
  top: 0px;
  left: 200px;
  margin: 0px;
  background-color: #800;
  /* for IE */
  filter:alpha(opacity=15);
  /* CSS3 standard */
  opacity:0.15; }


.following { background: url(../images/logos/following.png) 0 0 no-repeat; width: 66px; height: 46px; display: block; float:left; margin: 50px 6px 0px 40px;}
.previous { background: url(../images/logos/previous.png) 0 0 no-repeat; width: 66px; height: 46px; display: block; float:left; margin-top: 50px;  margin-left: 6px; }

.following-r { background: url(../images/logos/following-r.png) 0 0 no-repeat; }
.previous-r { background: url(../images/logos/previous-r.png) 0 0 no-repeat; }

#logos{ float:left;
  overflow: hidden;
  width: 480px;
  margin: 0px auto 30px auto;
  height: 60px;
  position: relative; top: 30px;
  padding: 0;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

#logos_inner {
  left: 0px; /* required for everything except FF which turns NaN into 0. Others get NaN. */
  height: 60px;
  width: 1728px; /* this needs to increase automatically via jQuery for 600*Number of LI */
  overflow: hidden;
  position: relative;
}

#logos_inner img {
  float: left;
  width: 96px;
  height: 60px;
  margin: 0px; /* override image-tv-landscape style */
}



.logoimage { float: left; margin: 0px 24px 24px 0px; width: 300px; height: 200px; }

.address  p { margin-top: 0px; margin-bottom: 0px; } /* Contact page use p but ensure lines are close together */

/* For Market Sectors - Tall blue blocks */
.dittoPageContent  { margin: 16px 30px 16px 30px; color: #008;
                     float: left; display:inline; /* IE6 positioniseverything.net - double margin problem fix with inline. Perhaps use on all floats */
                     width: 300px; height: 350px; padding: 12px 0 12px 0; border: 0;
background: #3C81C4 url(../jquery-ui-1.8.custom/css/blitzer-soft/images/ui-bg_glow-ball_100_blue_600x600.jpg) 50% 5% repeat-x; }

/* For News - Wide Blue Blocks */
.dittoNewsContent  { margin: 16px 30px 16px 30px; color: #008; width: 670px; height: auto; background-color: #DDF;  }
/* url(../jquery-ui-1.8.custom/css/blitzer-soft/images/ui-bg_inset-soft_100_a8abbd_1x100.png)  */

.dittoPageContent h2 { margin: 0px 0px 0px 12px; padding: 0; border: 0; }
.dittoPageContent .image-tv-landscape { margin: 0px; } /* for IE6 only to stop the background going as wide as the child image content (which has margin) */
.dittoPageContent h2  a { color: #008; text-decoration: none; }
.dittoNewsContent h2 { margin: 0px 12px 0px 12px; }
.dittoNewsContent h2  a { color: #008; text-decoration: none;  }



/*.dittoPageContent p { margin: 0px 12px 0px 12px; font-weight: normal; } */
.dittoPageContentText {margin: 0px 12px 6px 12px; font-weight: normal;}
.dittoPageContentDate { color: #666; margin: 0px 12px 0px 12px; }
.dittoPageContentMore { color: #008; text-decoration: none; position: relative; margin-left: 12px; padding-left: 20px;  }
.dittoPageContentMore span { display: inline; position: absolute; top: 0px; left: 0px; width: 16px; }

/* Use with ImageTV - just float left the content - the image must also float left perhaps via TV */
.image-tv-landscape { float: left; margin: 0px 24px 24px 0px; width: 300px; height: 200px; }
.image-tv-portrait { float: left; margin: 0px 24px 24px 0px; width: 200px; height: 300px; }
.floatleft { float: left; }


/* Sidebars
------------------------------------------------------------------------- */
#sidebar-left {
    float: left; width: 150px;
    margin: 16px 0px 15px 0px;
    padding: 0;
    font-size: 85%;
    line-height: 1.5em;
    color: #999;
    background: url(images/sidebar_bg.gif) no-repeat 0 0;
}

#sidebar-right {
        float: left; display: inline;
        width: 165px;
        position: relative; /* for Search to Float Absolute */
    margin: 4px 0px 0px 0px;
    padding: 0;
    font-size: 85%;
    line-height: 1.5em;
    color: #999;
    /* background: url(images/sidebar_bg.gif) no-repeat 0 0;   */
}



/* Right Sidebar CE Widgets */
.rightWidget
{
margin: 0px 0px 12px 6px;
}
.rightWidget h3 {
/* background: #a6a6a6 url(../jquery-ui-1.8.custom/css/blitzer-soft/images/ui-bg_highlight-soft_100_cdb7b7_1x100.png) 50% 50% repeat-x; */
background-color: #A00;
color: #FFF;
margin-bottom: 0px;
padding: 3px 3px;
font-weight: normal;
}
.rightWidgetContent {border: 1px solid #cdb7b7; padding: 3px;  }
.rightWidgetContent a { color: #C00; line-height: 1.5em;}
.rightWidgetContent p {margin-top: 0px; margin-bottom: 0px; }

/* Testimonials */
.testimonials {margin-top: 30px; margin-bottom: 20px; }
.testimonialPhoto {width: 150px; height: 110px; }
.testimonials a, .testimonials a:link {
    text-decoration: none; color: #010101;
    border-bottom: none;
}
.testimonials a:visited { color: #010101; border-color: #669; }
.testimonials a:hover { color: #61783F; border-color: #693; text-decoration: none; }
.testimonials a:active { color: #010101; border-color: #c33 }


/* Ditto Pagination -------------------------------------- */
#ditto-pagination { margin-top: 40px; }
.ditto_paging { margin-top: 20px; border-top: 1px solid #ccc; padding: 10px; font-size: 86%; color: black;}
#ditto_pages .ditto_currentpage { border: 1px solid black; padding: 1px 5px 2px; margin-right: 1px; background-color: #008CBA; color: #fff;}
#ditto_pages .ditto_off { border: 1px solid #ccc; padding: 1px 5px 2px; margin-right: 1px; color: #ccc;}
#ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited {
  border: 1px solid #008CBA; padding: 1px 5px 2px; margin-right: 1px; text-decoration: none !important; color: black;}
#ditto_pages a:hover { background-color: #fff; color: #000;}

/* People and Clients use Tooltip like animation ---------------------------------------------
*/
.peopleStatic {float:left; width: 128px; height: 180px; padding: 6px 6px; overflow: hidden; margin: 12px -30px 12px 90px;  background: transparent; }


/* Used for Sidebar and Content */
.clientStatic { clear:both; float:left; width: 150px; height: 110px; padding: 0px;  background: #C3CBAF; overflow: hidden; margin: 20px 0px 20px 0px; }
.clientStatic img { width: 150px; height: 110px;}
.clientStatic a  { text-decoration: none;  }
.clientStatic p  { margin: 6px; text-decoration: none; }
/* Content Who we work with specific */
.clientBody { float: left; width: 384px; height: 98px; margin: 20px 0px 20px 0px; padding: 6px 6px 6px 10px; background-image : url("../images/who-we-work-with/Dark-green-BG.jpg")}
.clientBody h3 { margin-top: 0px; margin-bottom: 0px; }
.clientBody a { text-decoration: none; color : #EEE;}
.clientBody p {margin-top: 2px; }
.clientText { color: #EEE; text-align: left; }


.clientBodyLight { float: left; width: 384px; height: 98px; margin: 20px 0px 20px 0px; padding: 6px 6px 6px 10px; background-image : url("../images/who-we-work-with/Light-green-BG.jpg")}
.clientBodyLight h3 { margin-top: 0px; margin-bottom: 0px; }
.clientBodyLight a { text-decoration: none; color : #333;}
.clientBodyLight p {margin-top: 2px; }
.clientTextLight { color: #333; text-align: left; }



.peopleStatic h4, clientStatic h4 { width: 118px; height: 1em; margin-bottom: 3px; padding: 0; text-align: left;
                  font: 11px Calibri, sans-serif; color: #666666; position: relative; left: -8px; }

.textHighlight {color: #22AA22 } /*  green highlight for text */

.peopleMove { position: absolute; /* text somehow starts after h3?  */
              z-index: 1; /* lift above text on page */
              width: 0px; margin: 0px 0px 0px 0px;
              overflow: hidden;
              height: 152px;
              /* height: 154px;  height of pS plus padding plus border? */
              /* Watch extra border and possibly padding of em value on LHS */
              opacity: 0.9; filter: alpha(opacity = 90);
              border: none;
              background: #555555;
              color: #DDDDDD;
               }

.peopleMoveContent { padding: 3px; width: 200px;
 /* position: relative; top:12px; left: 14px; width: 180px; padding 0.4em; */ }

.peopleMoveContent h3 { color: #44AA44; }

/* float should have width - 7em is a guess - and jobTitle gets right shifted with a width  */
.peoplePhoto { width: 95px; height: 95px; }
.jobTitle {  margin: 0px; font: 11px Calibri, sans-serif; text-align: left;
            position: relative; left: -8px;}
.readMore { margin: 12px 3px 12px 6px; }


 .people2 { width: 200px; }

 /*  Accordion
 ------------------------------------------------------------------------- */

 /*
 .ui-state-active { color: rgb(236,0,140); }

 .ui-accordion .ui-accordion-header a  { color: #FFFFFF; background-color: #87BC38; }
 .ui-state-active a:link { color: #FFFFFF; background-color: #61783F; }
 */

 /* copied icons from jQuery folder in case of jQuery updates */
 /*
 .ui-state-default .ui-icon{ background-image : url("../images/generic/ui-icons_ffffff_256x240.png"); }
 .ui-state-active .ui-icon{ background-image : url("../images/generic/ui-icons_ffffff_256x240.png"); }
 */

 /*.ui-state-active .ui-icon {background-image: none; }
 .ui-accordion .ui-accordion-header .ui-icon {background-image: none; } */


 /* Footer
------------------------------------------------------------------------- */
#footer {
    clear: both;
    margin: 0px 0px;
    padding: 0 0 9px 0;
    font-size: 85%;
    color: #666;
   /* background: url(../images/generic/footer.jpg) no-repeat top center; */
        background-color: #DDF;
        width: 960px;
        height: auto;
}

#footer-address {float:left; width: 15em; margin: 12px 12px 12px 20px; padding-right: 30px; border-right: 1px dashed #aaa; }
#footer-address  p {margin: 0; }
#footer-phone {float:left; width: 25em; margin: 12px; }
#footer-phone  p {margin: 0; }
.smalltext {font-size: 9px; }
.smalltext a {font-size: 9px; }

#footer-frank {float:right; width: 170px; height: 30px; margin: 12px; padding: 0 0 0 30px; border-left: 1px dashed #aaa; }
#footer-frank img { margin-left: -6px; }
.BSI-Text {font-size: 8px;  }

/* CE N/A
#footer p {
    padding: 20px 320px 20px 95px;
}
*/
#footer a {border-bottom: none;}