/**************************************************
                 CCEL Home Page
 **************************************************/

.grid-box h2
{
	display: inline-block;
}

.caption
{
	display: inline-block;
	padding: 0em 1em 0em 1em;
}

hr
{
	margin-top: -0.5em;
	display: block;
}

#fatness
{
	/* Force the page to be wide enough for the library image */
	min-width: 1196px;
}

#content
{
	overflow: hidden;
	/* Line up the library image with the navbar */
	padding: 0;
}

#nav-top .searchbox-wrapper,
#searchboxDiv
{
	display: none;	
}

#nav-top #user-greeting
{
	margin-left: 290px;
}

/* Alter the searchbox (for the home page only) */
#librarySearchbox .searchbox,
#searchboxDiv .searchbox
{
	position: absolute;
	font-size: 16px;
	width: 32.55%;
	height: 28px;
}
#librarySearchbox input.searchbox,
#searchboxDiv input.searchbox
{
	/* don't allow the text to approach the icon */
	padding: 1px 25px 1px 4px;
}
#librarySearchbox .searchicon,
#searchboxDiv .searchicon
{
	position: absolute;
	top: 5px;
	left: 30.3%;
	width: 20px;
	height: 20px;
}
.searchicon img
{
	width: 100%; 
	height: auto;
}
#librarySearchbox .searchbox-wrapper
{
	position: relative;
	top: 27px;
	left: 61.36%;
}

/* Reduce the distance between the top of the page and the library entrance */
.node .content,
.node
{
	margin-bottom: 0pt;
}

#library-entrance
{
	width: 843px;         
	height: 236px;
	margin-top: -6px;
	background: no-repeat black url("img/shortLibrary.png");
	color: white; /* must be kept in sync with style.css:.landingpage-quip */
}
a#searchExamplesLink,
a#searchExamplesLink:link,
a#searchExamplesLink:visited
{
	color: #880000;
	font-style: normal;
	
}
a#searchExamplesLink:hover
{
	text-decoration: underline;
	color: #ab4c4c;
}

