/* Colours
Dark blue: 088695
Light blue: 0fb4ba
*/

/*
Generic section
*/
body { text-align: center;
       background-color: #eaeaea;
       color: #333;
       font-family: Arial, Sans-serif; }

#Container { width: 938px;
             text-align: left;
             margin: 0 auto;
             background-color: #fff;
             position: relative;
             padding-bottom: 60px;
             overflow: auto; }

a { color: #088695;
    text-decoration: none; }

a:hover,
a:hover { text-decoration: underline; }

#Content .toggler { cursor: pointer; }

#Content .toggler:hover,
#Content .toggler:active { text-decoration: underline; }

/* -- Text replacement -- */
#ImageSelector h2 span,
#Sidebar div.phonenumber span,
#Forum h3 span,
#Tell h3 span { display: block;
                width: 0;
                height: 0;
                overflow: hidden; }

/*
Header Section
*/
#Header { height: 117px;
          width: 100%;
          position: relative;
          background: url(../img/design/marbles/marbles-header2.jpg) no-repeat right top; }

#Title { width: 165px;
         height: 87px;
         position: relative;
         top: 12px;
         margin: 0 0 0 25px; }

#Header ul.nav { position: absolute;
                 top: 10px;
                 right: 310px; }

#Sidebar ul.nav li,
#Header ul.nav li { font-size: 0.5em;
                    padding: 4px; }

#Sidebar ul.nav li a,
#Header ul.nav li a { margin-left: 5px;
                      color: #088695;
                      text-decoration: none;
                      font-size: 1.2em; }

#Header ul.nav li.bag a { color: #C7644D; }

#Sidebar ul.nav li a:hover,
#Header ul.nav li a:hover { text-decoration: underline; }

/*
Menu Section
*/

#MenuBar { background: #c0c0c0 url(../img/design/menu-gradient2.jpg);
           position: relative;
           font-size: 0.73em; }
/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/skeleton/skeleton.css */

#Menu { margin:0;
        list-style:none;
        position:relative;
        z-index:200;
        height:20px;
        padding:0;}

#Menu ul { padding:0 0 5px 0;
           margin:0;
           list-style:none;
           border:1px solid #9b9b9b;
           background:#fff;
           position:relative;
           z-index:200; }

#Menu li {float:left;}
#Menu li li {float:none;}

#Menu li li.divide { border-top: 1px dashed #888;
                     padding-top: 5px;
                     margin-top: 5px;}
/* a hack for IE5.x and IE6 */
* html #Menu li li {float:left;}

#Menu li a { display:block;
             float:left;
             color:#333;
             margin:0 0 0 15px;
             height:20px;
             padding: 0 10px;
             line-height:20px;
             text-decoration:none;
             white-space:nowrap; }

#Menu li li a { height:20px;
                line-height:20px;
                float:none;
                margin-left: 0; }

#Menu li li:hover > a { background-image: none; }

#Menu li:hover { position:relative;
                 z-index:300; }

#Menu li:hover ul { left:0;
                    top:18px; }

/* another hack for IE5.5 and IE6 */
* html #Menu li:hover ul {left:10px;}

#Menu ul { position:absolute;
           left:-9999px;
           top:-9999px; }

/* yet another hack for IE5.x and IE6 */
* html #Menu ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#Menu li:hover li:hover > ul { left:-15px;
                               margin-left:100%;
                               top:-1px; }
/* keep further levels hidden */
#Menu li:hover > ul ul { position:absolute;
                         left:-9999px;
                         top:-9999px;
                         width:auto; }
/* show path followed */
#Menu li:hover > a { background: url(../img/design/menu-gradient-dark.jpg) repeat-x; }


/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#Menu li:hover li:hover ul,
#Menu li:hover li:hover li:hover ul,
#Menu li:hover li:hover li:hover li:hover ul,
#Menu li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; top:-1px;}

