/* EU notification */
#eu_cookie_notification {
    left: 0;
    right: 0;
    background: #212121;
    color: #ccc;
    font-size: 12px;
    position: fixed;
    z-index: 9999999999;
    padding: 15px 35px;
    text-align: center;
    font-family: Menlo, monaco, monospace;
    cursor: pointer;
}

#eu_cookie_notification a {
    color: #999;
    text-decoration: underline;
}

#eu_cookie_notification a:hover {
    color: white;
}

#eu_cookie_notification a:active {
    color: #ccc;
}

#eu_cookie_notification.top {
    top: 0;
}

#eu_cookie_notification.bottom {
    bottom: 0;
}

/* Retina spinner */

.spinner_circle.part1 {
	-webkit-animation-delay:-0.800s;
	animation-delay:-0.800s;
}

.spinner_circle.part2 {
	-webkit-animation-delay:-0.700s;
	animation-delay:-0.700s;
}

.spinner_circle.part3 {
	-webkit-animation-delay:-0.600s;
	animation-delay:-0.600s;
}

.spinner_circle.part3 {
	-webkit-animation-delay:-0.500s;
	animation-delay:-0.500s;
}

.spinner_circle.part4 {
	-webkit-animation-delay:-0.400s;
	animation-delay:-0.400s;
}

.spinner_circle.part5 {
	-webkit-animation-delay:-0.300s;
	animation-delay:-0.300s;
}

.spinner_circle.part6 {
	-webkit-animation-delay:-0.200s;
	animation-delay:-0.200s;
}

.spinner_circle.part7 {
	-webkit-animation-delay:-0.100s;
	animation-delay:-0.100s;
}

.spinner_circle.part8 {
	-webkit-animation-delay:-0.00s;
	animation-delay:-0.00s;
}

