/* palette: http://www.colourlovers.com/palette/148712/Gamebookers */
html{
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    width: 100%;
    overflow: hidden;
}

body{
    color: #555;
    margin: 0;
    padding: 0;
	height: 100%;
	min-height: 100%;
	width: 100%;
	font-family: "Roboto", sans-serif;
}

	body p, body label, body li, body input, body select{
		font-family: "Roboto", sans-serif;
	}

	body label{
		font-weight: normal;
	}
	
	body h1, body h2, body h3{
    	font-family: "Roboto Condensed", sans-serif;
    }

a, a:hover{
	cursor: pointer;
	color: #3299BB;
	text-decoration: none;
}

input.error{
	border: 1px solid #A4110A;
}

.primary-button, .secondary-button, .tertiary-button{
    display: inline-block;
    background-color: #3299bb;
    border: 2px solid #3299bb;
    border-radius: 20px;
    font-family: "Roboto Condensed", sans-serif;
    color: #fff;
    font-size: 1.15em;
    margin: 0;
    padding: 8px 20px;
    cursor: pointer;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

    .primary-button:hover{
        background-color: #1d7b9a;
        border-color: #1d7b9a;
    }
    
.secondary-button{
    background-color: #fff;
    color: #3299bb;
}
    .secondary-button: hover{
        background-color: #f0f0f0;
        border-color: #1d7b9a;
    }
    
.tertiary-button{
    background-color: #fff;
    color: #3299bb;
    border-color: #888;
    color: #888;
}
    .tertiary-button: hover{
        background-color: #f0f0f0;
    }
    
    .primary-button i, .secondary-button i, .tertiary-button i{
    	margin-right: 5px;
    }
    
.offset-left{
    margin-left: 20px;
}

/* customize tooltips */
.tooltip-inner{
    background-color: #444;
    padding: 5px 10px;
    border-radius: 0;
}

.tooltip-arrow{
    display: none;
}


/* form */
.main form{
	margin: 20px;
}

	.main .form-group div, .main .form-group table{
		max-width: 450px;
	}
	
	.main .form-vertical{
		padding-bottom: 50px;
	}
	
		.main .form-vertical .form-group{
			border-bottom: 1px solid #f0f0f0;
			padding-bottom: 20px;
		}
		
		.main .form-vertical .form-group:last-child{
			border-bottom: none;
		}
		
		.main .form-vertical .help-block{
			margin-bottom: 0;
		}
	
	.main .form-group label{
		color: #888;
	}
	
	.input-2{
		width: 65px;
	}
	
	.input-4{
		width: 75px;
	}
	
	.inline{
		display: inline-block;
	}
	
	.inline-actions button{
		margin-right: 10px;
	}

		.inline-actions span{
			color: #888;
		}
		
	/* tables */
	.main .form-group table{
		margin: 0;
	}
		
	.main .form-group table th small{
		font-weight: normal;
		color: #aaa;
		margin-left: 5px;
	}

/* .read-only.table */
.read-only-table small, .read-only-table span{
	display: block;
}

	.read-only-table small{
		color:#888;
		margin: 10px 0;
		text-transform: uppercase;
	}
	
	.read-only-table a{
		margin-right: 10px;
	}
	
	body .read-only-table td, body .read-only-table th{
		padding: 15px 15px !important;
	}
	
	body .read-only-table th{
		background-color: #f8f8f8;
		color: #777;
		font-weight: normal;
	}

/* modals */
body .modal-header{
	padding-top: 10px;
	padding-bottom: 10px;	
	margin-bottom: 10px;
}

	body .modal-header h3{
		padding-top: 0;
		margin-top: 10px;
		font-size: 1.4em;
	}
	
	body .modal-header .close{
		margin-top: 7px;
	}
    
    body .modal-footer{
	    margin-top: 0;
    }
    
    	body .modal-body form{
	    	margin: 0;
	    	padding: 0;
    	}
    	
    	body .modal-body label{
	    	color: #888;
    	}
    
    	body .modal-footer .tertiary-button{
	    	float: left;
    	}
    
		body .modal-footer .primary-button{
		    margin-left: 10px;
		}
		
	body .modal .modal-info{
		color: #888;
		margin-bottom: 25px;
	}
	
	body .modal .help-block{
		margin-bottom: 0;
	}	
	
	body .modal .form-group{
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 15px;
		margin-bottom: 10px;
	}

		body .modal .form-group:last-child{
			border-bottom: none;
		}


header{
    position: absolute;
    top: 0;
    left: 0;
	margin-left: -350px;
	width: 350px;
	background-color: #333;
	min-width: 35px;
	z-index: 2;
	height: 100%;
	border-right: 5px solid #3299bb;
    -webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;    
	-ms-transition: .2s all ease;
	transition: .2s all ease;
}
	
	header .profile{
		position: absolute;
		top: 10px;
		left: 10px;
		height: 40px;
		line-height: 40px;
		z-index: 10;
	}
	
		header .profile .photo{
			float: left;
			display: inline-block;
			width: 40px;
			height: 40px;
			background-size: cover;
			border-radius: 50%;
			margin-right: 5px;
		}
	
		header .profile a{
			color: #ddd;
			text-transform: uppercase;
		}

    
    header .sub-menu a{
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #ccc;
        font-size: 1em;
        margin-left: 0;
		border-radius: 50%;
    }
    
         header .sub-menu a:hover{
             text-decoration: none;
             background-color: #3299bb;
			 border-color: #3299bb;
             color: #fff;
         }
         
         header .sub-menu a.signout:hover{
	         background-color: #A4110A;
         }
         
         header .sub-menu a.republish:hover{
	         background-color: #7ec57e;
         }
         
	header .sub-menu{
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 10;
	}
	
	header a.hide-menu{
		background-color: #555;
		color: #fff;
		border-color: #555;
	}

    body.show-nav header{
        margin-left: 0;
    }
    
    header ul, header li{
        list-style: none;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #444;
    }
    
    header h2{
    	position: relative;
	    color: #888;
	    font-size: 15px;
	    padding: 0 0 0 10px;
	    margin: 0;
	    text-transform: uppercase;
    }
    
    	header h2 a{
    		position: absolute;
    		bottom: 10px;
    		right: 10px;
    		display: inline-block;
	    	color: #777;
	    	font-size: 12px;
	    	text-transform: uppercase;
    	}
    	
    	header h2 a i{
	    	color: #777;
	    	font-size: 11px;
	    	margin-left: 5px;
    	}
    
    	header h2.basic{
	    	padding: 75px 0 10px 10px;
    	}
    	
    	header h2.advanced{
	    	padding: 20px 0 10px 10px;
	    }
    
    header ul{
        border-top: 1px solid #444;
    }
    
    header li a{
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 16px;
        display: block;
        padding: 10px 15px;
        color: #ccc;
        font-size: 1.1em;
    }
    
        header li a i{
            display: inline-block !important;
            color: #ccc;
            margin-right: 10px;
            width: 20px !important;
        }
    
        header li.active a{
            background-color: #3299BB;
            color: #fff;
        }
        
        	header li.active i{
	        	color: #fff;
        	}
    
        header li a:hover{
            list-style: none;
            color: #fff;
            text-decoration: none;
            background-color: #3299bb;
        }
        
            header li a:hover i{
                color: #fff;
            }

/* .main */
section.main{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    z-index: 1;
    box-sizing: border-box;
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
	-o-transition: .2s all ease;    
	-ms-transition: .2s all ease;
	transition: .2s all ease;
}

	section.main .alert{
		margin: 20px 20px 0 20px;
	}
	
	section.main .alert a{
		margin-left: 15px;
		background: #fff;
		padding: 5px 15px;
		border-radius: 12px;
		border: 1px solid #ccc;
		color: #428bca; 
		text-decoration: none;
	}
	
		section.main .alert a:hover{
			background-color: #f8f8f8;
			border: 1px solid #aaa;
		}
		
		#account-message{
			display: none;
		}

    section.main table{
	    margin-top: 20px;
    }

	section.main table .number{
		text-align: right;
	}