/* keep further levels hidden */
#Menu li:hover ul ul,
#Menu li:hover li:hover ul ul,
#Menu li:hover li:hover li:hover ul ul,
#Menu li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#Menu li:hover a,
#Menu li:hover li:hover a,
#Menu li:hover li:hover li:hover a,
#Menu li:hover li:hover li:hover li:hover a,
#Menu li:hover li:hover li:hover li:hover li:hover a,
#Menu li:hover li:hover li:hover li:hover li:hover li:hover a
{ color:#333;}

/* hide futher possible paths */
#Menu li:hover li a,
#Menu li:hover li:hover li a,
#Menu li:hover li:hover li:hover li a,
#Menu li:hover li:hover li:hover li:hover li a,
#Menu li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}

#log { position: absolute;
       right: 40px;
       top: 0;
       color: #ad2200;
       display: block;
       width: 100px;
       margin-top: -8px;
       height: 35px;
       line-height: 35px;
       background: url(../img/design/clock.jpg) no-repeat right center; }

#log:hover { text-decoration: underline; }

#MenuBar img.menuMarble { position: absolute;
                          right: 233px;
                          top:-16px; }

/*
Main content
*/
#Content { width: 700px;
           padding-bottom: 60px; }

.single { background: url(../img/design/marbles/single-green.jpg) no-repeat 470px 240px; }

.line { background: url(../img/design/marbles/group-of-5.jpg) no-repeat center bottom;
        padding-bottom: 240px !important; }

.group { background: url(../img/design/marbles/group-of-5.jpg) no-repeat right bottom;
         padding-bottom: 120px !important; }

#Content div.intro { padding: 30px 0 0 73px; }

#Content .topPadding { padding-top: 70px; }

#Content h1 { color: #088695;
              margin: 80px 0 20px 50px;
              font-size: 1.9em;
              font-weight: normal; }

#Content div.intro h1 { margin: 30px 0 30px 0; }

#Content div.intro h1.jobTitle { font-size: 1.2em;
                                 margin: 30px 0; }

#Content div.intro h1.small,
#Content h1.small { margin: 20px 0 30px 0;
                    font-size: 1em; }

#Content h2 { color: #088695;
              margin: 0 0 5px 0;
              font-size: 1em;
              font-weight: normal;
              line-height: 1.6em;
              width: 500px; }

#Content h2.toggler { margin: 5px 0 0 0; }

#Content h2 span { color: #333;
                   margin-right: 5px; }

#Content p.introtext { color: #666;
                       line-height: 1.6em;
                       font-size: 0.8em;
                       width: 400px;
                       margin-bottom: 15px;
                       text-align: justify; }

p.maintext { color: #333;
             line-height: 1.6em;
             font-size: 0.8em;
             width: 500px;
             margin-bottom: 30px;
             text-align: justify; }

#Content ul.mainList { list-style: none;
                       color: #f00;
                       margin: 0 0 20px 0;
                       line-height: 1.6em;
                       font-size: 0.8em;
                       width: 500px; }

#Content ul.mainList li { margin: 0 0 10px 0;
                          padding: 0 0 0 15px;
                          background: url(../img/design/bullet.gif) no-repeat 0 8px;
                          color: #333; }

#Content p.subHeader { color: #C7644D;
                       margin: 0 0 30px 0; }

#Breadcrumbs { margin-bottom: 20px; }

#Breadcrumbs li { display: inline;
                  font-size: 0.8em; }

/* -- Image selector -- */
#ImageSelector { margin: 50px 0 0 60px;
                 height: 150px; }

#ImageSelector h2 { width: 314px;
                    height: 71px;
                    background-image: url(../img/design/headers/working-with-prolaw.jpg); }

#Faces { width: 300px;
         height: 52px;
         margin-top: 15px;
         margin-left: 10px;
         float: left;
         background-color: #B2B1AD;
         overflow: hidden;
         position: relative;
         visability: visable;
         z-index: 2; }

#MoveLeft,
#MoveRight { display: block;
             width: 16px;
             height: 16px;
             text-decoration: none;
             margin-top: 30px;
             float: left; }

#MoveLeft img,
#MoveRight img { border: 0; }

#MoveLeft { margin-left: 30px; }

#MoveRight { margin-left: 10px; }

#Content a.callToAction { clear: both;
                          color: #333;
                          text-decoration: none;
                          font-weight: bold;
                          font-size: 0.7em;
                          margin: 0 0 0 50px;
                          clear: both;}

#Content a.callToAction:hover { text-decoration: underline; }