@keyframes spinner {
	0%   {background:#000;}
	80%  {background:#b2b2b2;}
	100%  {background:#000;}
}
 
@-webkit-keyframes spinner {
	0%   {background:#000;}
	80%  {background:#b2b2b2;}
	100%  {background:#000;}
}


@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);}
}

div.spinner_circle {
	-webkit-animation:spinner 0.9s infinite;
	-moz-animation:spinner 0.9s infinite;

	animation:spinner 0.9s infinite;
	-webkit-transform-origin: 0% 50%; 
	transform-origin: 0% 50%; 
	
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	
	position: absolute; 
	height: 4px;
	width: 4px; 
	left: 10px;
	top: 10px;
}

.retinaSpinner {
	display: inline-block;
	border: 0px solid red;
	z-index: 2000000000; 
	position: relative;
	height: 20px;
	width: 20px;
}

.retinaSpinner.rotating {
	-webkit-animation: rotation 10s infinite linear;
 	-moz-animation: rotation 10s infinite linear;
  	-o-animation: rotation 10s infinite linear;
    animation: rotation 10s infinite linear;
}

br { clear:both; }
img { border:0px; background:transparent; padding:0px; }
:focus { outline: 0; }
.clear { clear:both; }

.size14 { font-size:14px; }
.size16 { font-size:16px; }
.color9 { color:#999; }
.color7 { color:#777; }
.colorY { color:#ffffcc; }


/* ADMIN */
.greenLink { color:#0AAF86; }
.module .deleteLink, .greenLink { text-decoration:none; }	

a.homefollow { color: #0AAF86; }
a.homefollow:hover { text-decoration: underline; }
a.homefollow:active { color: #666; }

a.deleteLink, a.deleteLink.homefollow { color: #ff0066; }
a.deleteLink:hover, a.deleteLink.homefollow:hover { text-decoration: underline; }
a.deleteLink:active, a.deleteLink.homefollow:active { color: #666; }

/* TOOLSET */
#rail_wrapper {
	display:none;
}

.gallery .toolset {
    position: fixed;
    top: 10px; right: 10px;
    z-index: 9999;
}

body.following #toolset {
	display: none !important;
}

body.sitegallery #toolset {
	display: block !important;
}

#toolset a {
    background: url(/_gfx/toolset-sprite.png) no-repeat center center;
    background: rgba(0,0,0,0) url(/_gfx/svg/toolset-sprite.svg) no-repeat center center;
	background-position: 0 0;
	background-repeat: no-repeat;
	display: block;
	height: 24px; width: 24px;
	margin: 0;
	padding: 0;
}

	#toolset_admin a { background-position: 0 0; }
	#toolset_admin a:hover { background-position: 0 -24px; }
	#toolset_admin.toolset_active a { background-position: 0 -24px; }
	
	#toolset_follow a { background-position: -24px 0; margin-top: 1px; }
	#toolset_follow a:hover { background-position: -24px -24px; }
	
	#toolset_follow a { background-position: -48px 0; }
	#toolset_follow a:hover { background-position: -48px -24px; }
	
	#toolset_network_join a { background-position: -72px 0; margin-top: 1px; display: none; }
	#toolset_network_join a:hover { background-position: -72px -24px; }
	
	#toolset_network_leave a { background-position: -96px 0; margin-top: 1px; display: none; }
	#toolset_network_leave a:hover { background-position: -96px -24px; }


#toolset_menu {
	color: #ccc;
	display: none;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	font-size: 10px;
	margin-right: 25px;
	overflow: hidden;
	position: fixed;
	text-align: left;
	width: 140px;
    z-index: 99999;
}
    
    #toolset_menu a {
    	background: #000;
        border-bottom: 1px solid #333;
        color: #999;
        display: block;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        padding: 0 10px;
        text-decoration: none;
    }
    
    #toolset_menu a:hover {
        background: #333;
        color: #fff;
    }
    
    #toolset_menu a:active {
        padding-top: 1px;
        height: 23px;
    }
    
    #toolset_menu a.toolset_first {
        -webkit-border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-topright: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    
    #toolset_menu a.toolset_last {
        border-bottom: 0;
        padding-bottom: 1px;
        -webkit-border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

/* Cog toolset */
	#design_panel {
        color: #fff;
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
        font-size: 10px;
        line-height: 24px;
        position: fixed;
        top: 10px; right: 35px;
        z-index: 9999998;
    }
    
    a#design_symbol {
        background: url(/_gfx/svg/big_cog.svg) no-repeat center center;
        background-size: 80%;
        display: block;
        float: right;
        margin-right: 7px;
        overflow: hidden;
        filter:alpha(opacity=50);
        -moz-opacity:0.50;
        -khtml-opacity: 0.50;
        opacity: 0.50;
        text-indent: -9999px;
        width: 24px; height: 24px;
    }
    
    a#design_symbol:hover {
        filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
    }
    
    #design_options {
    	clear: both;
        display: none;
        float: right;
        margin-bottom: -24px;
        width: 100px;
    }
    
    #design_options a#design_options_close {
        color: #555;
        text-decoration: none;
        float: right;
    }
    
        #design_options a#design_options_close:hover {
            color: #fff;
        }
    
        #design_options a#design_options_close:active {
            color: #999;
        }
    
    #design_options a.option {
        background: #000;
        border-bottom: 1px solid #333;
        color: #ccc;
        display: block;
        padding: 0 10px;
        text-decoration: none;
    }
    
        #design_options a.option.selected {
            color: #ccc;
        }
    
            #design_options a.option.selected:hover {
                color: #fff;
            }
            
            #design_options a.option.selected:active {
                color: #ccc;
            }
    
        #design_options a.option:hover {
            background: #333;
            color: #fff;
        }
        
        #design_options a.option:active {
            background: #333;
            color: #ccc;
        }
    
        #design_options a.option_first {
                -webkit-border-top-left-radius: 4px;
                -webkit-border-top-right-radius: 4px;
                -moz-border-radius-topleft: 4px;
                -moz-border-radius-topright: 4px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
        }
    
            #design_options a.option_last {
                border-bottom: 0;
                -webkit-border-bottom-left-radius: 4px;
                -webkit-border-bottom-right-radius: 4px;
                -moz-border-radius-bottomleft: 4px;
                -moz-border-radius-bottomright: 4px;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
            }
    
        #design_options a.option span {
            color: #00aa50;
            float: right;
        }
    
            #design_options a.option.selected span {
                color: #666;
            }
    
    .ran_options {
        background: #000;
        color: #666;
        display: none;
        margin-top: -3px;
        padding: 0 10px;
        
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-bottomright: 4px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    
    	#design_options a#undo_pos, #design_options a#help, #design_options a#randomize {
    		color: #777;
    	}
    	
    		#design_options a#undo_pos:hover, #design_options  a#help:hover, #design_options a#randomize:hover {
    			color: #ccc;
    		}
    		
    		#design_options a#undo_pos:active, #design_options  a#help:active, #design_options a#randomize:active {
    			color: #999;
    		}
            
	#help_content {
		background: #000;
		clear: both;
		display: none;
		font-size: 11px;
		line-height: 1.5;
		color: #999;
		padding: 20px;
		position: relative;
		width: 220px;
		z-index: 10;
		
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-right-radius: 4px;
	}
	
		#help_content b {
			color: #fff;
		}
		
	#design_options_thumbnail_grid {
		background: url(/_gfx/grid_snap_bg.gif) 0 0;
		opacity: 0.25;
		position: absolute;
		top: 0; left: 0; right: 0;
		z-index: -10;
	}

.featured_browser a:hover {
	color: #00AF8A;
}