/* nav */
section.main nav{
    background-color: #424242;
    height: 50px;
    margin: 0;
    padding: 0;
    position: relative;
}   
    
    section.main nav .show-menu{
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: #3299BB;
    }
    
        section.main nav .show-menu:hover{
            background: #1d7b9a;
            text-decoration: none;
        }

        section.main nav .show-menu i{
            color: #fff;
        }


	section.main nav .static-title{
        display: inline-block;
        padding: 0 30px;
		margin: 0 0 0 50px;
		background: #E9E9E9;
        border-bottom: 3px solid #FF9900;
        height: 50px;
        line-height: 47px;
        font-size: 1em;
	}
	
		section.main nav .static-title i{
			margin: 0 7px;
		}

    section.main nav ul{
        list-style: none;
        vertical-align: top;
        height: 50px;
        margin: 0 0 0 50px;
        padding: 0;
    }

    section.main nav li{
        position: relative;
        display: inline-block;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    
        section.main nav li.root a{
            width: 45px;
        }
    
        section.main nav li i{
            display: none;
        }
        
        section.main nav li a{
            display: inline-block;
            font-size: 1em;
            height: 50px;
            line-height: 50px;
            padding: 0 30px 0 19px;
            color: #fff;
            text-align: center;
        }
        
            section.main nav li.static a{
                padding: 0 30px;   
            }
        
        section.main nav li.root a{
            padding: 0 15px;
        }
        
        section.main nav li.add{
	     	padding: 0 0 0 10px;   
        } 
        
        section.main nav li.add i{
            display: inline-block;
            color: #fff;
            cursor: pointer;
        }
        
            section.main nav li.add i:hover{
                color: #FF9900;
            }
    
    section.main nav li.active{
        background: #E9E9E9;
        border-bottom: 3px solid #FF9900;
        height: 50px;
        line-height: 47px;
    }
    
        section.main nav li.active a{
            color: #373f4a;
        }
        
        section.main nav li.active i{
            position: absolute;
            top: 19px;
            right: 3px;
            display: inline-block;
            color: #aaa;
            cursor: pointer;
            margin: 0;
            padding: 0;
        }
        
            section.main nav li.active i:hover{
                color: #A4110A;
            }
    
    section.main nav a.primary-action{
        position: absolute;
        display: block;
        right: 0;
        top: 0;
        height: 50px;
        line-height: 50px;
        font-size: 1em;
        background: #FF9900;
        padding: 0 5px;
        color: #fff;
        font-size: 14px;
        width: 145px;
        text-align: center;
    }
    
        section.main nav a.primary-action:hover{
            text-decoration: none;
            background: #ffb648;
        }
        
        section.main nav a.primary-action i{
            margin-right: 5px;
            font-size: 16px;
        }
    
    section.main .actions{
        position: fixed;
        box-sizing: border-box;
        left: 0;
        bottom: 0;
        padding: 10px 20px;
        width: 100%;
        background-color: #E9E9E9;
        z-index: 1000;
    }

	/* flipsnap */
	.main nav .fs-container{
		overflow: hidden;
		margin: 0 145px 0 50px;
	}
	
		.main nav .fs-container.full{
			margin: 0 0 0 50px;
		}
	
		.main nav .fs{
			width: 3000px;
		}
	
		.main nav .fs ul{
			margin-left: 0;
		}
		
		a.fs-next, a.fs-prev{
		    position: absolute;
		    color: #fff;
		    background-color: #555;
		    height: 50px;
		    line-height: 50px;
		    z-index: 100;
		    padding: 0 10px;
		    text-decoration: none;
		}
		
		    a.fs-next:hover, a.fs-previous:hover{
		        opacity: 1;
		    }
		    
		    a.fs-next{
		        top: 0;
		        right: 135px;
		    }
		    
		    .main nav .fs-container.full a.fs-next{
			    right: 0;
		    }
		    
		    a.fs-prev{
		        top: 0;
		        left: 50px;
		        display: none;
		    }


	/* lock */
	section.main nav .lock, section.main nav li.active .lock{
		display: none;
	}

	section.main nav li.is-secure .lock{
		right: auto !important;
		left: 0 !important;
		display: inline-block;
		color: #fff;
		margin-left: 7px;
		color: #ccc;
	}
	
		section.main nav li.is-secure.active .lock{
			color: #aaa;
		}

div.content-row{
	box-sizing: border-box;
	padding: 0 20px;
}

fieldset{
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

	fieldset:last-child{
		margin-bottom: 0;
		border-bottom: 0;
	}

body .read-only{
	display: block;
	padding-top: 8px;
}

	body .read-only span, body .read-only small{
		font-weight: normal;
		display: block;
		margin: 0 0 5px 0;
		padding: 0;
		height: auto;
		line-height: auto;
	}
	
	body .read-only a{
		margin-right: 15px;
	}
	
	body .read-only small{
		color: #888;
		text-transform: uppercase;
	}
	
	body .form-group .loading{
		display: block;
		margin-top: 8px;
		color: #aaa;
	}
	
		body .form-group .loading i{
			margin-right: 5px;
		}
		
	body .form-stacked-bottom{
		margin-top: 10px;
	}
	

span.help-block{
	color: #888;
	font-size: 0.9em;
}

h1 .btn-primary{
	position: absolute;
	top: 11px;
	right: 20px;
}

div.content h1{
	color: #888;
	font-size: 24px;
	padding-bottom: 10px;
}

p.inline-status, p.inline-status i{
	color: #888;
}

p.inline-status{
	padding: 0 0 0 20px;
}

div#actions{
	position: fixed;
	width: 100%;
	bottom: 0;
	background: #f0f0f0;
	padding: 10px 0;
	margin: 0;
	border-top: 1px solid #d0d0d0;
    z-index: 100;
}

	div#actions .alternate{
		position: absolute;
		top: 23px;
		right: 20px;
	}
	
		div#actions .alternate i{
			color: #aaa;
			margin-left: 5px;
		}
	
	div#actions button:first-child, div#actions input:first-child, div#actions a:first-child{
		margin-left: 20px;
	}
	
	div#actions button, div#actions input, div#actions a{
		margin-right: 5px;
	}
	
	div.dialog, div.immersive, div.immersive-actions{
		display: none;
	}

