/* CSS Document 
version 1 March 2009

Colours in use:

Red #FF0000
Dark Blue #000033
Mid blue #3D71B8
Light blue #98C3FD
Very pale blue #EFF5FE
The right sub-blue #B6C3D6



*/


/**********
 BASIC CSS STRUCTURE
**********/

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

body {
background-color:#000033;
font-family: Geometr231, Verdana, Arial, sans-serif; /* Need to set the font stack correctly */
font-size: 10px;
color:#000033;
}

/* Typography */

p {
font-size:1.2em;
line-height:1.6em;
margin:0 0 10px 0;
}

h1 {
font-size:2.2em;
margin:0 0 10px 0;
font-weight:normal;
}

h2 {
font-size:1.6em;
line-height:1.8em;
margin:0 0 10px 0;
font-weight:normal;
}


h3 {
font-size:1.2em;
font-weight:bold;
font-style:italic;
margin:0 0 10px 0;
}

#headintro h2 { /* Specific Header info for the header title */
font-size:1.8em;
color:#fff;
line-height:1.6em;
}

h4 {
font-size:1.4em;
margin:10px 0 5px 0;
}

p + h2 { /* Paragraph immediately preceeding an H2 */
margin:20px 0 5px 0;
}

h2 + p { /* Paragraphs immediately following an H2 */
margin:0 0 10px 0;
}

/* Basic link styling */

a:link, a:visited { /* Red links as standard */
color:#FF0000;
text-decoration:none;
}

a:hover, a:active {
color:#FF0000;
text-decoration:none;
}

a img {
border:none;
}

/* Standard list CSS */

ul {
padding:0;
margin:0;
list-style-type: none;
font-family: Geometr231, Verdana, Arial, sans-serif;
font-size: 1.2em;
}

li {
/*margin: 0 0 3px 5px;*/
margin:0;
padding:0;
/*line-height:1.6em;*/
line-height:2em;
max-width:450px;
}

ul + h2, ol + h2 {
margin:20px 0 5px 0;
}

/* Clearing DIV */

.clearer {
clear:both;
}

/**********
  LAYOUT
**********/

#container_a {
background-color:#3d71b8; /* mid-blue */
background-image: url(images/contabg.jpg);
background-position: bottom;
background-repeat: no-repeat;
padding-bottom:20px;
}

#container_b {
background-image:url(images/contbbg.gif);
background-repeat:repeat-x;
}

html>body #container_b {
background-image:url(images/contbbg.png);
background-repeat:repeat-x;
}

#wrapper {
width:908px;
min-height:950px;
margin:60px auto 0 auto;
}

#wrapperc {
width:908px;
min-height:950px;
margin:60px auto;
}

#speciality #wrapper {
width:908px;
margin:60px auto 0 auto;
background-image: url(images/main_BG.gif);
background-repeat:repeat-y;
}

#headera {
background-image:url(images/headera.jpg);
background-repeat:no-repeat;
width:423px;
height:386px;
float:left;
}

#headerb {
background-image:url(images/headerb.jpg);
background-repeat:no-repeat;
width:485px;
height:386px;
float:right;
}

#headerc { /* Used on the Speciality section only */
background-image:url(images/headerb.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
position:relative;
width:460px;
float:left;
/* display:inline;*/
}

#headerc .specdiagram { /* Place the spec diagram inside the headerc column */
width:460px;
height:660px;
background-image: url(images/JR_spec_diagram.png);
background-repeat:no-repeat;
margin-top:160px;
position:relative;
}

#headerspec {
background-image:url(images/headera.jpg);
background-repeat:no-repeat;
width:423px;
float:left;
}

#logo {
margin:0 0 0 30px;
width:174px;
height:161px;
padding:0;
}

#headintro {
margin:0 0 0 50px;
width:360px;
padding:0;
}

#headintro p {
color:#FFFFFF;
}

