/* =============================================================================
   Primary Styles for Desktops and Laptops
   Author: Zarina N. Docken
   Last updage: August, 2012
   ========================================================================== */

/* ===========================================================================*
 	COMMON ELEMENTS (buttons, links, etc)
   ========================================================================== */

.loader {
	position: absolute;
	background: white;
	height: 5000px;
	top: 0px;
	left:0px;
	display: block;
	z-index: 5000;}

.loader-home img, .loader img{
	position: fixed;
	top: 400px;
	left: 500px;}

/* ===========================================================================*
 	HOVERS AND FOCUS
   ========================================================================== */
#library-tabs  a:hover 		{
	border: 1px dotted #00B3FF;
	padding: 3px;	}

.clear-link, .clear-link:hover {
	color: #00B3FF;
	font-size: 13px;
	padding: 10px; }
	
.clear-button:hover, input[type='submit']:hover {
	color: #FFF; }
	
.wide-button {
	width: 580px;}
	
#see_more_galleries_btn, #see_more_galleries_btn:hover {
	width: 668px;
	margin: 0px -10px 0px -10px; }
	
[id^="snippet-"] a:visited {
		color: #7AD7FF;}

[id^="snippet-"] a:hover {
		color: #00B3FF;
		cursor: pointer; }

#snippets-gallery-nav a:hover {
	color: #00B3FF;
	outline: 1px dotted  #00B3FF; }

#user-info-section button:hover, #user-photo-section button:hover {
		background: rgba(0,179,255,.8);
		color: #000; }

.explore-marker:hover, .arrow-down:hover, #big-login:hover {
	color: #DE312A;
	cursor: pointer; }
	
.explore-marker div:hover	{ cursor: pointer; }
	
button:hover, .button:hover {
	background: transparent; 
	color: #fc0;}

.clear-button:hover, #company-info:hover, #tumblr a:hover, #follow-button:hover, #see_more_galleries_btn:hover  {
	background: #00B3FF !important;
	color: #FFF;}

.clear-link:focus 	{ 	outline: thin dotted; }
.clear-link:hover, clear-link:active  {
	outline: thin dotted;
	background: transparent !important; }

.ui-tabs .ui-tabs-nav li a:hover {
	outline: thin dotted;
	color: #00B3FF; 
	opacity: 1;}
	
.no-outline:hover {outline: none;cursor: pointer; color: #00A1E6 ; }

[name='company-info']:hover, #login:hover, #contact:hover, #logout:hover {
	color: #00B3FF; 
	opacity: 1;
	outline: thin dotted; }

#main-view .bx-prev:hover, #main-view  .bx-next:hover	{
	opacity: 1;}
	
#snippets-gallery-subnav button:hover , #snippets-subnav button:hover{
	background: rgba(0,179,255,.8) !important;
	color: #616161; }	
	
/* ===========================================================================*
  				 			HOME PAGE SECTIONS												
 * ========================================================================== */
.cdx-wrapper {
	width: 750px;
	margin-top: -70px;}
	
#main {
	width: 1000px;
	margin: 40px auto;}
	
#user-hello	{
	font-size: 24px;
	 margin-top: 20px; }

#user-badges	{
	width: 200px;
	margin: 0px 13px -10px 13px ; 	}

#user-badges span {
	padding: 0px  5px; }
	
#library-tabs {	margin-left: 25px;}

#featured-galleries, #all-galleries {
	margin-left: 20px;}
	
.library-btn {
	padding: 5px;
	box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.6); 	 		
	-webkit-box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.6); 	 	
	-moz-box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.6);
	margin-left: -30px;}

.library-btn img {
	margin-top: 40px;
	margin-left: -4px; }
	
.photo-placeholder {
	width: 190px;
	height: 300px;
	font-size: 40px;}

input#photoFileElem {
	font-size: 13px;
	width: 80px;}	

#request-free:hover {
	cursor: pointer;
	color: #DE312A; }

