html, body {
    background-color: #F0F2F5;
    color: #555;
}

#flash-messages {
    left: 50%;
    width: 60%;
    margin-left: -30%;
}

    #flash-messages .alert {
        background-color: white;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    }

#wrapper {
    min-width: 1200px;
}

    #wrapper > main {
        padding: 40px 0 0 0;
    }
    
    #wrapper main > section {
        margin: 5px 10px 0 10px;
        background-color: white;
    }

#login {
    overflow: hidden;
    position: fixed;
    box-sizing: border-box;
    
    width: 320px;
    top: 50%;
    left: 50%;
    
    background-color: white;
    
    transform: translate(-50%, -50%);
}

    #login h1 {
        padding: 5px 0 0 0;
        
        text-transform: uppercase;
        text-align: center;
        font-size: 16px;
        color: #666;
    }

    #login ol {
        padding: 10px 20px;
        margin: 0;
        
        list-style: none;
    }
    
        #login ol li {
            margin-bottom: 10px;
        }
        
        #login ol label {
            display: block;
            
            padding: 0 0 5px 0;
            
            font-weight: 300;
            color: #666;
        }
        
        #login ol input {
            width: 100%;
        }
        
    #login button {
        box-sizing: border-box;
        
        width: 100%;
        padding: 10px 0;
        
        background-color: #4FC1E9;
        border: none;
        
        font-weight: 500;
        text-transform: uppercase;
        color: white;
        
        transition: all 0.3s;
    }
    
        #login button:focus,
        #login button:hover {
            background-color: #3BAFDA;
        }
        
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    background-color: #4FC1E9;
    
    z-index: 100;
}

    #header > nav {
        
    }
    
        #header > nav > ul {
            padding: 0;
            margin: 0;
            
            list-style: none;
            text-align: center;
        }
        
            #header > nav > ul > li {
                float: left;
                position: relative;
                
                margin: 0;
                padding: 0;
            } 
            
                #header > nav > ul > li > a {
                    display: inline-block;
                    padding: 9px 15px;
                    
                    border-left: 1px solid #4FC1E9;
                    border-right: 1px solid #4FC1E9;
                    
                    text-decoration: none;
                    text-align: center;
                    
                    transition: all 0.3s ease-in-out;
                }
                    #header > nav > ul > li > a::after {
                        display: none;
                        content: "";
                        position: absolute;
                        
                        bottom: 0;
                        left: 50%;
                        margin: 0 0 0 -7px;
                        
                        border-left: 6px solid transparent;
                        border-right: 6px solid transparent;
                        border-bottom: 6px solid #3BAFDA;
                    }
                        #header > nav > ul > li:hover > a::after {
                            display: block;
                        }
                    
                    #header > nav > ul > li.current > a {
                        background-color: #3BAFDA;
                        border-bottom: none;
                        border-left-color: #62CAEC;
                        border-right-color: #62CAEC;
                        
                        box-shadow: inset 0 2px 3px #2A9ACE;
                    }
                
                    #header > nav > ul > li > a i {
                        font-size: 18px;
                        color: white;
                    }
                
                    #header > nav > ul > li > a span {
                        display: none;
                        
                        white-space: nowrap;
                        font-size: 12px;
                        color: white;
                    }
            
                #header > nav > ul > li ul {
                    display: none;
                    position: absolute;
                    top: 100%;
                    left: 1px;

                    padding: 0;
                    margin: 0;
                    
                    background-color: #3BAFDA;

                    list-style: none;
                    text-align: center;
                }
                    #header > nav > ul > li:hover ul {
                        display: block;
                    }

                    #header > nav > ul > li ul li {

                    }
                    
                    #header > nav > ul > li ul a {
                        display: block;
                        padding: 10px;
                        
                        border-bottom: 1px solid #2B9AC3;
                        
                        text-align: left;
                        text-decoration: none;
                        font-size: 12px;
                        color: white;
                        white-space: nowrap;
                        
                        transition: all 0.3s;
                    }
                        #header > nav > ul > li ul .current a {
                            background-color: #28A7D7;
                        }
                        
                        #header > nav > ul > li ul a:hover {
                            background-color: #2B9AC3;
                        }
                    
                        #header > nav > ul > li ul li:last-child a {
                            border-bottom: none;
                        }
            
        #header > nav .type-menu {
            float: left;
            overflow: hidden;
            
            padding: 5px 7px;
            margin: 5px;
            
            line-height: 100%;
            text-align: center;
            color: #2C92B8;
            text-shadow: 1px 1px 1px #6BCEEE;
            
            transition: all 0.3s;
        }
        
            #header > nav .type-menu:hover {
                background-color: #3BAFDA;
                
                color: white;
                
                text-shadow: none;
            }
        
            #header > nav .type-menu span {
                display: none;
            }
        
        #header > nav .logout {
            float: right;
        }
        
        
        #header > nav h1 {
            margin: 0;
            padding: 7px 0 0 0;
            
            font-size: 18px;
            font-weight: 300;
            text-align: center;

            color: #3BAFDA;
        }
        