/* select list */
div.select{
  overflow:auto;
  overflow-y:scroll;
  height: 150px;
  margin: 0;
  border: 1px solid #ccc !important;
  border-radius: 5px;
}

	div.select.select-lg{
		height: 300px;
	}

div.select.small{
  height: 200px;
}

div.select.mini{
  height: 150px;
}

div.select ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

div.select ul li.parent{
  color: #fff;
  background: #888;
  font-weight: bold;
  cursor: default;
}

div.select ul li{
  display: block;
  margin: 0;
  padding: 10px 15px;
  border-bottom: 1px solid #ccc;
}

div.select ul li i{
    color: #aaa;
    margin-right: 5px;
}

div.select ul li small{
    color: #888;
    font-size: 0.85em;
    float: right;
}

div.select ul li:hover{
  background: #f0f0f0;
  cursor: pointer;
}

div.select ul li.selected{
  background: #fbec5d;
  font-weight: bold;
}

    div.select ul li.selected i{
        color: #888;
    }


div.select em{
	display: block;
	font-style: normal;
	color: #888;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}

table.table tr.active td{
	background-color: #fbec5d !important;
}

table.table tr.active a.switch{
 	display: none;
}

/* dropdown */
body .btn-group.open .dropdown-toggle{
	background-color: #fff;
	-webkit-box-shadow: none;
	box-shadow: none;
}

body .dropdown-menu{
	-webkit-box-shadow: none;
	box-shadow: none;
}

	body .dropdown-menu li, body .dropdown-menu a{
		color: #888;
	}

	body .dropdown-menu li:hover, body .dropdown-menu a:hover{
		background-color: #f8f8f8;
		color: #888;
	}
	
	body .dropdown-menu li{
		position: relative;
	}
	
		body .dropdown-menu li a{
			padding-left: 5px;
			margin-left: 5px;
		}
	
		body .dropdown-menu li .remove{
			position: absolute;
			top: 2px;
			right: 5px;
			z-index: 10;
			cursor: pointer;
		}
		
		body .dropdown-menu li i:hover{
            color: #A4110A;
        }

/* codemirror */
body .CodeMirror{
    border: 1px solid #ccc;
    height: 550px;
    margin: 0;
}

.codemirror-block{
	margin: 20px 20px 10px 20px;
}

.template-insert{
	margin: 10px 20px;
	color: #888;
	font-size: 0.9em;
}

/* segmented control */
.segmented-control{
	display: block;
	text-align: left;
	margin: 20px 20px 0 20px;
	padding: 0;
	height: 35px;
	max-width: 450px;
}

	.modal .segmented-control{
		max-width: none;
		margin-bottom: -5px;
		margin-top: 15px;
	}

	.segmented-control li{
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		border-right: 1px solid #ccc;
		display: block;
		float: left;
		height: 35px;
		padding: 0;
		width: 25%;	
	}
	
		.segmented-control li:first-child{
			border-left: 1px solid #ccc;
		}
	
		.segmented-control li a{
			display: block;
			text-align: center;
			color: #aaa;
			height: 35px;
			line-height: 35px;
			margin: 0;
			padding: 0;
		}
	
	.segmented-control .active{
		background-color: #ccc;
	}
	
		.segmented-control .active a{
			color: #fff;
		}

/* page-specific */
#test-page .fa-check-circle{
	color: #7ec57e;
	background-color: #fff;
	padding: 2px;
	border-radius: 2px;
}