#greeting
{
	width: 843px;
	padding-right: 10%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#greeting h1,
.h3
{
	/* Must be kept in sync with style.css:.landingpage-title */
	color: #587436;
	font-weight: bold;
}

#greeting h1
{
	font-family: Georgia;
	font-size: 2.4rem;
}

#greeting .ccel-mission
{
	font-family: Arial;
	font-size: 0.85rem;
	color: #83786f;
}

#greeting *
{
	margin-top: 4px;
	margin-bottom: 4px;
}

#examples-link-wrapper
{
	position: relative;
	top: 61px;
	left: 62%;
	width: 235px;
}

#examples-link
{
	height: 0px;
	width: 0px;
	color: white;
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 16px;
	cursor: pointer;
	/* Prevent text highlighting */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.toolTipContainer {
	display: none;
	position: relative;
	top: 4px;
	width: 235px;
}
.toolTipTriangle {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 5px  5px 5px;
	border-color: transparent transparent #83786f transparent;
	margin-bottom: 0px;
	margin-left: 5px;
}
.toolTip {
	margin-top: 0px;
	background-color: #83786f;
	color: #EEEEEE;
	width: auto;
	text-align: left;
	padding: 4px 15px 8px 15px;
	border-style: solid;
	border-width: 0px;
	font-family: Georgia;
	font-size: 0.85rem;
}
#exampleToolTip span
{
	font-family: Arial;
}

/* Hide container2 until screen width is below 769,
   and hide top until the screen width is below 611 */
#container2,
#top
{
	display: none;
}

#grid-box-wrapper
{
	width: 100%;
	max-width: none;
}

#info-boxes-wrapper
{
	max-width: none;
}

.grid-box
{
	text-align: left;
	margin: 2px;		    /* Border size must be the same as the margin size */
	padding: 2px 15px 2px 0px;
	font-family: Georgia;
	font-size: 0.85rem;
}

.grid-box h2
{
	font-family: Arial;
	font-size: 1.65rem;
	font-weight: normal;
	color: #587436;
	margin-bottom: 4px;
}

.grid-box ul
{
	text-align: left;
	padding: 0px;
}

.grid-box a.box-link
{
	display: block;
}
.grid-box a.box-link:hover
{
	background: #d9c756;
}

.grid-box a:hover
{
	text-decoration: underline;
	color: rgb(204, 68, 68);
}

.grid-box p
{
	margin: 0px;
}

/**
 * give room between book covers for 
 * most popular ebooks and top 3 books
 */
.grid-box ul.topThree,
.grid-box ul.ebooks
{	
	padding: 0.5em;
	width: auto;
}
.grid-box ul.topThree img,
.grid-box ul.ebooks img
{
	padding: 0.5em;
}

.grid-box .item-list ul li
{
	margin: 0px 0px 0.25em 1em;
}

#whatsnew p
{
	border-top: 2px solid #83786f;
	padding: 5px 0px;
}

#whatsnew p:first-of-type
{
	border-top: 0;
}

#whatsnew ul
{
	padding-left: 8%;
}

#more-wikibook
{
	margin-top: -30px;
}

.returnToTop
{
	display: none;
}

.info-table
{
	width: 100%;
	border-collapse: separate;
	border-spacing: 8px;
	margin: 4px;
}

.info-table td
{
	width: 50%;
}

.tracking_page_row
{
	height: 135px !important;
	margin: auto;
}

li.tracking_page_row
{
	width: 100%;
	vertical-align: top;
}

@media only screen and (min-width: 2000px)/*here is good for everything but the descendent of #grid-box-6*/
{
	.original-break
	{
		display: none;
	}

	#grid-box-6 .responsive-break
	{
		display: block;
	}
}

@media only screen and (max-width: 1999px)/*here is good for everything but the descendent of #grid-box-6*/
{
	.original-break
	{
		display: none;
	}

	.responsive-break
	{
		display: block;
	}

	#grid-box-6 .original-break
	{
		display: block;
	}

	#grid-box-6 .responsive-break
	{
		display: none;
	}

	span.caption
	{
		margin-bottom: 0em;
	}
}

@media only screen and (max-width: 1400px)
{
	.original-break
	{
		display: block;
	}

	.responsive-break
	{
		display: none;
	}

	span.caption
	{
		margin-bottom: 0.5em;
	}
}

/* center the library entrance and greeting paragraph for wide browsers */
@media only screen and (min-width: 1300px)
{
	#library-entrance
	{
		margin: 0 auto;
	}
	#greeting
	{
		margin: 0 auto;
	}
}



/************************************************************** 

  Media queries for scaling to smaller browser screen widths.
  
  The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag
  takes pixel density into account, so a device with true resolution of 640px 
  width and 2.0 pixel density will have a browser viewport width of 320px.
  
***************************************************************/
@media only screen and (min-width: 769px) and (max-width: 960px), 
only screen and (max-device-width : 1024px)
{
	div#sidebar-right.sidebar {
		display: none;
	}
	
	#fatness {
		/* Allow the library image to scale. */
		min-width: 650px;
	}

	#nav-top #user-greeting
	{
		margin-left: 0px;
	}

	#container {
		width: 100%;
		height: auto;
		position: relative;
		display: inline-block;
	}
	#stretchy-wrapper {
		padding-top: 27.99525504151839%; /* 843:236 aspect ratio */
	}
	#library-entrance {
		height: auto;
		width: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin-top: 0;
		color: white; /* must be kept in sync with style.css:.landingpage-quip */
		background-size: contain;
	}
	
	#examples-link-wrapper
	{
		top: 56px;
		left: 61.7%;
	}
	
	#librarySearchbox .searchbox-wrapper,
	#searchboxDiv .searchbox-wrapper
	{
		position: static;
		top: 0px;
		left: 0px;
	}
	
	#librarySearchbox .searchbox,
	#searchboxDiv .searchbox
	{
		width: 31.95%;
		position: absolute;
		top: 28px;
		left: 60.96014%;	
	}
	#librarySearchbox input.searchbox,
	#searchboxDiv input.searchbox
	{
		padding-right: 27px;
	}
	#librarySearchbox .searchicon,
	#searchboxDiv .searchicon
	{
		position: absolute;
		top: 33px;
		left: 90.1%;
	}
	
	#greeting
	{
		width: auto;
	}
}