#breadcrumbs {
    overflow: hidden;
    padding: 5px 10px;
}

    #breadcrumbs a {
        float: left;
        position: relative;
        
        margin: 0 5px 0 0;
        
        font-size: 12px;
        text-decoration: none;
        color: #999;
    }
    
        #breadcrumbs a::before {
            float: left;
            margin: 0 5px 0 0;
  
            content: "/";
        }
        
        #breadcrumbs a:first-child::before {
            display: none;
        }
        
#description {
    overflow: hidden;
}

    #description h2 {
        margin: 0;
        padding: 10px;
        
        font-weight: 300;
    }
    
    #description nav {
        float: right;
        overflow: hidden;
        
        padding: 10px;
    }
    
        #description nav a {
            float: left;
            padding: 5px 10px;
            margin-left: 4px;
            
            background-color: #A0D468;
            
            font-size: 14px;
            text-decoration: none;
            color: white;
            
            transition: all 0.3s;
        }
        
            #description nav a:hover {
                background-color: #80B448;
            }
            
            #description nav a i {
                margin-right: 5px;
            }
    
#filter {
	padding: 0 10px 10px 10px;
    margin-bottom: 10px;
    
    background-color: #F6F8FA;
}

    #filter fieldset {
        margin: 0;
        padding: 0;
        
        border: none;
    }

	#filter ol {
		overflow: hidden;
        padding: 0;
        margin: 0;
        
        list-style: none;
	}
	
		#filter ol li {
			float: left;
			width: 250px;
			box-sizing: border-box;
			padding: 5px 5px 5px 0;
		}
		
			#filter ol li label {
				display: block;
			}
			
			#filter ol li input,
            #filter ol li select {
				width: 100%;
			}
			
	#filter > nav {
		
	}
	
		#filter > nav button {
			padding: 5px 10px;

			background: #D7DADB;
			border: none;

			text-decoration: none;
			text-align: center;
            font-size: 14px;
			color: #2C3E50;

			transition: all 0.3s ease;
		}
			#filter > nav button:hover {
				background: #EC87C0;
				color: white;
			}
            
#modal-window {
	position: fixed;
	display: block;
    z-index: 1000;
	
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	background: rgba(0, 0, 0, 0.6);

	animation: fade-in 0.3s ease-in-out;
}

	#modal-window > div {
		position: absolute;
		top: 50%;
		width: 100%;
		
		box-sizing: border-box;
		padding: 15px;
		
		background: white;

		transform: translateY(-50%);
		animation: modal-window-div 0.5s ease-in-out;
	}
	
		@keyframes modal-window-div {
			from {
				opacity: 0;
				transform: translateY(-70%);
			}
			to {
				opacity: 1;
				transform: translateY(-50%);
			}
		}
        
    #modal-window.confirm > div {
		font-weight: 300;
		text-align: center;
    }

	#modal-window.confirm a {
		display: inline-block;

        min-width: 60px;
		padding: 5px 10px;
		margin: 0 0 0 5px;

		background-color: #D7DADB;

		color: #2C3E50;
		text-decoration: none;
        font-size: 14px;

		transition: all 0.2s ease-in-out;
	}
	
		#modal-window.confirm a:focus {
			color: #FC4349;
		}

		#modal-window.confirm a:hover {
			background-color: #4FC1E9;
			color: white;
		}
            
.pagination {
	overflow: hidden;
	padding: 10px;
	
	font-size: 14px;
	text-align: center;
    
    background-color: #F6F8FA;
}

	.pagination span {
		float: left;
		padding: 7px 0;
	}
	
	.pagination a {
		display: inline-block;
		padding: 7px 0;
		width: 100px;
		
		background: #D7DADB;
		border-radius: 2px;
		
		text-decoration: none;
		text-align: center;
		color: #2C3E50;
		
		transition: all 0.3s ease;
	}
		.pagination a:hover {
			background: #5D9CEC;
			color: white;
		}
	
	.pagination fieldset {
		float: right;
        padding: 0;
        margin: 0;
        
        border: none;
	}
	
		.pagination fieldset input {
			width: 65px;
			
			text-align: center;
		}
        
        
