/* AJAX drop down list */
.ajaxDDlist {
    display: none;
    position: absolute;
    border: 1px solid #727272;
    border-top: 0;
    margin: 0;
    padding: 0;
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #FFFFFF;
    list-style-type: none;
    list-style-position: outside;
}

.ajaxDDlist > li {
    margin: 0;
    padding: 0;
}

.ajaxDDlist > li > .DDlink,.DDlink:hover {
    display: block;
    padding: 2px;
    text-decoration: none;
}

.ajaxDDlist > li > .DDlink:hover {
    background-color: #CCCCCC;
}

.ajaxInputField {
    width: 190px;
}

/* HTML Pop Up Div */
#htmlPop {
    width: 600px;
    background: #000;
    padding: 10px;
    position: fixed;
    -moz-border-radius: 5px;
}

#htmlPopTitle {
    color: #FFFFFF;
    font-weight: bold;
    padding: 5px;
}

#htmlPopFrame {
    width: 100%;
}

/* Calendar */
#calendarPop {
    padding: 5px;
    background: #CCCCCC;
    border: 1px solid #666666;
}

.calendar {
    width: 100%;
    clear: both;
    font-size: 90%;
}

.calendar th {
    background: #FFFFFF;
}

.calendar td {
    text-align: center;
}

.calendar td a {
    color: #555555;
    display: block;
}

.calendar td.selected {
    background-color:   #00ff70;
}

.monthyearselect {
    background: #FFFFFF;
}

form.clock {
    text-align: center;
}

/* Member Login/Area related style */
#memberLogin {
    background: #CCCCCC;
    border: 1px solid #666;
}

#memberLogin legend {
    font-size: 17px;
    font-weight: bold;
}

#memberLogin .fieldLabel {
    font-weight: bold;
}

#memberLogin input[type=text] {
    width: 90%;
}

#memberLogin input[type=password] {
    width: 90%;
}

#memberLogin .loginInfo {
    font-style: italic;
}

#memberLoginInfo {
    text-align: right;
    margin: 3px;
    padding: 3px;
    border-bottom: 1px solid #999;
}

#memberLogout {
    color: #FF0000;
    font-weight: bold;
}

.errorBox {
    margin: 3px;
    padding: 3px;
    color: #f00;
    border: 1px solid #f00;
}

.memberLoanList, .memberDetail {
    width: 99%;
    margin: 3px;
    border: 1px solid #999;
}

.memberLoanListInfo, .memberDetailInfo {
    border: 0;
    padding: 3px;
}

.dataListHeader {
    background: #fc0;
}

.alterCell, .alterCell2 {
    background-color: #ccc;
    border-bottom: 1px solid #ccc;
}

.alterCell2 {
    background-color: #fff;
}

/* Visitor counter */
#visitorCounterWrap {
    margin: 0 auto;
    width: 500px;
    background: #fff;
    border: 1px solid #999;
    padding: 5px;
}

#visitorCounterWrap #counterInfo {
    display: none;
    padding: 3px;
    border: 1px dotted #f00;
    font-weight: bold;
    font-size: 110%;
}

#visitorCounterWrap .info {
    font-weight: bold;
    border-bottom: 1px solid #999;
}

#visitorCounterWrap legend {
    font-weight: bold;
    font-size: 120%;
}

#visitorCounterWrap input[type=text] {
    width: 100%;
}

#visitorCounterForm {
    width: 75%;
    float: left;
}

#visitorCounterPhoto {
    margin-top: 10px;
    float: right;
    width: 100px;
    height: 120px;
}
.container_12 {
  margin-left:auto;
  margin-right:auto;
  width:960px
}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 {
  display:inline;
  float:left;
  margin-left:10px;
  margin-right:10px
}

.alpha{margin-left:0}

.omega{margin-right:0}

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

.container_12 .grid_3 {
  width: 220px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_6 {
  width: 460px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_9 {
  width: 700px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

.container_12 .grid_12 {
  width: 940px;
}

html body div.clear,html body span.clear {
  background: none;
  border: 0;
  clear: both;
  display: block;
  float: none;
  font-size:0; margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0}

.clearfix:after {
  clear: both;
  content: '.';
  display: block;
  visibility: hidden;
  height: 0}

.clearfix {
  display: inline-block
}

* html .clearfix {
  height:1%
}

.clearfix {
  display: block
}
body {
  margin: 0;
  margin-top: 5px;
  background: #a1cf2f url(igos/media/bg.gif) repeat;
}

* {
  font-family: Helvetica, Arial;
  font-size: 11px;
  color: #666;
}

#header {
  background: url(igos/media/logo.png) left center no-repeat;
  padding-left: 80px;
  height: 100px;
}

#app-title {
  margin-top: 20px;
}

#app-title a {
  color: #666;
  font-size: 21px;
  text-decoration: none;
}

#app-title div {
  font-size: 17px;
  color: #a1cf2f;
}

#side-menu {
  width: 180px;
  margin-right: 0;
}

#side-menu form {
  margin-bottom: 10px;
}

#side-menu select,input[type=text] {
  display: block;
  width: 90%;
}

#main-content {
  width: 740px;
  padding: 5px;
  background: #fff url(igos/media/main-bg.png) top left repeat-x;
}

#nav-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav-links li {
  margin: 0;
  padding: 0;
}

#nav-links li a {
  padding: 5px;
  padding-left: 10px;
  display: block;
  font-weight: bold;
  text-decoration: none;
  background: #ccc url(igos/media/nav-link-bg.png) top left repeat-x;
}

