/********************************************/
				/*Little Schools*/
/********************************************/

/* Table of Contents
==================================================
	#Site Styles
	#Page Styles
	#Font-Face */

/* #Add Class Site Styles
================================================== */

.item-container:hover {
	cursor: pointer;
}

.item-container img {
	width: 100%;
	padding-bottom: 6px;}


		
/** Hover options **/

.item-container .options {
	opacity: 0;
	border: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	-moz-transition: opacity 0.15s ease-out;
	-o-transition: opacity 0.15s ease-out;
	-webkit-transition: opacity 0.15s ease-out;
	-ms-transition: opacity 0.15s ease-out;
	transition: opacity 0.15s ease-out;
	background-color: white;
	height: 60px;
	width: 300px;
	z-index: 10;
}
.item-container.optionsActive .options,
.item-container:hover .options {
	opacity: 1;
}
body.iPad .item-container.optionsActive .options,
body.iPad .item-container:hover .options {
	opacity: 0;
}
html.no-opacity .item-container .options {
	display: none;
}
html.no-opacity .item-container.optionsActive .options,
html.no-opacity .item-container:hover .options {
	display: block;
}

.item-container .options .register, 
.item-container .options .comment, 
.item-container .options .like,
.item-container .options .details {
	cursor: pointer;
	position: absolute;
	top: 0px;
	width: 50px;
	height: 50px;
	-moz-transition: opacity 0.15s ease-out;
	-o-transition: opacity 0.25s ease-out;
	-webkit-transition: opacity 0.25s ease-out;
	-ms-transition: opacity 0.25s ease-out;
	transition: opacity 0.25s ease-out;
}
.item-container .options span,
#lightbox .options span {
	text-align: center;
	width: 100%;
	display: inline-block;
	font-size: 9px;
	color: #6493b4;
	line-height: 9px;
	margin: 2px 0 0 0;
}
#lightbox #tagOptions a {
	float: left; 
	width: 50px;
	height: 50px;
	border-left: 1px solid #dedede;
}
#lightbox #tagOptions a.likeButton {
	border-left: 0px;
	-webkit-border-top-left-radius: 2px;
	border-top-left-radius: 2px;
}
.item-container .options .register,
.item-container .options .comment,
.item-container .options .like {
	border-left: 1px solid #dedede;
	width: 75px;
}
.item-container .options .like { right: 0px; }

.item-container .options .register.active,
.item-container .options .like.active,
.item-container .options .comment.active,
#lightbox #tagOptions a.active {
	background-color: #008ed3;  
	color: #ffffff;
}
.item-container .options .comment { right: 75px; }
.item-container .options .register { right: 150px; }
.item-container .options .details {
	right: auto;
	left: 0;
}
.item-container .options .like:hover span,
.item-container .options .register:hover span,
.item-container .options .details:hover span ,
.item-container .options .comment:hover span,
#lightbox #tagOptions a:hover span {
	color: #6493b4;
}
.item-container .options .like.active span,
.item-container .options .register.active span,
.item-container .options .details.active span,
.item-container .options .comment.active span,
#lightbox #tagOptions a.active span {
	color: #ffffff;
}
.item-container .options .like.loading,
.item-container .options .register.loading,
.item-container .options .comment.loading,
#lightbox #tagOptions a.loading {
	background-image: url('/assets/loader.gif');
	background-repeat: no-repeat;
	background-position: center 10px;
}
.item-container .options .like.loading em,
.item-container .options .register.loading em,
.item-container .options .comment.loading em,
#lightbox #tagOptions a.loading em {
	visibility: hidden;
}
.item-container .options .details { width: 83px; }
.item-container .options a {
	display: block;
	padding-bottom: 8px;
}
.item-container .comments div {
	position: relative;
}
.item-container .comments .comment {
	word-wrap: break-word;
}
.item-container .comments .editComment {
	position: absolute;
	right: 0;
	top: -2px;
	display: none;
	background-color: #ffffff;
}
.item-container .comments div:hover .editComment {
	display: block;
}
.item-container .comments.empty {
 	display: none;
}
.item-container .comments textarea {
	width: 188px;
	height: 50px;
	font-size: 12px;
	line-height: 16px;
	font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
	padding: 4px 4px 5px 5px;
	color: #000000;
	font-style: normal;
	border: 1px solid #ccc;
	margin: 0 0 5px 0;
}
.item-container .comments .formCreateComment {
	padding: 5px 0 5px 18px;
}

.item-container .options em,
#lightbox .options em {
	background: transparent url('../img/ls-layout/option-sprites.png') no-repeat left top;
	width: 30px;
	height: 30px;
	display: block;
	margin: 9px auto 1px auto;
}

