/**
  Main.css
  
  The CSS is organised in the following way. These headings can be used in a 'Find' command to skip quickly to the relevant area:
  
  - General Styles
    - Generic Table Styles
    - Generic Form Styles
  - Main Content and Page Specific Styles
    - Header
    - Navigation
  - General Layout Styles
  - Page Specific Styles
    -
  - Footer
  
**/

html { background-color: #798188; }
body { font-family: Helvetica, Arial, sans-serif; font-size: 62.5%; line-height: 1.125em; background: #798188 url(/images/chubb_bg.png) top left repeat-x; }

/************************************************************
 - General styles
*************************************************************/

#container { margin: 0px auto; width: 730px; background-color: white; padding: 20px 20px; }

#header { margin-bottom: 25px; }

h1 { font-size: 2.4em; color: #0059c2; margin: 28px 0 20px 0; }
h2 { font-size: 1.7em; color: #0059c2; margin: 28px 0 20px 0; }
h3 { font-size: 1.4em; color: #0059c2; margin: 28px 0 20px 0; }

.success, .notice, .warning, .failure, .error {
  font-size: 1em;
	padding: 10px 3px 10px 35px;
	margin: 9px 0px;
}
.success a, .notice a, .failure a, .error a { font-weight: bold; text-decoration: underline; }
.failure, .error {
	border: 1px solid rgb(255, 128, 128);
	background: rgb(255, 223, 223) url(/images/icons/exclamation.png) no-repeat 7px 7px;
	color: rgb(229, 46, 46);
}

span.amp {
font-family:Plantin,"Plantin std","Plantin","Baskerville","Goudy Old Style","Palatino","Book Antiqua",serif;
font-size:110%;
font-style:italic;
}

/** Navigation **/

#navigation ul {
  height: 30px;
  border-radius:                  3px 3px 0 0; /* the order of corners is, TL TR, BR, BL */
  -moz-border-radius:             3px 3px 0 0;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  background-color: #525252;
  background: -moz-linear-gradient(top, #9b9b9b, #525252);
  background: -webkit-gradient(linear, left top, left bottom, from(#9b9b9b), to(#525252));
}
#navigation ul li { float: left; }
#navigation ul li:not(:last-child) { border-right: 1px solid #6d6d6d; }
#navigation ul li:not(:first-child) { border-left: 1px solid #969696; }
#navigation ul li a {
  display: block;
  padding: 9px 24px 8px 24px;
  text-decoration: none;
  color: white;
  font-size: 1.15em;
  text-shadow: #525252 0px -1px 0px;
  -webkit-transition: background-color 0.6s linear;
}

#navigation ul li a.selected, #navigation ul li a:hover { background: #525252; }
#navigation ul li:first-child a:hover { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; }

/** Content **/

#primary-content    { display: inline-block; width: 480px; padding: 0 30px 0 22px; margin-bottom: 10px; }
#secondary-content  { display: inline-block; width: 180px; vertical-align: top; padding-top: 70px; }

#primary-content p { font-size: 1.3em; line-height: 1.2em; padding: 10px 0; }
#primary-content ul { margin: 10px; list-style-type: disc; }
#primary-content ul li { margin: 5px; font-size: 1.2em; }

#primary-content .error p { padding: 0; }

#secondary-content h2 { border-bottom: 1px solid #ccc; font-size: 1.8em; color: #0059c2; margin: 0px 0 15px 0; padding: 3px 6px 5px 6px; }
#secondary-content ul li { margin: 8px 0; padding: 9px 6px; border-bottom: 1px dotted #999; }
#secondary-content ul li a { text-decoration: none; color: #40b6e8; font-size: 1.2em; line-height: 1.2em; }
#secondary-content ul li a.selected { color: #999; }

.small_image { background: url(/images/small_image_bg.png) center center no-repeat; width: 160px; height: 126px;  }
.small_image img { margin: 10px 0 0 10px; }

.roles_button {
  display: inline-block;
  width: 120px;
  background-color: #e42222;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e94b4b), to(#e42222));
  background-image: -moz-linear-gradient(top, #e94b4b, #e42222);
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 8px 20px 6px 20px;
  margin-top: 20px;
  border: 1px solid #b61919;
  border-radius:          5px;
  box-shadow:             0px 1px 2px #555;
  -webkit-border-radius:  5px;
  -webkit-box-shadow:     0px 1px 2px #555;
  -moz-border-radius:     6px;
  -moz-box-shadow:        0px 1px 2px #555;
}
.roles_button span {
  display: inline-block;
  font-size: 1.4em;
  padding: 0 10px;
  line-height: 18px;
  font-weight: normal;
  text-shadow: #971414 0px -1px 0px;
  cursor: pointer;
}
input.roles_button { font-size: 1.3em; text-shadow: #971414 0px -1px 0px; padding-top: 7px; }

/** The Forms **/

form fieldset label, form fieldset span { display: block; font-size: 1.2em; margin-top: 10px; line-height: 1.2em; }
form fieldset select { width: 200px; margin-top: 6px;}
form fieldset span + label, form fieldset span + label + label { display:inline-block; }

form fieldset + fieldset label { display:inline-block; width: 120px; text-align: right; padding-right: 10px; }
form fieldset + fieldset label + input,
form fieldset + fieldset label + select  { display:inline-block; width: 250px; margin: 0 30px 10px 0; }

input[type="text"],
input[type="email"],
input[type="telephone"] { border: 1px solid #ccc; padding: 4px; font-size: 1.4em; border-radius: 3px; -moz-border-radius: 2px; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="telephone"]:focus { background-color: rgb(237, 243, 254); }

/** Footer **/

#footer { margin-top: 15px; }
#footer ul {
  height: 30px;
  border-radius:          3px;
  -moz-border-radius:     3px;
  -webkit-border-radius:  3px;
  background-color: #e4e4e4;
  background: -moz-linear-gradient(top, #f4f4f4, #e4e4e4);
  background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e4e4e4));
  color: #7e858c;
}
#footer ul li { float: left; }
#footer ul li:first-child { margin-left: 13px; }
#footer ul li a, #footer ul li span { display: block; text-decoration: none; padding: 10px 10px; color: #7e858c; font-size: 1em; }