#nav-links li a:hover {
  text-decoration: underline;
  background: #fff url(igos/media/nav-link-bg-hover.png) top left repeat-x;
}

#nav-links li.nav-links-header a {
  padding: 5px;
  display: block;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  background: #fff;
}

.nav-links-header a {
  color: #000;
}

#headerInfo {
  padding: 5px;
}

#info-box {
  background: #fff;
  border: 1px solid #999;
  padding: 5px;
}

#loginForm {
  padding: 10px;
  padding-top: 120px;
  background: #ffd700 url(igos/media/login-bg.png) top center no-repeat;
  width: 400px;
  margin: 0 auto;
}

/*
 * Tabs CSS
 * Primary menu tabs
 */

div.tabs
{
  margin: 0 0 0 0;
}

#primary-links
{
  margin: 0;
  margin-left: 0px;
  padding: 0 0 0 10px;
  border-width: 0;
  list-style: none;
  white-space: nowrap;
  line-height: normal;
  background: url(igos/media/tab-bar.png) repeat-x left bottom;
}

#primary-links li
{
  float: left;
  margin: 0;
  padding: 0;
}

#primary-links li a
{
  display: block;
  height: 24px;
  margin: 0;
  padding: 0 0 0 5px; /* width of tab-left.png */
  border-width: 0;
  font-weight: bold;
  text-decoration: none;
  color: #777;
  background-color: transparent;
  background: url(igos/media/tab-left-new.gif) no-repeat left -38px;
}

#primary-links li a span
{
  display: block;
  height: 20px; /* 24px (parent) - 4px (padding) */
  margin: 0;
  padding: 4px 13px 0 6px;
  border-width: 0;
  line-height: 20px;
  background: url(igos/media/tab-right-new.gif) no-repeat right -38px;
  cursor: pointer;
}

#primary-links li a:hover
{
  border-width: 0;
  background-color: transparent;
  background: url(igos/media/tab-left-new.gif) no-repeat left -76px;
}

#primary-links li a:hover span
{
  background: url(igos/media/tab-right-new.gif) no-repeat right -76px;
}

#primary-links li.active a, #primary-links li.active a:hover
{
  border-width: 0;
  color: #000;
  background-color: transparent;
  background: url(igos/media/tab-left-new.gif) no-repeat left 0;
}

#primary-links li.active a span, #primary-links li.active a:hover span
{
  background: url(igos/media/tab-right-new.gif) no-repeat right 0;
}


/* IE */

#primary-links li a, #primary-links li a span
{
  _display: inline; /* Otherwise the blocks mistakenly get 100% width in IE5 */
  _di\splay: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */
}

#primary-links
{
  _width: 100%; /* Otherwise IE5 treats the ul as floated */
  _w\idth: auto; /* Reset to auto width for IE6 */
}

#footer {
  border: 1px solid #999;
  padding: 5px;
  margin-top: 5px;
  width: 920px;
}

.datagrid {
  width: 100%;
  border: 1px solid #999;
  border-bottom: 0;
  border-top: 0;
  border-spacing: 0;
}

.datagrid-action {
  padding: 3px;
  border: 1px solid #999;
}

.datagrid-head {
  background-color: #ccc;
  border-bottom: 1px solid #999;
  padding: 0;
}

.datagrid-head a {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  padding: 5px;
}

.datagrid-head span.datagrid-head-plain {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  padding: 5px;
}

.datagrid-content {
  font-size: 1em;
  border-bottom: 1px solid #999;
  padding: 3px;
}

.datagrid-links {
  display: block;
  float: left;
  background: transparent url(igos/media/detail.png) left center no-repeat;
  width: 20px;
  height: 20px;
  text-decoration: none;
}

.alter-row {
  background: #a1cf2f;
}

.alter-row2 {
  background: #fff;
}

.spacer {
   height: 5px;
}

.block-header {
  font-size: 15px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #999;
  color: #a1cf2f;
}

.container_12 {
  background: #fff url(igos/media/header-bg.png) right top no-repeat;
  border: 1px solid #777;
}

.error {
  border: 1px dotted #f00;
  color: #f00;
  padding: 3px;
  margin: 3px;
}

/* OPAC List */
.detailLink, .xmlDetailLink {
    padding: 1px;
    border: 1px solid #999999;
    text-decoration: none;
    background-color: #CCCCCC;
}

.xmlDetailLink {
    background-color: #FF9900;
}

.xmlResultLink {
    padding: 1px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 12px;
    font-weight: bold;
    background-color: #003380;
    text-decoration: none;
    color: #FFFFFF;
}

.item {
    min-height: 70px;
    text-align: left;
    margin: 5px;
    margin-bottom: 10px;
    padding: 5px;
    padding-top: 1px;
    padding-left: 53px;
    background: url(igos/media/image.png) top left no-repeat;
}

.item a,a:hover {
    font-size: 12px;
    font-weight: bold;
}

.item a:hover {
    text-decoration: none;
    color: #459801;
}

.item .detailLink {
    font-size: 10px;
}

.item .xmlDetailLink {
    font-size: 10px;
    background-color: #FF9900;
}

.subItem {
    margin-top: 3px;
}

.marginTop {
    margin-top: 5px;
}

.tblHead {
  font-weight: bold;
  color: #a1cf2f;
}

.tblHead,.tblContent {
  border-bottom: 1px solid #ccc;
}