.list {
	position: relative;
    padding: 10px;
}

    .list table {
        width: 100%;
        
        border-collapse: collapse;
        border-spacing: 0;
    }

	.list tr {
		
	}
    
        .list tbody tr.placeholder td {
            height: 30px;
            
            background-color: #FFF7DF !important;
        }

	.list th,
	.list td {
		padding: 7px 10px;
		
		vertical-align: middle;
	}
	
	.list th.align-center,
	.list td.align-center {
		text-align: center;
	}
	
	.list th.align-right,
	.list td.align-right {
		text-align: right;
	}
	
	.list th {
		background: #4FC1E9;
		border-right: 1px solid white;
		
		font-weight: 300;
		color: white;
	}
	
		.list th:last-child {
			border-right: none;
		}
	
	.list td {
		border-right: 1px solid white;
		border-bottom: 1px solid white;
	}
	
		.list td:last-child {
			border-right: none;
		}
	
		.list tbody tr:nth-child(2n) td {
			background-color: #F1F3F3;
		}
		
		.list tbody tr:nth-child(2n-1) td {
			border-right-color: #F1F3F3;
		}

			.list tbody tr:nth-child(2n-1):last-child td {
				border-bottom: 1px solid #F1F3F3;
			}
			
		.list tbody tr:hover td {
			background-color: #E8F4F9;
			border-right-color: white;
		}
        
    .list .handle {
        
    }
    
        .list .handle i {
            font-size: 14px;
        }
			
	.list .action {
		text-align: center;
	}
			
		.list .action > a {
			display: block;
			width: 30px;
			height: 30px;
			margin: 0 auto;
			
			background-color: #6DBCDB;
            
            color: white;
			
			transition: background-color 0.3s ease-in;
		}
        
        .list .action > a i {
            line-height: 29px;
            font-size: 14px;
        }
        
        .list .action > a span {
            display: none;
        }
		
		.list .action > a:hover {
			background-color: #5D9CEC;
		}
		
			.list .action > a.delete:hover {
				background-color: #FC4349;
			}
			
	.list .color-on,
	.list .color-off {
		color: #6DBCDB;
		font-size: 0.75em;
	}
	
	.list .color-off {
		color: #FC4349;
	}
    
#sortable-nested {
    padding: 5px;
    margin: 0;
    
    list-style: none;
}

    #sortable-nested li {
        box-sizing: border-box;
        
        padding: 0 10px;
        margin-bottom: 1px;
        
        background-color: #E1E4E9;
    }
    
        #sortable-nested li.placeholder {
            height: 40px;
            background: none;
            border: 1px dashed red;
        }
    
        #sortable-nested li strong {
            float: left;
            padding: 10px 0;
            min-width: 400px;
            
            cursor: s-resize;
        }
        
        #sortable-nested li nav {
            float: right;
            padding: 6px 0 0 0;
        }
        
        #sortable-nested li nav a {
            display: inline-block;
            padding: 5px 0;
            
            background-color: #4FC1E9;
            
            text-decoration: none;
            font-size: 14px;
            color: white;
            
            transition: background 0.3s;
        }
        
            #sortable-nested li nav a span {
                display: none;
            }
            
            #sortable-nested li nav a i {
                width: 30px;
                text-align: center;
            }
            
            #sortable-nested li nav a:hover {
                background-color: #5D9CEC;
            }
            
            #sortable-nested li nav a.delete:hover {
                background-color: #FC4349;
            }

    #sortable-nested ol {
        padding: 5px;
        
        clear: both;
        
        background-color: white;
        border-bottom: 5px solid #E1E4E9;
        list-style: none;
    }

