body
 {line-height: normal

 }




a.unreleased-catalog-item {
  color: grey;
  position: relative;
  text-decoration: none;
/*
  border-bottom: 1px blue dotted;
  */
}

/* thanks to https://stackoverflow.com/questions/14329491/how-to-reduce-the-gap-in-dotted-underline-link  */
a.unreleased-catalog-item::after {
  border-bottom: 2px dotted blue;
  bottom: 2px;
  content: '';
  height: 0;
  left: 0;
  position: absolute;
  right: 0;
}




/* For Books page ... */
span.book-page {
 width: 170px;
 margin-right: 20px;
}


button.buy-it-now  {
  background: transparent linear-gradient(to bottom, #f7dfa5, #f0c14b) repeat scroll 0% 0%;
  border: 1px solid transparent;
  width: 170px;
  height: 35px;
}

button.out-of-print  {
  background: transparent linear-gradient(to bottom, #AAAAAA, #FFFFFF) repeat scroll 0% 0%;
  border: 1px solid transparent;
  width: 170px;
  height: 35px;
}

div.buy-it-now  {
  background: transparent linear-gradient(to bottom, #f7dfa5, #f0c14b) repeat scroll 0% 0%;
  border: 1px solid transparent;
  width: 170px;
  height: 35px;
  text-align: center;
}

div.out-of-print  {
  background: transparent linear-gradient(to bottom, #AAAAAA, #FFFFFF) repeat scroll 0% 0%;
  border: 1px solid transparent;
  width: 170px;
  height: 35px;
  text-align: center;
}


div.buy-it-now a {
    vertical-align: middle;
    /* text-align: center; */
    padding: 1px 1px 1px 1px;
}






div.catItemView {
    margin-bottom: 10px;
}
/* end of Books page ... */



.hide-desktop{
    display:none !important;
}


/* Footer; generic */
.float-right, .mjswitcher {
  float: right;
}


/* Registration and Profile Forms */

/* These don't work??
.blue-phone-number
{ color:blue;
}
.red-phone-number
{ color:red;
}
*/


/* These work ...
.phone-numberLabel
{ color:orange;
}

.phone-numberValue
{ color:green;
}
*/


  table.registered-users-data th
, table.registered-users-data td {
  /*  font-family: monospace; */
  padding: 0px 3px 0px 3px!important;
  vertical-align:top
}




/* Show "Normal" bullet points within an article body */

.item-page ul
{
  list-style-type:  disc  ;
  margin-bottom: 9px;
  margin-left: 25px;
}

/* Don't show bullets in the software download page, "Description" and "Release" tabs */
.ars-release-1  ul
{
  list-style-type:  none  ;
}



.item-page ul li
{
  line-height: normal     ;
  display:     list-item  ;
}


/* This makes the Login link look like the other menu items (nav, nav-pills, etc.)    */

  /* Make input look like link, from http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link */
  input.logout-link {
       background:none!important;
       border:none;
       padding:0!important;
       font: inherit;
       cursor: pointer;
  }



.header-link, .header-link:visited  , .header-link:hover
{ color:white;
  text-decoration: none:
  border: none;
}

.display-none {
    display: none!important
}

.navigation {
    border: none
}


#catalog-secondary-menu  {
  padding-top: 0px;
  padding-bottom: 20px;
}

#catalog_secondary_menu  {
  margin-top: -10px;
  padding-top: 0px;
  padding-bottom: 20px;
}

span.hide-unlock {display:none}

  div.sclogin, div.logout-buttonxxx
  {
  	margin-left: 0;

  	/*  margin-bottom: 18px; */

  	list-style: none;
  }



  div.sclogin  > a, input.logout-link
  {
  	display: block;
  }

  input.logout-link
  {
    color: #fff;
  }



  /* This is because the SCLogin form was chopping off the "Forgot Password" link */
  #login-modal form {
    margin-bottom: 40px;
  }



  div.sclogin  > a:hover,
  div.sclogin  > a:focus,
  input.logout-link:hover,
  input.logout-link:focus
  {
  	text-decoration: none;
  	background-color: #eee!important;
    color:#1F4E79;
  }

  div.sclogin  > a, input.logout-link   {
  	padding-right: 12px!important;
  	padding-left: 12px!important;
  	line-height: 14px;
  }


  div.sclogin  > a, input.logout-link   {
  	margin-top: 2px;
  	margin-bottom: 2px;
  	-webkit-border-radius: 5px!important;
  	-moz-border-radius: 5px!important;
  	border-radius: 5px!important;
  }


  div.sclogin  > a
  {
  	padding-top: 8px!important;
  	padding-bottom: 8px!important;
    /* This is to get "Log in" to line up with "Log out" */
  	margin-right: 16px;

/*   color: #FFF; */

  }

  input.logout-link   {
  	padding-top: 8px!important;
  	padding-bottom: 8px!important;
  	margin-right: 2px;
  }


  div.sclogin > .active > a,
  div.sclogin > .active > a:hover,
  div.sclogin > .active > a:focus

   {
  	color: #fff;
  	background-color: #08c;
  }


/* End of login/logout */


/* Remove "back to top" link */

.itemBackToTop , #back-top {
display: none!important;
}