#request-help:hover {
	color: #DE312A;}
	
.slider-container  {
	width: 700px; }

.sid h2 {
	margin-left: 30px;
	margin-top: -10px; }
	
.sid h1 {
	margin-left: 25px;	
	margin-top: 15px;
	margin-bottom: 0px;	}
	
.sid label {
	font-size: 12px;
	display: inline-block;
	margin-left: 10px; }
	
.sid h2 {
	font-size: 14px; }

.sid .slider-content {
	font-size: 28px;
	margin: 0px 0px 20px 10px;}
		
.sid .slider-content img {
	margin: 10px 10px 10px 0px;}

.sid article {
	font-size: 12px;
	width: 500px;
	margin-left: 30px;}

#no-gallery-arrow-up, #no-gallery-message {
	margin: 10px 110px 10px 110px;
	opacity: .7; }

/* ===========================================================================*
 	HOME PAGE ASIDE
   ========================================================================== */
#library-aside {
	float: right; }

#aboutMe {	margin-left: -20px;  }

#about-me {	width: 165px; }
	
/*aside {
	margin-top: 3em;	
	width: 275px;  }
	
aside li {
	margin: 5px;
	margin-top: 5px;
	padding: 5px;}
	
aside article.login-section  {
	text-align: left;		
	padding: 10px; }

#mobile-aside {
	display: none; }*/

.sid [id^="gallery-area-"] {
	width: 350px;}

.sid [type="button"] {
	font-size: .9em;
	width: 75px;
	height: 25px;	}

.left-margin-strings {
	width: 160px;
	margin-left: 60px;}
	
[name='snippets-curator'] {
	margin-top: 20px;
	width: 230px;
	margin-left: -30px;
	padding-bottom: 10px; }	
	
.ribbon  {
	padding: 10px;	
	margin-top: 80px;
	width: 250px;
	margin-left: 30px; }

#my-art-section  {
	padding: 10px;	
	margin-top: 20px;
	width: 648px;
	margin-left: 30px; }
	
#my-art-section li  {
	list-style: none;
	margin: 7px 13px; 	}
	
.gallery-frame  {
	padding: 10px;	
	margin-top: 20px;
	width: 210px;
	margin-left: -30px;	}

#collection-section {
	width: 900px; }

.gallery-banner {
	top: -120px;
	width: 185px;
	margin-right: 50px;}

.gallery-banner-inner {
	width: 230px;
	margin-right: 20px;
	margin-left: -23px;
	margin-top: 20px; }

.banner-large-top-margin {
	margin-top: 75px !important;
	margin-left: 5px; }

.explore-marker {
	width: 90px;
	float: right;
	margin-right: 10px;
	margin-top: -25px;
	font-size: 10px; }

.arrow-down {
	background: transparent;
	margin-top: 10px;
	margin-left: 1px;
	
	width: 0; 
	height: 0; 
	border-left: 39px solid #00B3FF;
	border-right: 39px solid #00B3FF;
	border-top: 8px solid #FFF;
	-webkit-transform: rotate(180deg);
	opacity: 1 !important;}
	
.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	
	border-bottom: 25px solid black; }

.banner-section-headings {
	font-size: 40px; }

/* ===========================================================================*
 	FORMS
   ========================================================================== */ 	
.aside-form {
	font-size:13px; 	
	padding: 10px 10px 10px 20px;  }

.aside-form h1 {
	font-size: 10px;
	margin-left: 10px;
	margin-top: 32px; }
	
p.message{
	font-size: .9em;}

input.button:hover {
	background: #DE312A none repeat scroll 0% 0%;
	color:white; }
	
label {
	padding-top: 10px;}
	
label.error { }

label[for='consentFormFlg'] {
	margin-top: 10px; }

label[for='consentFormFlg'], label[for="approveFlg"] {}

#consentFormFlg, #approveFlg {}

input.text-input	{
	width: 245px; 	}