/************************************************************** 

  This media query is specifically for iPad and other tablets 
  with a max width of 1024px.  It does not affect desktop browsers,
  unless the screen resolution has a width of 1024px which is
  pretty unusual these days.
 
***************************************************************/

@media only screen and (max-width: 769px)
{	
	#fatness
	{
		/* allow the page to scale.  */
		min-width: 250px;
		padding: 0px;
	}
	#content
	{
		padding: 10px 30px;
	}

	/* add space between link items, especially for links */
	#content li
	{
		padding-top: .5em;
		font-size: 1.1rem;
		
	}
	
	#nav-top #user-greeting
	{
		margin-left: 0px;
	}
	
	/* hide various things, including the right sidebar */
	div#sidebar-right.sidebar,
	#container,
	#info-boxes-wrapper
	{
		display: none;
	}
	
	#greeting
	{
		width: auto;
	}
	
	#searchboxDiv,
	#searchboxDiv input.searchbox 
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#searchboxDiv
	{
		display: block;
		margin-top: 12px;
	}
	
	#searchboxDiv .searchbox-wrapper
	{
		top: 0px;
		position: relative;
	}
	
	#searchboxDiv input.searchbox  
	{
		position: static;
		width: 350px;
		border: 2px solid #d4d0cd;
		height: 34px;
	}
	#searchboxDiv .searchicon
	{
		top: -27px;
		left: 328px;
		position: relative;
	}
	
	.row
	{
		margin: 0 !important;	
	}
	
	.grid-box
	{
		padding: 0px;
	}
	
	#grid-box-1
	{
		margin-top:  0px;	
	}

	li.tracking_page_row
	{
		width: 50%;
	}
	
	.returnToTop
	{
		margin: 3.9% 0 0 0;
		padding-bottom: 7px;
		text-align: center;
		color: #ffffff;
		background: #a8a09a;
		cursor: pointer;
		display: block;
		max-width: 92%;
	}

	.arrow 
	{
		height: 0;
		width: 0;
		border: 4px solid transparent;
		margin: 0px auto;
	}
	
	.arrow.up 
	{
		border-bottom-color: #83786f;
	}

	.original-break,
	#grid-box-6 .original-break
	{
		display: none;
	}

	.responsive-break,
	#grid-box-6 .responsive-break
	{
		display: block;
	}
}

@media only screen and (max-width: 685px) {
	#greeting
	{
		padding: 0;
	}
}

@media only screen and (max-width: 618px) {

	#greeting
	{
		display: none;
	}

	.returnToTop
	{
		padding-bottom: 2px;
	}
}

@media only screen and (max-width: 520px)
{
	#grid-box-6 .original-break
	{
		display: block;
	}

	#grid-box-6 .responsive-break
	{
		display: none;
	}
}

@media only screen and (max-width: 498px)
{
	/* Make the wikibook list becomes one column */
	li.tracking_page_row {
		width: 100%;
		height: 110px !important;
	}
	
	#more-wikibook
	{
		margin-top: -10px;
	}
}

@media only screen and (max-width: 440px)
{		
	#searchboxDiv .searchbox-wrapper,
	#searchboxDiv .searchbox
	{
		position: relative;
		top: 0px;
		left: 0px;
	}
	
	#searchboxDiv input.searchbox
	{
		min-width: 0px;
		max-width: 384px;
		width: 100%;
		padding-right: 23px;
	}
	
	#searchboxDiv .searchicon
	{
		position: absolute;
		top: 7px;
		left: 93.5%;
	}
	
	.row,
	.returnToTop
	{
		max-width: none !important;
	}
}

@media only screen and (max-width: 380px)
{
	#searchboxDiv .searchicon
	{
		left: 92%;
	}

	.original-break
	{
		display: block;
	}

	.responsive-break
	{
		display: none;
	}
}

@media only screen and (max-width: 325px)
{
	#searchboxDiv .searchicon
	{
		left: 90.4%;
	}
}

/* Media Queries for the navbar */