#headintro a:link, #headintro a:visited {
color:#98c3fd;
text-decoration:none;
border-bottom:1px dotted;
}

#headintro a:hover, #headintro a:active {
color:#FF0000;
text-decoration:none;
border-bottom:1px dotted;
}

#content {
background-image:url(images/bodybg.jpg);
background-repeat:repeat-y;
margin:0;
padding:0 0 20px 0;
width:908px;
}

#speciality #content {
width:883px;
background-color:#FFFFFF;
}

#singlecolumn {
width:620px;
float:left;
margin-left:30px;
padding-bottom:50px;
}

#singlecolumn a:link, #singlecolumn a:visited {
color:#FF0000;
text-decoration:none;
border-bottom:1px dotted;
}

#singlecolumn a:hover, #singlecolumn a:active {
color:#FF0000;
text-decoration:none;
border-bottom:1px dotted;
}

.doublecolheader { /* needed to add in the title above the double columns */
width:450px;
float:left;
margin:0 0 10px 30px;
display:inline;
}

#singlecolumn p { /* Stops the text stretching out too far */
max-width: 450px;
}

#narrowcolumn {
width:420px;
float:left;
margin-left:30px;
margin-right:30px;
min-height:540px;
height:540px;
padding-bottom:50px;
}

#doublecolblock {
width: 480px;
float: left;
display:inline;
}

.doublecolumn { /* This is the double column for the consultants page */
width:200px; /* Was 196px */
float:left;
margin: 0 0 0 30px;
padding:0;
display:inline;
}

#speccolumn {
width:420px;
float:left;
margin-left:30px;
margin-right:30px;
}

#base {
background-image:url(images/footer.gif);
background-position:top left;
background-repeat:no-repeat;
/*height:57px;*/
padding-bottom:80px;
overflow:hidden;
padding:0 15px;
width:908px;
clear:both;
}

#speciality #base {
width:878px;
margin:0 auto;
}

#navcontainer {
margin-left: 0;
}

#footer {
color:#FFFFFF;
float:left;
list-style: none;
padding: 15px 0;
margin: 0;
}

#footer li {
display: inline;
padding: 0 5px;
margin: 0;
}

#footer a:link, #footer a:visited {
color:#FFFFFF;
font-weight:normal;
text-decoration:none;
border-bottom:1px dotted #FFFFFF;
}

#footer a:hover, #footer a:active {
color:#FF0000;
font-weight:normal;
text-decoration:none;
border-bottom:1px dotted #FF0000;
}

#copyright {
color:#FFFFFF;
float:right;
padding:20px 0;
padding-right:50px;
clear:right;
}

#copyright:after {
content:".";
display:none;
height:1px;
clear:both;
}

#speciality #copyright {
padding-right:20px;
}

#copyright p{
text-align:left;
margin-right:10px;
color:#FFFFFF;
}

/*#speciality #base {
width:908px;
margin:0 auto;
}*/

#credits {
height:30px;
text-align:center;
width:860px;
float:left;
display:inline;
}

/**********
  OTHER CUSTOM ELEMENTS
**********/

.float_img_left { /* Float the link images to the left */
float:left;
display:inline;
margin-right:10px;
margin-bottom:10px;
width:130px;
}

/* Additional link panels */

.ctapanel {
width:200px;
float:left;
background-image:url(images/panelbase.jpg);
background-position:bottom;
background-repeat:no-repeat;
margin:10px 0px 10px 10px;
}

.panelone {
margin-right:30px;
}

.surgeonlist { /* Specific panel for the consultants page */
margin-left:20px;
margin-top:0;
}

.surgeonlist a:link, .surgeonlist a:visited, .surgeonlist a:hover, .surgeonlist a:active {
text-decoration:none;
border-bottom:1px dotted;
}

.ctapaneltop {
background-image:url(images/paneltop.jpg);
background-position:top;
background-repeat:no-repeat;
}

.ctapanel p {
padding:0 15px 15px 15px;
}