.item-container .options .details em { background-position: 0px 0; }

.item-container .options .register em,
#lightbox #tagOptions .registerButton em { background-position: 0px -78px; }

.item-container .options .like em,
#lightbox #tagOptions .likeButton em { background-position:  0px -234px; }

.item-container .options .comment em,
#lightbox #tagOptions .noteButton em { background-position: 0px -156px; }

#lightbox #tagOptions .shareButton em { background-position: -72px 0; }

.item-container .options .like:hover em,
#lightbox #tagOptions .likeButton:hover em { background-position: 0px -271px; }

.item-container .options .details:hover em { background-position: 0px -39px; }

.item-container .options .register:hover em,
#lightbox #tagOptions .registerButton:hover em { background-position: 0px -117px; }

.item-container .options .comment:hover em,
#lightbox #tagOptions .noteButton:hover em { background-position: 0px -195px; }

#lightbox #tagOptions .shareButton:hover em { background-position: -72px -36px; }

.item-container .options .like.active em,
#lightbox #tagOptions .likeButton.active em { background-position: 0px -234px; }

.item-container .options .details.active em { background-position: -18px -18px; }

.item-container .options .register.active em,
#lightbox #tagOptions .registerButton.active em { background-position: -36px -18px; }

.item-container .options .comment.active em,
#lightbox #tagOptions .noteButton.active em { background-position: -54px -18px; }

#lightbox #tagOptions .shareButton.active em { background-position: -72px -18px; }

/*SIGN UP PAGE STYLES
=======================================================*/
.signup-container {
	background: #fafafa;
	margin-top: 20px;
	padding: 20px;}
	
.signup-title{
	font-family: Verdana, arial, sans-serif;
	font-size: 26px;
	color: #6493B4;
	padding: 10px;
	border-bottom: 1px solid #f3f3f3;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 1.3em;
	text-align: left;
	text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.5);
	}
.right-content {
	background: #6493B4;
	width: 400px;
	float: right;
	margin: 97px 50px 0;
	padding: 20px;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
	}
	
.right-content-bottom {
	width: 400px;
	float: right;
	margin: 10px 50px 0;
	padding: 20px;}
	
.right-content-bottom a{
	padding: 30px;
	width: 300px;
}

.facebook-signup a{
	background: url(../img/ls-layout/facebook.png) no-repeat 0 0;
	width: 367px;
	height: 20px;
	display: block;
	
	font: 0/0 a;
    text-shadow: none;
    color: transparent;
	}

.facebook-signup a:hover{
	background-position: 0 -80px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
	margin-left: 3px;
}


/*END SIGN UP PAGE STYLES
=======================================================*/

/*HOVER EFFECT*/


/* #Page Styles
================================================== */


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

.admin_wrapper {
  position: relative;
  padding: 20px 20px 0 20px;
}


/* Infinite Scroll loader */
#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  width: 200px;
  padding: 10px;
  background: #000; 
  opacity: 0.8;
  color: #FFF;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}
/* #END LITTLE SCHOOLS
================================================= */

/* #SCROLLABLE
================================================== */
/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable-box {
		 border: 1px solid #fafafa;
}

.scrollable {

    /* required settings */
    margin-top: 5px;
    position:relative;
    overflow:hidden;
    width: 500px;
    height:80px;
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:480px;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:10px 5px 10px 11px;
    background-color:#fafafa;
    padding:1px;
    border:1px solid #ccc;
    width: 100px;
    height: auto;
    cursor: pointer;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
    border:1px solid #c2ee8f;
    position:relative;
    cursor:default;
}




/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(/img/ls-layout/slideshow-arrows.png) no-repeat;
    display:block;
    width: 23px;
    height:56px;
    float:left;
    margin:20px 10px;
    cursor:pointer;
    font-size:1px;
}

/* right */
a.right { background-position: -23px 0; clear:right; margin-right: 0px;}
a.right:hover { background-position:-69px 0; }
a.right:active { background-position:-69px 0; }


/* left */
a.left { margin-left: 0px; }
a.left:hover  { background-position:-46px 0; }
a.left:active { background-position:-46px 0; }

/* up and down */
a.up, a.down  {
    background:url(/media/img/scrollable/arrow/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}


/*@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#container {
		width: 100%;
		margin:  0 auto;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#container {
		width: 800px;
		margin:  0 auto;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#container {
		width: 700px;
		margin:  0 auto;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#container {
		width: 90%;
		margin:  0 auto;
	}
}
 
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
	#container {
		width: 90%;
		margin:  0 auto;
	}
}*/