@media only screen and (max-width: 920px)
{
	#banner-site-name
	{
		width: 430px;
		height: auto;
	}
}

@media only screen and (max-width: 769px)
{
	#banner-left
	{
		margin-left: 25px;
	}
}

@media only screen and (max-width: 654px)
{
	#banner-calvin,
	div#nav-top #user-greeting .picture
	{
		display: none;
	}
}

@media only screen and (max-width: 618px)
{
	#nav-top #menu-link-STORE
	{
		display: none;	
	}
}

@media only screen and (max-width: 585px)
{
	/* Make the nav bar shorter */
	#banner-nav,
	#banner-nav-right
	{
		height:	112px;
	}
	
	#banner-nav-right
	{
		background-size: auto 94px;
	} 
	
	#banner
	{
		padding: 20px 0px 0px 0px;
		height: 58px;
	}
	#banner-left
	{
		height: auto;
	}
	
	#banner-site-name
	{
		width: 330px;
	}
	
	#banner-tagline
	{
		font-size: 0.85rem;
	}
}

@media only screen and (max-width: 514px)
{
	#nav-top #menu-link-COMMUNITY
	{
		display: none;	
	}
}

@media only screen and (max-width: 404px)
{
	#banner
	{
		height: 58px;
	}
	#banner-left
	{
		height: auto;
	}
	
	#banner-site-name
	{
		width: 260px;
	}
	
	#banner-tagline
	{
		margin-top: -3px;
	}
	
	#nav-top #user-greeting
	{
		display: none;
	}

	#banner-site-name
	{
		width: 222px;
	}
	#banner-tagline
	{
		margin-top: 0px;
	}
}	

@media only screen and (max-width: 305px)
{
	#nav-top #menu-link-BROWSE
	{
		display: none;	
	}
}



/*  CSS FOR A RESPONSIVE GRID */

.row {
	clear: both;
	max-width: 92%;
	margin: 0 auto;
}
.row:after {
	content:"";
	display:table;
	clear:both;
}
.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
	float: left;
	width: 100%;
	border-collapse:collapse;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	word-break: break-word;
	margin: 4% 0 0;
}
.wrapper .row .col_1,
.wrapper .row .col_2,
.wrapper .row .col_3,
.wrapper .row .col_4,
.wrapper .row .col_5,
.wrapper .row .col_6,
.wrapper .row .col_7,
.wrapper .row .col_8,
.wrapper .row .col_9,
.wrapper .row .col_10,
.wrapper .row .col_11,
.wrapper .row .col_12 {
	padding: 20px;
}
.no_padding,
.row.no_padding .col_1,
.row.no_padding .col_2,
.row.no_padding .col_3,
.row.no_padding .col_4,
.row.no_padding .col_5,
.row.no_padding .col_6,
.row.no_padding .col_7,
.row.no_padding .col_8,
.row.no_padding .col_9,
.row.no_padding .col_10,
.row.no_padding .col_11,
.row.no_padding .col_12 {
	padding: 0 !important;
}

@media all and (min-width : 769px) {
	.wrapper {
		width: 100%;
		padding: 1% 0;
		margin: 2% 0 0;
	}
	.row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		clear: both;
		margin: 0 auto;
		max-width: 100%;
		padding: 2.4911% 0 0;
	}
	.wrapper .row {
		padding: 1% 0;	
	}
	.row:after {
		content:"";
		display:table;
		clear:both;
	}
	.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
		margin: 0 2.4911% 0 0;
		float: left;
		word-break: break-word;
		position: relative;
	}
	
	.col_1 { width: 6.5%; }
	.col_2 { width: 15%; }
	.col_3 { width: 23.5%; }
	.col_4 { width: 31.6726%; }
	.col_5 { width: 40.5%; }
	.col_6 { width: 49%; }
	.col_7 { width: 57.5%; }
	.col_8 { width: 66%; }
	.col_9 { width: 74.5%; }
	.col_10 { width: 83%; }
	.col_11 { width: 91.5%; }
	.col_12 { width: 100%; margin: 0; }
	
	.last {
		margin: 0;
	}
}


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	text-align: center;
}

/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}