#test-page .fa-times-circle{
	color: #A4110A;
	background-color: #fff;
	padding: 2px;
	border-radius: 2px;
}

#menu-republish-message{
	display: none;
}

#settings-page .shipping-type{
	display: none;
}

#profile-page .profile-view{
	position: relative;
	padding: 0 20px 20px 100px;
}

	#profile-page .profile-view h2{
		font-size: 20px;
		text-transform: uppercase;
	}
	
	#profile-page .profile-view p{
		color: #888;
	}

#profile-page button.update-photo{
	position: absolute;
	box-sizing: border-box;
	left: 10px;
	width: 65px;
	height: 65px;
	padding-top: 4px;
	background-color: #fff;
	border: 2px dashed #eee;
	border-radius: 50%;
	color: #ccc;
	font-size: 10px;
	text-transform: uppercase;
	outline: none;
}

	#profile-page button.update-photo.has-photo{
		border: none;
		background-size:cover;
	}

	#profile-page button.update-photo.has-photo span{
		display: none;
	}

	#profile-page button.update-photo:hover{
		border-color: #3299BB;
	}
	
	

/* Large desktop */
@media (min-width: 1200px) { }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 

    header{
    	margin-left: -350px;
    }
 
    
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

    header{
        margin-left: -100%;
    	width: 100%;
    }
    
    body.show-nav section{
        width: 0%;
    }

}
 
/* Landscape phones and down */
@media (max-width: 480px) {  }