#Content .toggled { padding: 0px 0 10px 0; }
/*
Search box section
*/
#SearchBox { width: 340px;
             margin: 17px 0 0 100px;
             background: url(../img/design/boxes/search-box-top.jpg) no-repeat top center; }

#SearchBox p { font-size: 0.8em;
               padding: 20px 20px 5px 20px; }

#SearchBox form { position: relative;
                  padding: 0 20px 20px 20px;
                  background: url(../img/design/boxes/search-box-bottom.jpg) no-repeat bottom center; }

#SearchBox fieldset { overflow: auto;
                      margin-top: 10px;
                      font-size: 0.8em; }

#SearchBox label { float: left;
                   display: block;
                   width: 130px;
                   font-weight: bold;
                   font-size: 0.9em; }

#SearchBox span { color: #088695;
                  clear: left;
                  font-size: 0.8em;
                  float: left;
                  display: block;
                  width: 90px;
                  margin: 10px 0 0 0; }

#SearchBox select { width: 150px;
                    font-size: 0.9em; }

#SearchBox input { position: absolute;
                   bottom: -10px;
                   right: 30px; }

/*
Job listing section
*/
#Content h2.jobResult { color: #005163;
                        font-weight: bold;
                        font-size: 0.9em; }

#Content h2.jobResult a { color: #005163;
                          font-size: 1em; }

#Content h2.resultsTitle { margin-bottom: 30px; }

a.jobLink { display: block;
            font-size: 0.8em; }

table.viewJob { margin-bottom: 20px;
                font-size: 0.8em; }

table.viewJob th { font-weight: bold;
                   padding: 0 10px 10px 0; }

#SearchResults { width: 560px; }

#SearchResults li { margin-bottom: 40px; }

#SearchResults li p.maintext { margin-bottom: 6px; }

#SearchResults li a { font-size: 0.8em; }

#SearchResults ul.actions { overflow: hidden; }

#SearchResults ul.actions li { float: left;
                               margin: 0 20px 0 0;
                               height: 1.2em;
                               display: block }

#SearchResults ul.actions li.view { float: right;
                                    margin-right: 0; }


#pagination { text-align: center; }

#pagination .nav { display: inline; }

#PerPage { width: 200px;
           float: right;
           text-align: right;
           margin-right: 70px; }
/*
Sidebar section
*/
#Sidebar { width: 200px;
           /*position: absolute;
           top: 138px;
           right: 0;*/
           float: right;
           padding-right: 35px; }

#Sidebar div.phonenumber { margin: 40px 0 0 auto;
                           text-align: right;
                           width: 154px;
                           height: 20px;
                           background-image: url(../img/design/headers/phone-number.jpg); }

#Sidebar a.search { background: #c7644d url(../img/design/search.jpg) no-repeat;
                    color: #fff;
                    display: block;
                    width: 185px;
                    height: 35px;
                    margin-top: 15px;
                    padding-left: 15px;
                    line-height: 35px;
                    text-decoration: none;
                    font-size: 1.1em; }

#Sidebar a.search:hover,
#Sidebar a.search:active { background-image: url(../img/design/search2.jpg);
                           color: #333; }

#Forum { background: #dae9b2 url(../img/design/boxes/green-box-top.jpg) no-repeat top left;
         margin-top: 15px;
         /*padding: 8px;*/ }

#Forum h3 { width: 175px;
            height: 81px;
            background: url(../img/design/headers/paralegal-forum.jpg) no-repeat 0 8px;
            margin: 0 8px; }

#Forum a { font-size: 0.8em;
           font-weight: bold;
           margin-top: 8px;
           line-height: 1.1em;
           color: #444;
           display: block;
           text-decoration: none;
           padding: 0 8px 8px 8px;
           background: url(../img/design/boxes/green-box-bottom.jpg) no-repeat center bottom; }

#Tell { background: #bccbd2 url(../img/design/boxes/blue-box-top.jpg) no-repeat top left;
        margin-top: 15px; }

#Tell h3 { width: 153px;
           height: 118px;
           background: url(../img/design/headers/tell-a-friend.jpg) no-repeat 0 5px;
           margin: 0 5px; }