/* Overall font */
body {
	margin: 0;
	font-family: "segoe ui", "Verdana","Helvetica Neue",  Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: inherit;
	/*line-height: 16px; */
	color: #333;
	background-color: #fff;
  padding: 10px 20px 10px 20px;
}
.site-title {
	font-size: 24px;
	/* line-height: 36px; */
	font-weight: bold;
}

/* This hides the little triangle at top of pull-down menus  */
  .navigation .nav-child:before
, .navigation .nav-child:after
 {
  display:none;
}

/* This scoots pull-down menus to the left and adds background color */

.navigation .nav-child {
 /*STEFAN left: -160px; **************************************************************************/
  background: lightblue;
}

.big-button {
 width:20%;
 font-size: 101%;
 min-height:70px;
 color:white;
 padding: 20px 5px 20px 5px;
 background: lightblue;
 margin-top: 10px;
 }

.light-blue-button {
background-color: #5B9BD5;
border: 1px solid transparent;
border-radius: 7px;
box-shadow: 0px 0px 10px 2px #888;

/* diagonal gradient  - see http://www.w3schools.com/css/css3_gradients.asp */

  background: -webkit-linear-gradient( left top, #5B9BD5 , #000060 ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(  bottom right, #5B9BD5 , #000060 ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #5B9BD5 , #000060 ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(  to bottom right, #5B9BD5 , #000060 ); /* Standard syntax */

}

.light-grey-button {
color:  white;
background-color: lightgrey;
border: 1px solid transparent;
border-radius: 7px;
box-shadow: 0px 0px 10px 2px #888;

/* diagonal gradient  - see http://www.w3schools.com/css/css3_gradients.asp */

  background: -webkit-linear-gradient( left top, lightgrey, #000010 ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(  bottom right, lightgrey, #000010 ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, lightgrey, #000010 ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(  to bottom right, lightgrey, #000010 ); /* Standard syntax */

}


.btn-primary {
  padding: 4px 12px 4px 12px;
}

.light-pink-button {
color:  white;
background-color: lightpink;
border: 1px solid transparent;
border-radius: 7px;
box-shadow: 0px 0px 10px 2px #888;

/* diagonal gradient  - see http://www.w3schools.com/css/css3_gradients.asp */

  background: -webkit-linear-gradient( left top, #000010, lightpink ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(  bottom right, #000010, lightpink ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #000010, lightpink ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(  to bottom right, #000010, lightpink ); /* Standard syntax */

}

a.light-pink-button {
  text-decoration: none;
 }
a.light-pink-button:visited {
  color:white;
 }




.beige-button {
color:  white;
background-color: tan;
border: 1px solid transparent;
border-radius: 7px;
box-shadow: 0px 0px 10px 2px #888;

/* diagonal gradient  - see http://www.w3schools.com/css/css3_gradients.asp */

  background: -webkit-linear-gradient( left top, #000010, tan ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(  bottom right, #000010, tan ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #000010, tan ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(  to bottom right, #000010, tan ); /* Standard syntax */

}

a.beige-button {
  text-decoration: none;
 }
a.beige-button:visited {
  color:white;
 }




/* This is for buttons within the right panel
doesn't work anymore because we are using "none" instead of "well"?
*/
.well .big-button {
 width:80%;
}

.big-button.windows {
    border: 1px none transparent;
    border-radius: 7px;
    font-weight: bold;
  box-shadow: 0px 0px 10px 2px #888;
 width:75%;
}

.big-button.msdos {
    border: 1px transparent;
    border-radius: 7px;
    font-weight: bold;
  box-shadow: 0px 0px 10px 2px #888;
 width:75%;
}

button.red {
background: #F37825;
color: #FFF;
font-size: 100%;
font-weight: bold;
border: 1px transparent;
border-radius: 7px;
  box-shadow: 0px 0px 10px 2px #888;


/* diagonal gradient  - see http://www.w3schools.com/css/css3_gradients.asp */

  background: -webkit-linear-gradient( left top, #F37825 , #A06010 ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(  bottom right, #F37825 , #A06010 ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #F37825 , #A06010 ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(  to bottom right, #F37825 , #A06010 ); /* Standard syntax */


}



button.lightblue {
    background-color: #8FAADC;

/* diagonal gradient  - see http://www.w3schools.com/css/css3_gradients.asp */

  background: -webkit-linear-gradient( left top, #99BBEE , #7799DD ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(  bottom right, #99BBEE , #7799DD ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #99BBEE , #7799DD ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(  to bottom right, #99BBEE , #7799DD ); /* Standard syntax */

}



.font12

{
  font-size: 12px
}

button.green {
    background-color: #71B345;

/* diagonal gradient  - see http://www.w3schools.com/css/css3_gradients.asp */

  background: -webkit-linear-gradient( left top, #88DD55 , #77BB33 ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(  bottom right, #88DD55 , #77BB33 ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #88DD55 , #77BB33 ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(  to bottom right, #88DD55 , #77BB33 ); /* Standard syntax */

}

button.red {
background: #F37825;
color: #FFF;
font-size: 100%;
font-weight: bold;
border: 1px transparent;
border-radius: 7px;
  box-shadow: 0px 0px 10px 2px #888;


/* diagonal gradient  - see http://www.w3schools.com/css/css3_gradients.asp */

  background: -webkit-linear-gradient( left top, #F39845 , #A06010 ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(  bottom right, #F39845 , #A06010 ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #F39845 , #A06010 ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(  to bottom right, #F39845 , #A06010 ); /* Standard syntax */


}




/*
span.itemEditLink {float:right;display:block;padding:4px 0;margin:0;width:120px;text-align:right;}
span.itemEditLink a {padding:2px 12px;border:1px solid #ccc;background:#eee;text-decoration:none;font-size:11px;font-weight:normal;font-family:Arial, Helvetica, sans-serif;}
span.itemEditLink a:hover {background:#ffffcc;}

span.catItemEditLink {float:right;display:block;padding:4px 0;margin:0;width:120px;text-align:right;}
span.catItemEditLink a {padding:2px 12px;border:1px solid #ccc;background:#eee;text-decoration:none;font-size:11px;font-weight:normal;font-family:Arial, Helvetica, sans-serif;}
span.catItemEditLink a:hover {background:#ffffcc;}


  span.userItemEditLink {float:right;display:block;padding:4px 0;margin:0;width:120px;text-align:right;}
	span.userItemEditLink a {padding:2px 12px;border:1px solid #ccc;background:#eee;text-decoration:none;font-size:11px;font-weight:normal;font-family:Arial, Helvetica, sans-serif;}
	span.userItemEditLink a:hover {background:#ffffcc;}
*/




/*
div.itemHeader  {position: absolute!important;}
span.itemEditLink
  {width: 60px;}

div.itemHeader  span.itemEditLink  {position: absolute!important;}

  */

div.itemHeader  span.itemEditLink
  {width: 60px;}


/* These are to override things in k2.css  */

div.itemIntroText {
    font-weight: normal;
    font-size: inherit;
}


div.itemHeader h2.itemTitle {
  	font-family: inherit;
    font-size: 24px;
}



div.catItemImageBlock {
    padding-bottom: 0px;
    margin-bottom: 0px ;
    float:left;
}


div.catItemBody {
    padding-bottom: 0px;
}

ul.pagination-list li
    {
    margin-right:3px;
    }


/* These are new K2 things, modeled after existing things in k2.css  */

div.itemPublisherFields {
  margin:16px 0 0 0;
  padding:8px 0 0 0;
  /*
  border-top:1px dotted #ddd;
    */
  }
	div.itemPublisherFields h3 {margin:0;padding:0 0 8px 0;line-height:normal !important;}
	div.itemPublisherFields ul {margin:0;padding:0;list-style:none;}
	div.itemPublisherFields ul li {display:block;}
	div.itemPublisherFields ul li span.itemPublisherFieldsLabel {display:block;float:left;font-weight:bold;margin:0 4px 0 0;width:20%;}
	div.itemPublisherFields ul li span.itemPublisherFieldsValue {
     display:inline-block;
     width: 70%;
	}


  .itemPublisherFieldsLabel {
   text-align: right;
   padding-right: 10px;
  }


/* "Additional Info" extra fields */
/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

div.itemExtraFieldsLabel {
    display: block;
    float: left;
    font-weight: bold;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    border: none;
}

div.itemExtraFieldsValue {
    display: block;
    float: left;
    width: 60%;
    text-align: lef;
    border: none;
}





/* Expando styling */
a.expando-link {
  text-decoration:none;
  display:inline;
  /*
  font-size:16; font-family: 'Helvetica',Arial ; color:black;
  */
  /* border:1px solid;*/
}
   /*  See templates\protostar\html\com_k2\biblio_items\item.php
	  // Expando divs are below.  TBD: Instead of doing it this way, use jQuery and put the background images in the link itself.
    // http://stackoverflow.com/questions/10867503/change-background-image-in-body
    // http://stackoverflow.com/questions/21496905/how-to-change-the-background-image-of-div-using-javascript
     */

span.img_down {
  background-image: url(/templates/catalog/images/down_wedge.png);
  background-size: contain;
  background-repeat: no-repeat;
  padding-left:40px ;
  margin-right:10px ;
}

span.img_up {
  background-image: url(/templates/catalog/images/up_wedge.png) ;
  background-size: contain;
  background-repeat: no-repeat;
  padding-left:40px ;
  margin-right:10px ;
  display:none ;
}



li.typeTextfield {
  line-height:normal
}



/*
Fit image to available space
max-width:100%;
max-height:100%;
  */






/*

These have to go into \media\k2\assets\css\k2.frontend.css instead of here!

#k2FrontendPermissionsNotice p {display:none}


#k2FrontendEditToolbar h2.icon-48-k2 {
   background: none
}

 */

/*****************************************************/
/***********************STEFAN************************/
.navigation .nav-pills {
  padding-left: 60px;
}
.item-101 {
    font-size: 30px;
}

.item-134,.item-135,.item-136,.item-137,.item-133,.item-2291,.item-2292,.item-190,.item-2384,.item-190.divider{
  font-size:12px;
  color:white;
}

#nav-john-warfield-logo {
    position: absolute;
    padding: 6px;
}

#nav-mason-logo {
    position: absolute;
    width: 35px;
    right: 750px;
    padding-top: 5px;
}

.nav-pills > li > a {
    color: #FFF;
}


.nav > li > a:hover, .nav > li > a:focus {
    color:#1F4E79;
}

div.sclogin > a:hover {

    color: #1F4E79;
}


/* Catalog Menu Bar Configuration */
.item-187 {
   margin-left: 435px;
}

.item-187,.item-178,.item-188,.item-189,.item-191,.item-190.divider {font-size: 12px;}

.item-2290 {
    margin: -55px;
    top: 30px;
}

.item-2290:hover {
    margin: -55px;
    top: 30px;
}
/* John N Warfield Navigation Bar - Catalog page*/
.item-2292 {
    margin: -60px 350px;;
    top: 35px;
}

ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;}

/*
NOT SURE WHAT THIS IS FOR - NEEDS TO BE MORE TARGETED SO THAT IT DOESN'T AFFECT "Additional Info" in ITEM LAYOUT
  ul li {float: left;}
  */
  li ul {display: none;}
  ul li a {display: blockpadding: 5px 10px 5px 10px;text-decoration: none;
           /*white-space: nowrap;*/color: #000; text-decoration:none;}
  ul li a:hover {}
  li:hover ul {display: block; position: absolute;z-index:1111;}
  li:hover li {float: none;}
  li:hover a {text-decoration: none;}
  li:hover li a:hover {background: #ADD8E6 none repeat scroll 0% 0%;}

/* These are added to fix SCLogin form */
    /* None of these work:
     fieldset  li ul {display: block!important     }
     fieldset  li ul {position: absolute!important }
    #login-modal > fieldset  li ul {display: block!important     }
    #login-modal > fieldset  li ul {position: absolute!important }
     #sclogin-form115 fieldset li ul {display: block!important     }
     #sclogin-form115 fieldset li ul {position: absolute!important }
     div.sclogin li ul {display: block!important}
     div.sclogin li ul {position: absolute!important}
    */

  /* li ul {display: block}      */           /* if omitted, "Forgot Username" and "Forgot Password" links disappear when mouse moves outside the form */
  /* li ul {position: absolute}  */           /* if omitted, form resizes when mouse moves outside the form */
  div.sclogin li { line-height: 23px; }  /* if omitted, "Forgot Username" and "Forgot Password" links default to 18px and look scrunched */

  /* These have to go back in (from about 25 lines above) for the "Logut" flyout menu, or it will be visible all the time */

/*
  .scuser-menu li ul.flat-list {display: none;}

  .scuser-menu li:hover ul.flat-list  {display: block; position: absolute;z-index:1111;}

  .scuser-menu li:hover ul.flat-list li a {display: blockpadding: 5px 10px 5px 10px;text-decoration: none;
                                           / * white-space: nowrap; * /
                                           color: #000; text-decoration:none;}

  .scuser-menu li:hover ul.flat-list li a:hover {}

  .scuser-menu li:hover li {float: none;}
  .scuser-menu li:hover a {text-decoration: none;}
  .scuser-menu li:hover li a:hover {background: #ADD8E6 none repeat scroll 0% 0%;}
 */


.flat-list {
    background: #ADD8E6 none repeat scroll 0% 0%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 15px;
}

ul.flat-list li a:hover{
background-color: #0081C2;
background-image: linear-gradient(to bottom, #08C, #0077B3);
color: #FFF;
margin-left: -15px;
margin-right: -16px;
padding: 4px 16px 4px 15px;
}



/*
 For the Software Download buttons

div.nobox {
  border:none
  border-radius:none
  box-shadow:none
}

 */

div.big-button-div {
 text-align:center;
 padding-top: 30px;
 padding-bottom: 30px;
}


div.catItemHeader h3.catItemTitle {
	font-family: "segoe ui", "Verdana","Helvetica Neue",  Helvetica, Arial, sans-serif;
}

.even {   line-height: 30px;}
.odd{ line-height: 30px;}/* font-size: 24px;*/
.moduleItemIntrotext {font-size: 18px;}

#book-image {
    padding-right: 10px;
}

.moduleItemTitle {
    white-space: normal;
    color: #08C;
}

.moduleItemImage {
    float: left;
    border: 1px solid #000;
    margin: 5px;
}

li.current {
    background-color: #a6bfe8;
    font-weight: bold;
    padding-bottom: 8px;
    margin-bottom: 8px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

li.current a {
    color: #DDDDDD
}


.jp-current {
    color: red;
    font-weight: bold;
}


/*  This doesn't work becacuse the images themselves need to be smaller
.stButton .stLarge {
    height: 28px!important;
    width: 28px!important;
}
*/


div.well_narrow {
  	padding: 10px;
    text-align: center;
}




.searchbtn {
    display: inline-block;
    *display: inline;
    padding: 4px 12px;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: 14px;
    line-height: 20px;
    *line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    *background-color: #e6e6e6;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #bbbbbb;
    *border: 0;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    *zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Pagination for the following page: http://jnw.warfieldconsulting.com/catalog.html */

div#holder126 a{
display: inline-block;
padding: 4px 8px;
margin: 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
vertical-align: middle;
background: #fff;
text-decoration: none;
color: black;
cursor: pointer;
}

.jp-previous:before
{
	content: "\7c";
}

.jp-next:before
{
	content: "\7b";
}

[class^="jp-"]::before, [class*=" jp-"]::before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}

#jnw-menu {
    padding-left: 60px;
    background-color: #5B9BD5;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
}


@media screen and (min-width: 750px){#main-menu-wrapper  {    border: 3px solid #3F6E98;}}
@media screen and (min-width: 749px){.graphite.demo-container {    display: none;}}
@media screen and (min-width: 480px) and (max-width: 767px){}
/*
@media screen and (max-width: 979px){#main-menu-holder  {    display:none;}}
  */
@media screen and (max-width: 979px) {#nav-john-warfield-logo-new { display:none; }}



div .itemIsHidden {
 background-color: #FAFAFA ;
 opacity: 0.4;
 filter: alpha(opacity = 40); /* MSIE */
}

span .hide-notes {
 color: RED;          !important
 text-align: center ; !important
}





span.itemUnlockLink
    {float:right
    ;display:block
    ;padding:4px 0
    ;margin:0
    ;width:120px
    ;text-align:right
    ;}
span.itemUnlockLink a {padding:2px 12px;
border:1px solid #ccc;
background:#eee;
text-decoration:none;
font-size:11px;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
}


span.itemUnlockLink a
	 {display:inline-block;padding:4px 8px;margin:0;background:#dd2d96;color:#fff;border:0;border-radius:4px;font-size:11px;line-height:100%;font-weight:bold;text-align:center;text-decoration:none;}
	span.itemUnlockLink a:hover
	{background:#bb217d;}



span.itemUnlockLink
  {width: 60px;}





/* "popup" divs */
.popup-div {
  border:1px solid #004f5a;
  position:absolute;
  border-radius: 10px;
  display:none;
}


#popup_Container {
       z-index:20;
       left:310px;
       top:130px;
       width:300px;
       height: 200px;
       background-color:#aae3eb;
}


.popup-titlebar {
  padding-bottom:25px;
  border-bottom:1px solid #00005a;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  }

#popup_Container          .popup-titlebar {   width:300px;     background-color:#aaaaaa;   }



.popup-title {
  position:absolute;
  top:1px;
  left:5px;
  font-size:12px;
  font-weight:bold;
  color:#FFFFFF;
  }

.popup-X {
  position:absolute;
  top:0px;
  right:0px;
  background-color:#FFFFFF;
  font-weight:bold;
  font-size:14px;
  font-family: Arial;
  color:#FF0000;
  float:right;
  padding-left:2px;
  padding-right:2px;
  padding-top:1px;
  height:24px;
  border-top-right-radius: 10px;
}

.popup-toplink     {
  position:absolute;
  top:1px;
  font-size:12px;
  white-space: nowrap;
  text-align:top;
  }

#popup_Container          .popup-cancel     {   right:52px;    }

.popup-div table {
    vertical-align: top;
    line-height: normal;
    margin: 0px 0px 0px 0px;
    padding: 5px;
  }

.popup-div table th {
  border: 1pt solid blue;
  }
/*
.popup-div table td {
  border: 2pt solid green;
  vertical-align:top;
  }
    */


.popup-div table td.hdg-year      {    width: 100px;        }
.popup-div table td.hdg-circ      {    width: 120px;        }
.popup-div table td.hdg-dist      {    width: 180px;        }
.popup-div table td.hdg-offtype   {    width: 265px;        }
.popup-div table td.hdg-guideline {    width: 100px;        }

/*
.popup-div table td.col-year      {    width: 140px;  border:2pt solid violet;      }
.popup-div table td.col-circ      {    width: 140px;  border:2pt solid violet;       }
.popup-div table td.col-dist      {    width: 180px;  border:2pt solid violet;       }
.popup-div table td.col-offtype   {    width: 260px;  border:2pt solid violet;       }
.popup-div table td.col-guideline {    width: 180px;  border:2pt solid violet;       }
    */

.popup-div table td div { text-align: left;       }


.popup-scroller {
  overflow:auto;
  border-top: 1pt solid grey;
}






.iconbar {
  padding-top: 5px;

}


/*
 https://stackoverflow.com/questions/14971697/css-mouse-hover-change-image-position-and-size
*/


.iconbar-icon {
  padding: 10px 10px 10px 5px ;
    width: 40px;
    position: relative;
    opacity: 0.8;
    transition: 0.3s ease;
    cursor: pointer;
    border:  3pt solid red;
    border:none;
}

.iconbar-enabled:hover {
     /* default is 1, scale it to 1.5 */
    transform: scale(1.2, 1.2);
    opacity: 1;
}



/*
  https://www.w3schools.com/css/css_navbar.asp
*/

.iconbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.iconbar li {
    float: left;
}

.iconbar li a {
    text-align: center;
  /*
    padding: 14px 16px;
    */
    text-decoration: none;
}



  td.contact-form-data
, th.contact-form-data
{
 padding: 2px;
}


footer
{
color: darkblue  !important
}



img.main-menu-item
 {
 float:right;
 padding-left: 10px;
 width:40% ;
}



table.main-menu-item
 {
 /*
 padding-left: 10px;
 float:right;
 width:40% ;
   */
 width:100% ;
 padding-left:  20px;
 padding-right: 20px;
}


table.main-menu-item   img
 {
 /*
 padding-left: 15px;
   */
 width:85% ;
 display: block;
 margin-left: auto;
 margin-right: auto;
}



div.body
, div.container
 {
  	background-color: #CCC!important;

 }