.form {
	
}

	.form h2 {
		padding-bottom: 15px;
		font-weight: 300;
		font-size: 1.125em;
	}
    
	.form h3 {
        margin: 0;
		padding: 10px;
        
        border-top: 1px solid #F1F3F3;
        
        font-size: 1.125em;
		font-weight: 300;
	}
	
	.form h5 {
		padding-bottom: 15px;
		font-weight: 300;
	}
	
	.form h6 {
		font-weight: 300;
	}
	
	.form > nav {
		overflow: hidden;
		padding: 15px;
	}
	
		.form > nav button {
			float: left;
			padding: 7px 13px;
			margin: 0 5px 0 0;
			
			background: white;
			border: 1px solid #6DBCDB;
			
			color: #6DBCDB;
		}
		
			.form > nav button:hover {
				animation: buttons-hover 0.5s ease-in-out;
			}
		
		.form > nav button[type=submit] {
			float: right;
			margin-right: 0;
			
			background: #6DBCDB;
			color: white;
		}
		
        @keyframes buttons-hover {
            0% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-5px);
            }
            60% {
                transform: translateY(0);
            }
            80% {
                transform: translateY(-2px);
            }
            100% {
                transform: translateY(0);
            }
        }

	.form legend {
		display: none;
	}
    
    .form fieldset {
        padding: 0;
        margin: 0;
        border: none;
    }
	
		.form fieldset ol {
            padding: 0;
            margin: 0;
            list-style: none;
            
			clear: both;
		}
		
			.form fieldset ol li {
				overflow: hidden;
				padding: 10px;
				
				background-color: white;
			}
            
                .form fieldset ol li.color-picker {
                    overflow: visible;
                }
			
				.form fieldset ol > li:nth-child(2n) {
					background-color: #F1F3F3;
				}
			
				.form fieldset ol li > ol {
					padding-left: 20px;
					padding-bottom: 20px;
				}
			
				.form fieldset ol li label {
					float: left;
					box-sizing: border-box;
					padding: 5px 15px 0 0;
					width: 20%;
				}
				
				.form fieldset ol li .information {
					clear: both;
					padding-left: 20%;
					font-size: 0.75em;
				}
				
				.form fieldset ol li > textarea {
					float: left;
					width: 75%;
					height: 320px;
				}
				
					.form fieldset ol li > .mce-tinymce {
						float: left;
                        width: 75%;
					}
				
				.form fieldset ol li > input {
					float: left;
					width: 75%;
				}
                
                    .form fieldset ol li > input.datetime-input {
                        width: 200px;
                    }
				
                    .form fieldset ol li > input[type=checkbox],
                    .form fieldset ol li > input[type=radio] {
                        width: auto;
                    }
				
				.form fieldset ol li.on-off label {
					width: 100%;
					overflow: hidden;
					padding: 0;
					position: relative;
				}
				
					.form fieldset ol li.on-off label input {
						visibility: hidden;
						float: right;
					}
					
					.form fieldset ol li.on-off label span {
						float: left;
						position: relative;
						width: 20%;
						box-sizing: border-box;
						padding: 5px 15px 5px 0;
					}
					
					.form fieldset ol li.on-off label span::before {
						content: "";
						position: absolute;
						top: 0;
						right: -58px;
						width: 58px;
						height: 30px;
						box-sizing: border-box;
						
						background: #ED5565;
                        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4);
						
						cursor: pointer;
						
						transition: all 0.2s ease-in-out;
					}
					
						.form fieldset ol li.on-off label input:checked ~ span::before {
							background: #A0D468;
						}
					
					.form fieldset ol li.on-off label span::after {
						content: "";
						position: absolute;
						top: 2px;
						right: -28px;
						width: 26px;
						height: 26px;
						box-sizing: border-box;
						box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
						
						background: white;
						
						cursor: pointer;
						
						transition: all 0.2s ease-in-out;
					}
					
						.form fieldset ol li.on-off label input:checked ~ span::after {
							right: -56px;
						}
                        
                    .form fieldset ol li.tags-autocomplete input:focus {
                        box-shadow: none;
                    }
                        
        .form fieldset ol li .i18n {
            display: table;
            width: 75%;
        }
        
            .form fieldset ol li .i18n > div {
                display: table-cell;
                width: 50%;
            }
            
            .form fieldset ol li .i18n input {
                width: 95%;
            }
            
            .form fieldset ol li .i18n input[type='checkbox'] {
                width: auto;
                vertical-align: middle;
            }
            
            .form fieldset ol li .i18n .mce-tinymce {
                width: 95%;
            }
            
            .form fieldset ol li .i18n label {
                overflow: hidden;
                width: 100%;
                padding: 0;
            }
            
            .form fieldset ol li .i18n label select {
                margin-left: 10px;
            }
            
        .form fieldset ol li .icons {
            overflow: hidden;
            width: 75%;
        }
            
            .form fieldset ol li .icons input {
                
            }
        
            .form fieldset ol li .icons span {
                float: left;
                width: 60px;
                height: 60px;

                background: url(../img/icons.png) no-repeat 0 0 black;
            }
            
                .form fieldset ol li .icons .icon-2 span {
                    background-position: -60px 0;
                }
                
                .form fieldset ol li .icons .icon-3 span {
                    background-position: -120px 0;
                }
                
                .form fieldset ol li .icons .icon-4 span {
                    background-position: -180px 0;
                }
                
                .form fieldset ol li .icons .icon-5 span {
                    background-position: -240px 0;
                }
                
                .form fieldset ol li .icons .icon-6 span {
                    background-position: -300px 0;
                }
                
                .form fieldset ol li .icons .icon-7 span {
                    background-position: -360px 0;
                }
                
                .form fieldset ol li .icons .icon-8 span {
                    background-position: -420px 0;
                }
                
                .form fieldset ol li .icons .icon-9 span {
                    background-position: -480px 0;
                }
                
                .form fieldset ol li .icons .icon-10 span {
                    background-position: -540px 0;
                }
                
                .form fieldset ol li .icons .icon-11 span {
                    background-position: -600px 0;
                }
                
                .form fieldset ol li .icons .icon-12 span {
                    background-position: -660px 0;
                }
                
                .form fieldset ol li .icons .icon-13 span {
                    background-position: -720px 0;
                }
                
                .form fieldset ol li .icons .icon-14 span {
                    background-position: -780px 0;
                }
                
                .form fieldset ol li .icons .icon-15 span {
                    background-position: -840px 0;
                }
                
                .form fieldset ol li .icons .icon-16 span {
                    background-position: -900px 0;
                }
                
                .form fieldset ol li .icons .icon-17 span {
                    background-position: -960px 0;
                }
        
            .form fieldset ol li .icons label {
                float: left;
                overflow: hidden;
                
                width: 100px;
                height: 60px;
            }
            
        .form fieldset .pictures {
            clear: both;
            overflow: hidden;
            padding: 15px 0 0 20%;
        }

            .form fieldset .pictures > table {
                width: 95%;

                background-color: white;

                border-spacing: 0;
                border-collapse: collapse;
            }

                .form fieldset .pictures th,
                .form fieldset .pictures td {
                    padding: 7px 10px;
                }

                    .form fieldset .pictures .align-center {
                        text-align: center;
                    }

                    .form fieldset .pictures thead th {
                        background-color: #4FC1E9;
                        border-right: 1px solid white;
                        border-bottom: 1px solid white;

                        vertical-align: middle;
                        font-weight: 300;
                        color: white;
                    }

                        .form fieldset .pictures thead tr th:last-child {
                            border-right: none;
                        }

                    .form fieldset .pictures tbody td {
                        border-right: 1px solid #f1f3f3;
                        border-bottom: 1px solid #f1f3f3;
                    }

                        form fieldset .pictures tbody input[type=text] {
                            width: 100%;
                        }
                        
                        