label[for="usrPassword_reminder"]  {}

.input-help {
	margin-top: 2px;
	font-size: .7em;
	margin-right: 23px;}

.input-help:hover {
	color: #DE312A ;}	

/* ===========================================================================*
 	FOOTER												
   ========================================================================== */
footer {
   position:fixed;
   left:0px;
   bottom:0px;	
	font-size: 10px;
	height:40px;}
	
span.footer-left {
	margin-left: 60px;  }

span.footer-right{
	margin-right: 80px; }	

#login, #logout, #contact, [name='company-info'] {
	font-size: 12px;
	padding: 3px;}
	
#login , #logout {
	margin-left: 62px; }

#main footer a { text-decoration: none; }

#main .copyright {
	margin: 10px 0px 5px 100px; }

#snippets-gallery-footer .copyright {
	margin: 10px 0px 5px 400px; }	
	
#twitter, #tumblr {
	margin-top: 10px; 
	margin-left: 10px;
	height: 20px;}
	
#twitter{
	width: 140px;	}

#tumblr a {
	font-size: 11px; }

#tumblr {
	float: right; }	

#company-info {
	padding-top: 5px;
	font-size: 14px ; 
	height: 40px;}
	
#release {
	top: 9px;
	left: 5px;
	font-size: 10px;}	

/* ===========================================================================*
 * 				 			SNIPPET GALLERY SECTIONS										*
 * ========================================================================== */	

.snippets-wrapper {
	width: 1000px;}

#gallery-details {
	width: 700px;
	margin-bottom: 30px;}	

#snippets-gallery-nav {
	margin-left: 13px;
	width: 300px; /* so as not to cover button */ }

.library-tabs-label {
	font-size: 55px;
	margin-right: 50px; }

#snippets-gallery-nav a {
	font-size: 16px;
	font-weight: 400;
	padding: 5px 10px;}

	
#main-view>#snippets-subnav>#contribute-artifact-tab {
	margin-top: 30px;
	margin-bottom: 5px;
	width: 600px;
	margin-left: 62px; }

#snippets-gallery-subnav, #snippets-subnav {
	margin-top: -10px;
	margin-right: 35px; }

#snippets-gallery-aside, #snippets-gallery-details  {
	width: 260px; }
	
.snippets-wrapper h1 {
	margin-top: -90px;}

span[name='snippets-summary'], div[name="snippets-title"] {
	margin-top: 20px;
	margin-bottom: 10px;
	margin-left: 27px;}

span[name='snippets-summary'] {
	font-size: 12px;
	margin-right: 25px;	}

div[name="snippets-title"]{
	font-size: 40px;
	margin-right: 35px;	}
		
span[name='snippets-subscribers'], span[name^='snippets-subscribers-viz-goal']  {
	margin-right: 32px;
	margin-left: 23px; }
	
#main-view .slider-container {
	margin-top: -20px;
	margin-right: -10px; }
	
#gallery-details {
	float: right; }
	
#gallery-details-show-collection {
	top: 32px; }
	
#snippets-list li {
	margin-right: 15.9px; 
	margin-bottom: 22px;}

.snippet-flip {
	width: 150px;
	height: 200px;}

.snippet-flip>img {
	width: 150px;
	height: 200px;}
	
.read-snippet-btn[type='button']{ 
	width: 150px; }
	
[name="snippet-desc"] {
	margin: 15px 10px;}
	
#gallery-collectibles div[name='art-column-left'] {
	margin-left: -10px;}

#gallery-collectibles div[name='art-column-right'] {
	margin-right: 10px;}

#gallery-details-show-collection #multi-artifacts-tabs article {
	width: 600px;
	margin-left: 30px;}	

/* ===========================================================================*
 * 				 			USER THOUGHTS														*
 * ========================================================================== */
.snippets-gallery-aside .rating {
	font-size: 1.3em !important;}

.rating {
	width: 150px;
	font-size: 1em !important;}