.ctapanel h3 {
padding:15px 15px 0 15px;
}

/* .ctapanel a:link, .ctapanel a:visited {
display: block;
padding:0px 2px 2px 15px;
color:#3D71B8; /* Mid-blue */
/*background-image: url(images/smallarrow.jpg);
background-position:.2em 0em;
background-repeat:no-repeat;
height:1%;
}*/

/*.ctapanel a:hover, .ctapanel a:active {
display: block;
padding:0px 2px 2px 15px;
color:#FF0000; /* Mid-blue */
/*background-image: url(images/smallarrow.jpg);
background-position:.2em 0em;
background-repeat:no-repeat;
height:1%;
}*/

.ctapanel ul {
margin:15px; /* Updated DD 22/02/10 */
}

#narrowcolumn img {
float:right;
margin-left:10px;
margin-bottom:10px;
}

.doublecolumn img {
float:left;
margin-right:5px;
margin-bottom:10px;
}

/* Panels for the FAQs */

.faqpanel_q {
background-image:url(images/faqquesstion.gif);
background-position:top right;
background-repeat:no-repeat;
background-color:#EFF5FE; /* Light blue */
padding:10px;
margin-bottom:2px;
}

.faqpanel_q p, .faqpanel_a p {
margin:0;
line-height:1.2em;
}

._answer p {
margin-top:10px;
margin-left:20px;
line-height:1.6em;
}



/**********
  NAVIGATION
**********/

#navigation {
margin:0px;
padding:0px;
float:left;
display:inline;
}

#speciality #navigation { /* knocks down the navigation when on the speciality page only */
margin-top:70px;
}

#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 1.4em;
}

#navigation li {
margin: 0 10px 3px 30px;
}

#navigation a {
display: block;
padding: 1px 0px 10px 24px;
width: 100px;
}

#navigation a:link, #navigation a:visited {
color:#000033;
text-decoration:none;
}

#navigation a:hover, #navigation a:active {
color: #FF0000;
}

/* Highlight the selected section with an arrow */
#active a:link, #active a:visited, #active a:hover, #active a:active {
background-image: url(images/arrow.jpg);
background-position:5px 3px;
background-repeat:no-repeat;
color: #071934;
font-weight:bold;
}

/**********
  SPECIALITY NAV & DIAGRAM
**********/

#specialitycontainer { /* Holds the copy on the left hand side of the speciality page */
width:230px;
float:left;
margin:70px 0 20px 15px; /* enhanced to ensure that it lines up with the other pages */
}

/*.spectab {
padding-top:8px;
width:80px;
height:27px;
float:left;
display:inline;
text-align:center;
font-size:1.1em;
font-weight:bold;
}

.spectab a {
color:#ffffff;
text-decoration:none;
border-bottom:1px dotted;
}

.tabon {
background-image: url(images/tab_on.gif);
}

.taboff {
background-image: url(images/tab_off.gif);
}

.speccontent {
clear:both;
background-color: #000033;
background-image: url(images/specbase.gif);
background-position:bottom;
background-repeat:no-repeat;
padding-bottom:15px;
} */

#specialitycontainer ul{
margin:0 20px;
padding:0 0 10px 0;
}

#specialitycontainer li{
list-style-type:square;
}

#specialitycontainer a:link, #specialitycontainer a:visited {
color:red;
text-decoration:none;
border-bottom:1px dotted;
}

#specialitycontainer a:hover, #specialitycontainer a:active {
text-decoration:none;
border-bottom:1px dotted;
}

/* .speccontent p {
padding:10px 10px;
margin:0;
}

.speccontent h1 {
color:#FFFFFF;
font-size:1.2em;
padding:0px 10px;
margin:0px;
color:#3D71B8;
}*/

/* Speciality areas that need to be laid out over the main div */
.shoulder {
position:absolute;
top:85px;
width: 460px;
height: 67px;
padding:0;
margin:0;
}