#Tell a { font-size: 0.7em;
          font-weight: bold;
          line-height: 1.1em;
          color: #444;
          margin-top: 8px;
          text-decoration: none;
          display: block;
          padding: 0 5px 5px 5px;
          background: url(../img/design/boxes/blue-box-bottom.jpg) no-repeat center bottom; }

#Sidebar ul.nav { margin-top: 15px; }


#SearchBoxSidebar { background: #c9d4f0 url(../img/design/boxes/sidebar-search-top.gif) no-repeat top center;
                    margin: 20px 0 0 0;
                    padding: 10px 0 0 0; }

#SearchBoxSidebar form { padding: 0 0 10px 0;
                         background: url(../img/design/boxes/sidebar-search-bottom.gif) no-repeat bottom center; }

#SearchBoxSidebar fieldset { padding: 0 10px; }

#SearchBoxSidebar select { width: 180px;
                           font-size: 0.9em;
                           margin: 0 0 10px 0; }

#SearchBoxSidebar label { display: block;
                          font-weight: bold;
                          font-size: 0.8em;
                          margin-bottom: 4px; }

#SearchBoxSidebar span { color: #088695;
                          font-size: 0.7em;
                          display: block;
                          margin: 0 0 4px 0; }

#SearchBoxSidebar div { text-align: right;
                        padding-right: 10px; }


#JobBagInfo { background: #e3e9f7 url(../img/design/boxes/sidebar-jobbox-top.gif) no-repeat top center;
              margin: 20px 0 0 0;
              padding: 10px 0 0 0; }

#JobBagInfo a { margin-left: 10px; }

#JobBagInfo p { padding: 10px;
                background: url(../img/design/boxes/sidebar-jobbox-bottom.gif) no-repeat bottom center;
                width: auto;
                margin: 0;
                text-align: left; }

#EmailToggler { margin-top: 20px !important;
                cursor: pointer; }

#EmailToggler:hover,
#EmailToggler:active { text-decoration: underline; }

#EmailForm { background-color: #C9D4F0;
             width: 224px;
             padding: 10px 10px 0 10px; }

#EmailForm label { display: block;
                   font-weight: bold;
                   font-size: 0.8em;
                   margin-bottom: 4px; }

#EmailForm input { margin-bottom: 10px;
                   width: 220px; }

/*
Applicant form
*/

form.applicant { width: 420px;
                 margin: 60px 0 30px 80px;}

form.applicant div { overflow: hidden;
                     margin-bottom: 5px; }

form.applicant fieldset { margin-bottom: 30px; }

form.applicant label,
form.applicant select,
form.applicant input { float: left; }

form.applicant label { width: 8em;
                       font-weight: bold;
                       font-size: 0.75em; }

form.applicant label.second { width: 3.3em; }

form.applicant p { width: 450px; }

form.applicant div.multiline { margin-bottom: 20px; }

form.applicant div.multiline label { display: block;
                                     float: none;
                                     margin-bottom: 5px;
                                     width: 390px; }

form.applicant div.reversed label { float: left;
                                    margin: 0 10px 10px 0;
                                    width: 290px; }

form.applicant div.multiline textarea { width: 390px;
                                        height: 60px; }

form.applicant select { margin-right: 10px; }

form.applicant div.submit { padding-top: 10px; }

form.applicant div.submit input { float: right; }

div.error_message { clear: both;
                    margin-left: 6.5em;
                    color: #C7644D;
                    font-size: 0.8em; }

form.applicant div.multiblock { margin-bottom: 10px; }

form.applicant div.multiblock input { width: 120px; }

form.applicant div.multiblock input.date { width: 90px; }

form.applicant img.datepicker_trigger { position: relative;
                                        left: -21px; }

form.applicant div.multiblock label { width: 65px;
                                      margin: 0 10px 0 25px; }

form.applicant div.multiblock label:first-child { width: 38px;
                                                  margin: 0 10px 0 0; }

form.applicant div.question { overflow: hidden; }

form.applicant div.question input { float: left; }

form.applicant div.question label { float: left;
                                    width: auto;
                                    margin: 0 2px 0 10px; }

form.applicant span.hint { color: #999;
                           font-size: 0.75em;
                           margin-left: 3px; }
/*
vcard styling
*/
.vcard { font-size: 0.8em;
         color: #333;
         line-height: 1.6em; }

.hide,
.vcard .tel .type { display: none; }