.ratings-all {
	font-size: 10px !important;
	width: 150px; }

div[name="snippets-avg-rating"] {
	font-size: 16px;
	margin-bottom: 10px; }
	
div[name="snippets-avg-rating"] span 	{
	font-size: 12px; }	

[name="snippet-stars"][page="snippet"], [name="avgRating"][page="snippet"],[name="countRatings"][page="snippet"] {
	margin: 0px auto;}

[name="snippet-stars"] {
	margin-bottom: 10px !important;
	margin-top: 20px;	}
	
ul#chatter-display li, ul#my-thoughts-display li {
	font-size: 12px;
	margin-bottom: 10px;
	margin-left: 3px;
	margin-top: 10px; }

#snippets-gallery-details #snippetComment {
	font-size: 14px; }
	
#snippet-actions #snippetComment {
	font-size: 15px; }	

#privateFlg , [id^='updatePrivacyFlg']{
	margin-left: 0px;
	margin-top: 10px; }

[id^='updatePrivacyFlg']{	
	margin-right: 4px; }

label[for="privateFlg"], [id^='updatePrivacyFlg']~label{
	font-size: .75em !important;
	margin-left: 10px;
	margin-bottom: 16px;
	margin-top: 10px;
	padding-top: 0px !important; }

#submitSnippetComment {
	margin-top: 3px;
	margin-right: 0px; }

[name='comment'] {
	font-size: 12px; }
	
[name='commenter'] {
	font-size: 10px; }

[name='comment_date'] {
	font-size: 9px; }
	
#saved-thoughts-heading {
	margin-top: 50px; }
	
/* ===========================================================================*
 * 				 			SNIPPET READ SECTIONS											*
 * ========================================================================== */
#book-pages {
	width: 700px;}

#book-pages span[name='my-collection-btn'] {
	margin-top: 35px; }
	
#snippet-text {
	margin-top: 35px; }
	
/* snippet slider */
#mainSlider article {
	font-size: 20px;
	margin-bottom: 20px;
	margin-right: 40px;
	margin-left: 70px;	}

#mainSlider li:last-child article {
	font-size: 20px;
	margin: 50px 100px;}

#mainSlider li.pager:last-child article :first-child {
	font-size: 30px; }
	
#main-view .bx-next {
	left: 648px;}

#main-view .bx-prev {
	left: 35px; }  
	
#page-num {
	font-size: .5em;}
	
#show-mobile-snippet-info	{
	display: none; }
	
/* ===========================================================================*
 	COLLECT
   ========================================================================== */
div[name='art-column-left'] {
	margin-left: 60px;}

div[name='art-column-right'] {
	margin-right: 40px;}
	
#gallery-collectibles div[name^="art-column"] div[id^="qimg"]  {
	padding: 20px;
	margin: 10px 0px 70px 10px; }
	
.slider-content div[name^="art-column"] div[id^="qimg"]  {
	padding: 10px;
	margin: 10px 0px 70px 10px;
	border: 1px solid #E0E0E0; }
	
section[name="artifact-basics"]  {
	margin-left: -5px; }	
	
.collect-me, .collect-me:hover, .remove-me, .remove-me:hover   {
	width: 231px;} /* same size as image */
	
section[name="artifact-details"] {
	margin: 10px 10px 10px 15px;
	width: 230px;
	overflow-y: auto;
	overflow-x: hidden;
	overflow-style: marquee-line;}

.slider-content .art-collapsed {
	width: 230px !important;
	margin-left: 10px;}
	
.slider-content .art-expand {
	width: 570px !important;
	margin: 20px 0px 0px 10px !important;}

.slider-content .art-expand.done {
	width: 540px !important;}

.slider-content  [id^="highlight"].art-expand {
	width: 560px !important;}
	
.slider-content  [id^="highlight"].art-collapsed {
	width: 255px !important;}
	
.slider-content [name='art-column-left'] [id^='qimg'].art-collapsed:first-of-type {
	margin-top: 48px !important;}
	
.slider-content [name='art-column-right'] [id^="qimg"].art-collapsed:first-of-type {
	margin-top: 20px !important;}		
	
#gallery-collectibles .art-collapsed {
	width: 230px !important;
	margin-left: 10px;}
	