/* Audio component
***********************************************************************************************************/

	.audio_component {
	    cursor: default;
	    float: left;
	    margin: 0 15px 15px 0;
	    position: relative;
	}
	
	    .audio_component div {
	    	float: left;
	    }
	
	    .audio_component .border {
	    	position: absolute;
	    	width: 296px;
	    	z-index: 1;
	    }
	
	    .audio_component .vertical_border {
	    	height: 100%;
	    	width: 1px;
	    }
	
	    .audio_component .controls {
	    	position: absolute;
	    	width: inherit;
	    	z-index: 2;
	    }
	
	    	.audio_component .play_pause {
	    		background-position: -81px center;
	    		background-repeat: no-repeat;
	    		cursor: pointer;
	    		display: block;
	    		width: 35px;
	    	}
	
	    	.audio_component .play {
	    		background-position: -81px center;
	    	}
	
	    	.audio_component .pause {
	    		background-position: -16px center;
	    	}
	
	    .audio_component .info {
	    	position: relative;
	    	width: 202px;
	    }
	
	    .audio_component .href {
	    	display: none;
	    	position: absolute;
	    	visibility: hidden;
	    }
	
	    .audio_component .spectrum {
	    	height: 100%;
	    	margin-left: 1px;
	    	margin-right: 2px;
	    	overflow: hidden;
	    	position: absolute;
	    	width: 100%;
	    }
	
	    	.audio_component .spectrum .spectrum_bar {
	    		position: absolute;
	    	}
		.audio_component .progress_clip {
			z-index:2;
		}
	    .audio_component .loading {
	    	position: absolute;
	    	top: 0; left: 0;
			z-index:1;
	    }
	
	    .audio_component .glass {
	    	height: 100%;
	    	opacity: 0.0;
	    	position: absolute;
	    	width: 100%;
	
	    	filter: alpha(opacity=0);
	    	-moz-opacity: 0.0;
	    	-khtml-opacity: 0.0;
	    }
	
	    .audio_component .position {
	    	overflow: hidden;
	    	position: relative;
	    	width: inherit;
			z-index:4;
	    }
	
	    .audio_component .position .playhead {
	    	cursor: ew-resize;
	    	cursor: -moz-grab;
	    	cursor: grab;
	    	position: relative;
	    }
	
	    .audio_component .progress {
	    	position: absolute;
	    }
	
	    .audio_component .text {
	    	display: hidden;
	    	left: 0;
	    	overflow: hidden;
	    	padding: 0 10px 0 10px;
	    	position: absolute;
	    	white-space: nowrap;
	    	width: 90%;
			z-index:3;
	    }
	
	    .audio_component .volume {
	    	float: right;
	    	overflow: hidden;
	    	position: relative;
	    	width: 57px;
	    }
	
	    .audio_component .volume_slide {
	    	position: absolute;
	    	width: 100%;
	    }
	
		.audio_component .volume_slide.hover {
	
		}
	
	.drag_ew {
	    cursor: ew-resize;
	    cursor: -moz-grab;
	    cursor: grab;
	}
	
	.drag_ns {
	    cursor: ns-resize;
	    cursor: -moz-grab;
	    cursor: grab;
	}
	
	#sm2movie, #sm2-container {
	    
	}

    .detail_preload {
        display:block !important;
    }


/*** DEVELOPER DESIGN ERROR PAGE ***/

.developer_error {
    color: #000000;
    font-family: 'Lucida Grande','Lucida Sans Unicode',Arial,sans-serif;
    font-size: 18px;
    line-height: 1.5;
    padding: 60px;
}

.developer_error pre {
	font-size: 14px;
}

.developer_error a {
	color: #000;
	text-decoration: underline;
}

.developer_error a:hover {
	background: #ff0;
	text-decoration: underline;
}

.developer_error a:active {
	background: none;
	color: #f03;
}

.developer_error ul {
	margin: 0;
	padding: 0;
	list-style: none none;
    font-size: 14px;
}

.developer_error ul.listing li {
	padding-left: 30px;
}

.developer_error ul li[data-directory]:after {
	content: "/";
}

.developer_error ul li.misplaced {
	color: #f03;
}

.developer_error ul li.missing {
	color: #16C170;
	animation: developer_error_missing 650ms steps(10, end) infinite;
	-moz-animation: developer_error_missing 650ms steps(10, end) infinite;
	-webkit-animation: developer_error_missing 650ms steps(10, end) infinite;
}

@keyframes developer_error_missing {
	0% { color: #fff; }
	50% { color: #16C170; }
}

@-moz-keyframes developer_error_missing {
	0% { color: #fff; }
	50% { color: #16C170; }
}

@-webkit-keyframes developer_error_missing {
	0% { color: #fff; }
	50% { color: #16C170; }
}