.elbowleft {
position:absolute;
top:152px;
left:0;
width:133px;
height: 86px;
padding:0;
margin:0;
}

.spine {
position:absolute;
top:152px;
left:133px;
width:92px;
height: 86px;
padding:0;
margin:0;
}

.elbowright {
position:absolute;
top:152px;
left:225px;
width:235px;
height: 86px;
padding:0;
margin:0;
}

.hips {
position:absolute;
top:238px;
width:460px;
height: 68px;
padding:0;
margin:0;
}

.knee {
position:absolute;
top:432px;
width: 460px;
height: 68px;
padding:0;
margin:0;
}

.footankle {
position:absolute;
top:573px;
width: 460px;
height: 68px;
padding:0;
margin:0;
}

/**********
  FORM
**********/

form {
width:450px;
margin-bottom:20px;
}

input.texta {
width:450px;
height:18px;
background-color:#eff5fe; /* Pale blue */
border:1px solid #B6C3D6;
margin-bottom: 10px;
padding:6px;
}

textarea {
background-color:#eff5fe; /* Pale blue */
border:1px solid #B6C3D6;
width: 450px;
height: 150px;
margin-bottom: 10px;
padding:6px;
}

textarea, input {
font-size:1.2em;
color:#000033; /* dark blue */
font-family: Geometr231, Verdana, Arial, sans-serif;
margin-top:10px;
}

label { /* Form field labels */
font-size:1.2em;
font-weight:bold;
color:#000033; /* dark blue */
margin-bottom: 10px;
display: block;
}

/* Consultant biog picture */
.picture {
width:150px; 
height:225px; 
display: block; 
float: right;
margin-left: 20px;
margin-bottom: 20px;
}

.smallpicture {
width:70px; 
height:100px; 
display: block; 
float: left;
margin-right: 10px;
}

/* Consultants page */

.surgeon {
clear: both;
height: 100px;
margin-bottom: 10px;
display: block;
padding-bottom:10px;
border-bottom:1px solid #B6C3D6; /* Light blue line */
width:200px;
}

.surgeon p {
font-size: 1.2em;
}

.surgeon p.qualifications {
font-size: 1em;
font-style: italic;
line-height:1.2em;
}

.surgeon a:link, .surgeon a:visited {
text-decoration:none;
border-bottom:1px dotted;
}

/* home page list */

ul.objectives {
margin-bottom:20px;
}

ul.objectives li {
padding-left:25px;
background-image: url(images/arrow.jpg);
background-position:5px 0px;
background-repeat:no-repeat;
color: #071934; /* Light blue */
margin:10px 0;
}

.boldred {
font-weight:bold;
color:#FF0000; /* Joint Reaction red */
}

/* Link page specific */

.linkitem {
width:450px;
padding:10px 0;
border-bottom:1px solid #EFF5FE; /* Very light blue */
}

.linkitem h2 {
clear:Both;
border-bottom:1px solid #B6C3D6; /* Very light blue */
}

.linktext {
float:left;
display:inline;
margin-left:20px;
width:280px;
}

._imagebox {
margin:10px 0 20px 0;
background-color: white;
}

._imagebox img {
border-bottom:2px solid #000033;
}

/* Image captioning via TinyMCE */

.captionright {
float:right;
text-align:center;
font-size:10px;
font-style:italic;
font-weight:bold;
padding-left:10px;
}

.captionright img {
display:block;
  padding: 0;
    margin: 0 auto 5px auto;
}

.captionleft {
float:left;
text-align:center;
font-size:10px;
font-style:italic;
font-weight:bold;
padding-left:10px;
}

.captionleft img {
display:block;
  padding: 0;
    margin: 0 auto 5px auto;
}

.captioncentre {
float:right;
text-align:center;
font-size:10px;
font-style:italic;
font-weight:bold;
margin:10px auto;
}

.captioncentre img {
display:block;
  padding: 0;
    margin: 0 auto 5px auto;
}