#gallery-collectibles .art-expand {
	width: 570px !important;
	margin: 20px 0px 0px 10px !important;}

#gallery-collectibles .art-expand.done {
	width: 570px !important;}

#gallery-collectibles  [id^="highlight"].art-expand {
	width: 610px !important;}
	
#gallery-collectibles  [id^="highlight"].art-collapsed {
	width: 270px !important;}		
	
span[name="art-caption"] {
	padding: 50px 10px 10px 10px;
	width: 230px;
	font-size: 12px;
	line-height: 18px !important;	}
	
div[name="art-collect-ct"] {
	width: 80px;
	font-size: 12px;}

#gallery-collectibles div[name="art-collect-ct"] {
	margin-top: 35px ;
	margin-right: -25px; }

.slider-content section[name="artifact-details"] div[name="art-collect-ct"] {
	margin-top: 0px ;	
	margin-right: 0px;}
	
.slider-content div[name^="art-column"] div[id^="qimg"].done section[name="artifact-details"] div[name="art-collect-ct"] {
	margin-top: 0px ;	
	margin-right: -5px;}


.slider-content div[name="artifact-basics"] div[name="art-collect-ct"] {
	margin-top: 5px ;	
	margin-right: 0px; }	

.slider-content div[name^="art-column"] div[id^="qimg"].done div[name="art-collect-ct"] {
	margin-top: 20px ;	
	margin-right: -15px;}

[id^="highlight"]{
	margin: 10px 0px 20px 10px;}
	
.slider-content [id^="highlight"]:first-of-type {
	margin-top: 48px; }
	
section[name="my-highlight"]{
	width: 230px;}
	
.slider-content section[name="my-highlight"]{
		padding: 20px 10px 50px 10px; }

#gallery-collectibles section[name="my-highlight"]{
		padding: 20px 10px 50px 20px; }		

section[name="my-highlight"] p {
	width: 175px;
	padding: 20px;	}	

div[name="snippet-title"]{
	font-size: 25px;
	margin-right: 60px;
	margin-left: 325px;
	padding-top: 20px;}

#mainSlider article p:first-of-type {
	padding-top: 50px; }
	
#highlighter-btn {
	right: 630px;
	top: 165px;
	font-size: 10px;}

[temp_id='temp-highlight'] #save-highlight-btn {
	margin-top: 24px;
	/* margin-right: 15px;*/
	font-size: 12px ;
	width: 195px;}
	
#highlighter-btn + #save-highlight-btn {
	position: relative;
	top: 133px;
	right: 493px; }
	
/* ===========================================================================*
 	CONTRIBUTE
   ========================================================================== */

#contribute-wrapper {
	margin: 20px 10px 0px 35px;
	padding: 20px;
	width: 570px;	}
	
#art-preview-top {
	margin-top: 40px; 
	width: 560px;}

#art-preview-left, #art-preview-right  {
	width: 240px;
	padding: 10px; }

#art-preview-top h2, #art-thumb-preview-div  { margin-left: 10px; }	

#art-preview-right {
	margin-left: 30px; }
	
#artFileElem {
	font-size: 14px;
	margin-top: 40px;}

#contribute-buttons, #artFileElem,  #art-guides section label {
 	width: 520px;
	font-size: 18px;	}

label[for='confirmCopyFlg'] {
	width: 494px !important;}
	
#contribute-buttons button, #contribute-buttons input {
	width: 120px;}
	
#choose-art-quote {
	width: 620px;}
	
#art-quote-tabs {
	margin: 10px;
	width: 535px; }