.form-autocomplete-selected {
    overflow: hidden;
    width: 75%;
    margin-left: 20%;
}

    .form-autocomplete-selected > div {
        float: left;
        overflow: hidden;
        padding: 3px;
        margin: 2px 2px 0 0;
        
        background: #4FC1E9;
        border: 1px solid #2A9ACE;
        
        font-size: 12px;
        color: white;
    }
    
        .form-autocomplete-selected > div .title {
            display: inline-block;
            padding: 2px 2px 3px 2px;
            font-weight: normal;
        }

        .form-autocomplete-selected > div a {
            color: white;
            font-weight: bold;
        }
        
        .form-autocomplete-selected > div a.delete {
            display: inline-block;
            padding: 2px 2px 3px 2px;
            text-decoration: none;
        }

#loading {
	position: fixed;
	display: none;
    overflow: hidden;
    z-index: 1000;
	
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	background: rgba(0, 0, 0, 0.6);
	
	text-indent: -9999px;
}

	#loading::after,
	#loading::before {
		content: "";
		position: absolute;
		
		top: 50%;
		left: 50%;
		width: 50px;
		height: 50px;
		margin: -25px 0 0 -25px;
		
		background-color: white;
		border-radius: 50%;
		
		opacity: 0.6;
		animation: loading 2.0s infinite ease-in-out;
	}
	
		#loading::before {
			animation-delay: -1.0s;
		}
	
		@keyframes loading { 
			0%, 100% { 
				transform: scale(0.0);
			} 50% { 
				transform: scale(1.0);
			}
		}

        
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}