* {
margin : 0px;
padding : 0px;
}
body {
background : #fff;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size : 12px;
line-height : 17px;
color : #033;
width: 960px; margin: 0 auto;
}
a {
text-decoration : none;
color : #336699;
}
a:hover {
text-decoration : underline;
color : #111;
}
#wrap {
width : 780px;
margin-left : 100px;
margin-top : 0 auto;
}
#header {
height : 40px;
}
#header h1 {
font-size : 28px;
letter-spacing : -1px;
padding : 23px 0 0 20px;
color : #3069ae;
}
#header h1 a {
color : #3069ae;
text-decoration : none;
font-weight : 100;
letter-spacing : -2px;
}
#header h1 a:hover {
color : #111;
}
#header h2 {
font-size : 19px;
color : #da0000;
padding : 5px 0 0 20px;
letter-spacing : -1px;
font-weight : 100;
}
#menu {
height : 30px;
line-height : 30px;
background : #3069ae url(images/bar.jpg) no-repeat;
}
#menu ul {
list-style-type : none;
padding-left : 20px;
}
#menu ul li {
display : block;
float : left;
}
#menu ul li a {
padding : 0 20px 0 0;
text-decoration : none;
font-weight : 100;
font-size : 14px;
color : #fff;
}
#menu ul li a:hover {
color : #fff;
text-decoration : underline;
}
#content {
padding : 0 20px 20px 20px;
}
.left {
float : left;
width : 550px;
text-align : justify;
padding-top : 10px;
}
.left h2 {
font-size : 18px;
font-weight : 100;
padding : 15px 0 7px 0;
}
.left h2 a {
text-decoration : none;
}
.left h2 a:hover {
color : #111;
}
.right {
float : left;
width : 150px;
padding-top : 15px;
padding-left : 40px;;
}
.right h2 {
margin : 10px 0 0 0;
padding-left : 10px;
height : 24px;
line-height : 24px;
background : #3f7ac6;
color : #fff;
font-size : 13px;
font-family : "Trebuchet MS Verdana", Arial, Helvetica, sans-serif;
}
.right ul {
padding : 10px 0 15px 10px;
list-style-type : none;
}
.right ul li a {
color : #336699;
text-decoration : none;
font-size : 12px;
font-weight : 100;
}
.right ul li a:hover {
color : #111;
}
#footer {
height : 30px;
width : 775px;
line-height : 30px;
text-align : center;
font-size : 11px;
color : #fff;
background-color : #3069ae;
background-image : url(images/bar.jpg);
background-repeat : no-repeat;
height : 30px;
line-height : 30px;
}
#footer a {
color : #fff;
}
strong {
font-size : 16px;
line-height : normal;
}
.grouplist h3 {
margin-top : 30px;
}
.grouplist table {
cellpadding : 0;
width : 100%;
}
td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}
.grouplist img {
width : 180px;
height: auto;
}
.img-col {
align : center;
width : 24%;
}
.name-col {
text-width : 76%;
text-align : left;
}
.grouplist hr {
margin-bottom : 10px;
}
.mugshot {
display: block;
width : 80px;
height : 80px;
background-repeat: no-repeat;
background-size : cover;
}

.boxed {
  border: 1px solid grey;
  padding-left: 1cm;
  padding-right: 1cm;
}

.left {
margin-bottom : 100px;
}
#wrap #content .left table tr td p {
font-family : Lucida Console, Monaco, monospace;
}
#wrap #content .left table tr td p a {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
#wrap #content .left table tr td p a tt {
font-family : Lucida Console, Monaco, monospace;
}
#wrap #content .right ul p {
text-align : justify;
}
#wrap #content .right ul {
text-align : justify;
}
#wrap #content .right ul {
text-align : left;
font-weight : normal;
}
#wrap #content .right ul p {
text-align : right;
}
#wrap #content .right ul p {
text-align : center;
}
#wrap #content .right ul p {
text-align : justify;
}
#wrap #content .right ul p {
text-align : left;
}
#wrap #content .left table tr td p strong {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}

*------------------------------------*\
    NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left; /* Clear floats */
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#3069ae;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
    background:#3069ae; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#3069ae;
    text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#333;
}