/* Main Style Sheet for jQuery UI date picker */
#datepicker_div, .datepicker_inline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 0;
	margin: 0;
	background: #ddd;
	width: 185px;
}
#datepicker_div {
	display: none;
	border: 1px solid #777;
	z-index: 10; /*must have*/
}
.datepicker_inline {
	float: left;
	display: block;
	border: 0;
}
.datepicker_dialog {
	padding: 5px !important;
	border: 4px ridge #ddd !important;
}
button.datepicker_trigger {
	width: 25px;
}
img.datepicker_trigger {
	margin: 2px;
	vertical-align: middle;
}
.datepicker_prompt {
	float: left;
	padding: 2px;
	background: #ddd;
	color: #000;
}
* html .datepicker_prompt {
	width: 185px;
}
.datepicker_control, .datepicker_links, .datepicker_header, .datepicker {
	clear: both;
	float: left;
	width: 100%;
	color: #fff;
}
.datepicker_control {
	background: #088695;
	padding: 2px 0px;
}
.datepicker_links {
	background: #000;
	padding: 2px 0px;
}
.datepicker_control, .datepicker_links {
	font-weight: bold;
	font-size: 80%;
	letter-spacing: 1px;
}
.datepicker_links label { /* disabled links */
	padding: 2px 5px;
	color: #888;
}
.datepicker_clear, .datepicker_prev {
	float: left;
	width: 34%;
}
.datepicker_current {
	float: left;
	width: 30%;
	text-align: center;
}
.datepicker_close, .datepicker_next {
	float: right;
	width: 34%;
	text-align: right;
}
.datepicker_header {
	padding: 1px 0 3px;
	background: #333;
	text-align: center;
	font-weight: bold;
	height: 1.3em;
}
.datepicker_header select {
	background: #333;
	color: #fff;
	border: 0px;
	font-weight: bold;
}
.datepicker {
	background: #ccc;
	text-align: center;
	font-size: 100%;
}
.datepicker a {
	display: block;
	width: 100%;
}
.datepicker_titleRow {
	background: #777;
}
.datepicker_daysRow {
	background: #eee;
	color: #666;
}
.datepicker_weekCol {
	background: #777;
	color: #fff;
}
.datepicker_daysCell {
	color: #000;
	border: 1px solid #ddd;
}
.datepicker_daysCell a{
	display: block;
}
.datepicker_weekEndCell {
	background: #ddd;
}
.datepicker_daysCellOver {
	background: #fff;
	border: 1px solid #777;
}
.datepicker_unselectable {
	color: #888;
}
.datepicker_today {
	background: #fcc !important;
}
.datepicker_currentDay {
	background: #999 !important;
}
.datepicker_status {
	background: #ddd;
	width: 100%;
	font-size: 80%;
	text-align: center;
}

/* ________ Datepicker Links _______

** Reset link properties and then override them with !important */
#datepicker_div a, .datepicker_inline a {
	cursor: pointer;
	margin: 0;
	padding: 0;
	background: none;
	color: #000;
}
.datepicker_inline .datepicker_links a {
	padding: 0 5px !important;
}
.datepicker_control a, .datepicker_links a {
	padding: 2px 5px !important;
	color: #eee !important;
}
.datepicker_titleRow a {
	color: #eee !important;
}
.datepicker_control a:hover {
	background: #fdd !important;
	color: #333 !important;
}
.datepicker_links a:hover, .datepicker_titleRow a:hover {
	background: #ddd !important;
	color: #333 !important;
}

/* ___________ MULTIPLE MONTHS _________*/

.datepicker_multi .datepicker {
	border: 1px solid #777;
}
.datepicker_oneMonth {
	float: left;
	width: 185px;
}
.datepicker_newRow {
	clear: left;
}

/* ___________ IE6 IFRAME FIX ________ */

.datepicker_cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

/*-------------LOGIN FORM---------*/

form.loginForm { width: 300px; }

form.loginForm div { overflow: hidden;
                     margin-bottom: 5px; }

form.loginForm label { font-weight: bold;
                       font-size: 0.8em;
                       width: 80px;
                       display: block;
                       float: left; }

form.loginForm input { float: left; }

form.loginForm div.submit input { float: right; }