#contribute-artifact-tab {
	font-size: 16px;
	margin: 20px 0px -10px 70px;
	padding: 5px; }
	
#art-details-btn {
	margin: 65px -30px -8px 0px }

#art-filename {
	font-size: 16px;
	padding: 10px; }
	
#enter-art-file-info-form label {
	font-size: 14px !important; }

#qimgTypeChk input[type="checkbox"]	{
	margin: 5px 40px 0px 35px; }

#qimgTypeChk label {
	font-size: 12px !important;
	width: 60px !important;
	padding: 0px 5px;	}	
	
#art-guides-right, #art-guides-left {
	width: 220px; }
	
#confirmCopyFlg {
	margin-left: 10px; }

#art-guides .error	 {
	width: 540px; }	
	
/* ===========================================================================*
 * 				 			JQUERY UI CUSTOMIZATIONS										*
 * ========================================================================== */	
	
/*---------------- customize  jquery ui for company-info section -------------*/
#company-tabs.ui-tabs  {
	width: 600px;}

#company-tabs .ui-tabs-selected a, #company-tabs .ui-state-active  a {}

#company-tabs .ui-tabs-nav {
	margin-left: 32px;  }

#company-tabs .ui-state-default, #company-tabs .ui-tabs-selected, #company-tabs .ui-state-active {
	height: 30px; }

#multi-artifacts-tabs.ui-tabs  {
	width: 650px;
	margin-left: 25px;	}

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#scenes"]{
	width: 11px;
	height: 25px;
	margin-left: 2px;
	margin-right: 85px;}
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-tabs-selected a[href="#scenes"], #multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-state-active a[href="#scenes"]{
	opacity: 1;		}

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav .ui-state-default 	a[href="#scenes"]{
	opacity: .4;}
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#scenes"] span {
	margin-left: 17px;}
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#characters"] {
	background-position:  -34px -1px;
	width: 0px;
	height: 28px;
	margin-right: 18px;		}	

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-tabs-selected a[href="#characters"], #multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-state-active a[href="#characters"]{
	opacity: 1;		}

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav .ui-state-default 	a[href="#characters"]{
	opacity: .4;}
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#characters"] span{
	margin-left: 12px;}

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#places"] {
	background-position:  -59px -1px;
	width: 0px;
	height: 28px;
	margin-right: 18px;		}	

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-tabs-selected a[href="#places"], #multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-state-active a[href="#places"]{
	opacity: 1;		}

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav .ui-state-default 	a[href="#places"]{
	opacity: .4;}
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#places"] span {
	margin-left: 10px;		}	
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#objects"] {
	background-position: -84px -1px;
	width: 0px;
	height: 28px;
	margin-right: 18px;		}	

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-tabs-selected a[href="#objects"], #multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-state-active a[href="#objects"]{
	opacity: 1;		}

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav .ui-state-default 	a[href="#objects"]{
	opacity: .4;}
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#objects"] span {
	margin-left: 10px;		}	
		
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#backstorys"] {
	background-position:  -114px -2px;
	width: 0px;
	height: 28px;
	margin-right: 18px;		}	
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-tabs-selected a[href="#backstorys"], #multi-artifacts-tabs.ui-tabs .ui-tabs-nav li.ui-state-active a[href="#backstorys"]{
	opacity: 1;		}

#multi-artifacts-tabs.ui-tabs .ui-tabs-nav .ui-state-default 	a[href="#backstorys"]{
	opacity: .4;}
	
#multi-artifacts-tabs.ui-tabs .ui-tabs-nav a[href="#backstorys"] span {
	margin-left: 15px;		}	
	

/* ===========================================================================*
 	ABOUT US
   ========================================================================== */

#company-tabs article {
	width: 600px; 
	font-size: 12px; }

/* ===========================================================================*
 	ACCOUNT CREATION
   ========================================================================== */

#approve-request {
	width: 350px;
	padding: 25px;
	margin: 90px auto;}