.codebox {
    /* Below are styles for the codebox (not the code itself) */
    border:1px solid black;
    background-color:#f0fbff;
    width:73%;
    overflow:auto;    
    padding:10px;
	margin: 20px auto;
}
.codebox code {
    /* Styles in here affect the text of the codebox */
    font-size:0.9em;
    /* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
}

table.api_manual {
  color: #333;
  font-family: sans-serif;
  font-size: .9em;
  font-weight: 300;
  text-align: left;
  border-spacing: 0;
  border: 1px solid #428bca;
  width: 75%;
  margin: 20px auto;
}

table.api_manual thead tr:first-child {
height:40px;
  background: #428bca;
  color: #fff;
  border: none;
  font-weight:bold;
}

table.api_manual th {font-weight: bold;}
table.api_manual th:first-child, table.api_manual td {padding: 10px 25px 0 20px;}

table.api_manual thead tr:last-child th {border-bottom: 2px solid #ddd; height:40px;}

table.api_manual tbody tr:hover {background-color: #f0fbff;}
table.api_manual tbody tr:last-child td {border: none;}
table.api_manual tbody td {border-bottom: 1px solid #ddd; height:40px;}

table.api_manual td:last-child {
  text-align: left;
  padding-right: 10px;
  padding-top: 10px;
}

.button {
  color: #428bca;
  text-align: center;
  text-decoration: none;
  padding-left: 15px;
}

.button:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* CM API theme by concrete5 */

/* some general styles */
html {
	height: auto;
}

/* main styles */

	body{
		background:#f1f1f1;
		min-width:1150px;
	}
	
	
	body.admin_body{
	}
	

		.top_fixed{
			width:100%;
			position:fixed;
			top:0;
			background: #0f76aa; /* Old browsers */
			background: -moz-linear-gradient(top, #0f76aa 0%, #0c5e88 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0f76aa), color-stop(100%,#0c5e88)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #0f76aa 0%,#0c5e88 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #0f76aa 0%,#0c5e88 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #0f76aa 0%,#0c5e88 100%); /* IE10+ */
			background: linear-gradient(to bottom, #0f76aa 0%,#0c5e88 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f76aa', endColorstr='#0c5e88',GradientType=0 ); /* IE6-9 */
			overflow:hidden;
			z-index:6;
		}
		
	    .admin_body .top_fixed{
			top:50px;
		}
			
			.top_fixed_inner{
				margin:0 auto;
				color: #fff;
				text-align: center;
				margin-top:10px;
				min-width:1150px;
			}
			
				.top_fixed_inner img{
					display:inline;
					vertical-align: text-bottom;
				}
				
				.top_fixed_inner p {
					margin-bottom: 10px;
				}
		
		.admin_body #header{
			top: 100px;
		}
		
		#header{
			width: 26%;
			float: right;
			min-height: 200px;
			text-align: right;
			position: fixed;
			left: 0;
			top: 50px;
			min-width: 250px;
		}	
		
			.header_inner{
				width:93%;
			}
			
				.header_inner_top,#main_content_top{
					height:115px;
					overflow:hidden;
					padding-top:60px;
				}
				
				.user_profile_links{
				  float:right;
				  margin-top:30px;
				}
				
				.user_profile_links a{
					font-size: 17px;
					color: #fff;
					background: #0f76aa;
					text-decoration: none;
					display: block;
					width: 100px;
					padding: 5px 0;
					margin-bottom: 5px;
					text-transform: uppercase;
					text-align: center;
					font-weight: bold;
					text-shadow: -1px 1px 1px rgba(15, 23, 29, 0.39);
					font-family: 'Arial',sans-serif;
				}
			
				.user_profile_links a:hover{
					background: #368db9;
				}
				
				.ccm-profile-body-item.cm_api{
					font-size:15px;
					font-weight:bold;
				}
				
				.ccm-profile-body-item.cm_api div{
					margin-bottom:10px;
				}
				
				.ccm-profile-body-item.cm_api div label{
					font-weight: normal;
					min-width: 150px;
					display: inline-block;
				}
				
				.api_key_gen, .api_key_gen_new{
					border:none;
					padding:5px 10px;
					color:#fff;
					background:#0f76aa;
					cursor:pointer;
				}
				
				.profile_api_key {
					font-weight:normal;
					background:#ddd;
					padding: 3px;
				}
		
		
		#main-content{
			width:70%;
			float:right;
			background:#fff;
			min-height:1000px;
			-webkit-box-shadow: -6px -1px 8px -4px rgba(0,0,0,0.55);
			-moz-box-shadow: -6px -1px 8px -4px rgba(0,0,0,0.55);
			box-shadow: -6px -1px 8px -4px rgba(0,0,0,0.55);
			padding-left:3%;
			padding-top:50px;
		}
		
			.main_content_top_inner {
				margin-top:34px;
				min-width:80%;
				max-width:831px;
			}
			
				.main_content_top_inner h1{
					font-size:50px;
					font-weight:normal;
					text-transform:capitalize;
					float:left;
				}
				
			
				.main_content_top_inner  form.updates{
					float:right;
					margin-top: 30px;
				}	
				
				.main_content_top_inner  form.updates label {
					padding-left:24px;
					margin-right:5px;
					display:inline-block;
					font-size:15px;
				}
				
				.main_content_top_inner  form.updates label.initial {
					background:url('/themes/CMAPI/images/letter-icon.png') center left no-repeat;
				}
				
				.main_content_top_inner  form.updates input {
					height:20px;
					border:1px solid #bebebe;
				}
				
				.main_content_top_inner  form.updates input[type="text"]{
					padding-left:10px;
				}
				
				.main_content_top_inner  form.updates input#submit {
					height: 24px;
					background:#fff;
					border:1px solid #bebebe;
					color:#3a3a3a;
					cursor:pointer;
					margin-left: -2px;
				}
		
		#main_content_inner{
			min-width:80%;
			max-width:1120px;
			
		}
		
			#main_content_inner h1,#main_content_inner h2,#main_content_inner h3,#main_content_inner h4,#main_content_inner h5{
				margin-bottom:20px;
			}	
			
			#main_content_inner p{
				font-size:15px;
				margin-bottom:20px;
			}	
			
			#main_content_inner a {
				color:#0e9bd4;
				text-decoration:none;
			}
			
			#main_content_inner  .disabled a {
				color:#999;
				text-decoration:none;
			}
			
			#main_content_inner  .disabled a:hover {
				color:#999;
				text-decoration:none;
			}
			
			#main_content_inner a:hover {
				text-decoration:underline;
			}
			
		.agreement_form{
			text-align:center;
			margin-top:40px;
		}	
			.agreement_button {
					font-size: 17px;
					color: #fff !important;
					background: #0f76aa;
					text-decoration: none !important;
					display: block;
					width: 100px;
					padding: 5px 0;
					margin-bottom: 5px;
					text-transform: uppercase;
					text-align: center;
					font-weight: bold;
					font-family: 'Arial',sans-serif;
					border:none;
					display: inline-block;
					margin-right:30px;
					cursor:pointer;
				}
				
			.agreement_button.accept:hover {
				background: #368db9;
				
			}		
			
			.agreement_button.reject{
				background:#d35151;
			} 
			
			.agreement_button.reject:hover{
				background:#d36767;
			}
	
/*mobile optimization ----------------------------*/

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
 	
	
	
	body{
				
				padding:0;
				margin:0;
				border-top:none;
				min-width:0;
	}		
	
	.top_fixed{
		width:1000px;
		overflow:visible;
		
	}
	
	.top_fixed_inner{
		margin-top:10px;
		min-width:0;
		width:1000px;
		overflow:visible;
		font-size:20px;
	}
	
	#header {
		z-index:3;
		position:fixed;
		min-width: 0;
		width:220px;
		float:left;
	}
	
	.header_inner{
		width:auto;
	}
	
	#main-content{
		width:670px;
		float:right;
		height:1200px;
		padding-left:50px;
		z-index:4;
		position:relative;
		overflow:hidden;
		
	}
	
	.main_content_top_inner {
		min-width:0;
		width:670px;
	}
	
	.main_content_top_inner  h1{
		min-width:400px;
	}
	
	.main_content_top_inner  form.updates{
					float:right;
					margin-top: -120px;
				}	
	
	#main_content_inner{
		min-width:0;
		width:670px;
	}
	
	
	
}	

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For general iPad layouts */
 	
	
	
	body{
				
				padding:0;
				margin:0;
				border-top:none;
				min-width:0;
	}		
	
	.top_fixed{
		width:1000px;
		overflow:visible;
		
	}
	
	.top_fixed_inner{
		margin-top:10px;
		min-width:0;
		width:1000px;
		overflow:visible;
		font-size:20px;
	}
	
	#header {
		z-index:3;
		position:fixed;
		min-width: 0;
		width:220px;
		float:left;
	}
	
	.header_inner{
		width:auto;
	}
	
	#main-content{
		width:670px;
		float:right;
		height:1200px;
		padding-left:50px;
		z-index:4;
		position:relative;
		overflow:hidden;
		
	}
	
	.main_content_top_inner {
		min-width:0;
		width:670px;
	}
	
	.main_content_top_inner  h1{
		min-width:400px;
	}
	
	.main_content_top_inner  form.updates{
					float:right;
					margin-top: -120px;
				}	
	
	#main_content_inner{
		min-width:0;
		width:670px;
	}
	
	
}	

@media only screen and (min-device-width: 200px) and (max-device-width: 480px) and (orientation:portrait) {
  /* nexus 5 potrait */
 	
	
	
	body{
				
				padding:0;
				margin:0;
				border-top:none;
				min-width:0;
	}		
	
	.top_fixed{
		width:1000px;
		overflow:visible;
		
	}
	
	.top_fixed_inner{
		margin-top:10px;
		min-width:0;
		width:1000px;
		overflow:visible;
		font-size:20px;
	}
	
	#header {
		z-index:3;
		position:fixed;
		min-width: 0;
		width:220px;
		float:left;
	}
	
	.header_inner{
		width:auto;
	}
	
	#main-content{
		width:670px;
		float:right;
		height:1200px;
		padding-left:50px;
		z-index:4;
		position:relative;
		overflow:hidden;
		
	}
	
	.main_content_top_inner {
		min-width:0;
		width:670px;
	}
	
	.main_content_top_inner  h1{
		min-width:400px;
	}
	
	.main_content_top_inner  form.updates{
					float:right;
					margin-top: -120px;
				}	
	
	#main_content_inner{
		min-width:0;
		width:670px;
	}
	
	
}

@media only screen and (min-device-width: 200px) and (max-device-width: 480px) and (orientation:landscape) {
  /*  */
 	
	
	
	body{
				
				padding:0;
				margin:0;
				border-top:none;
				min-width:0;
	}		
	
	.top_fixed{
		width:1000px;
		overflow:visible;
		
	}
	
	.top_fixed_inner{
		margin-top:10px;
		min-width:0;
		width:1000px;
		overflow:visible;
		font-size:20px;
	}
	
	#header {
		z-index:3;
		position:fixed;
		min-width: 0;
		width:220px;
		float:left;
	}
	
	.header_inner{
		width:auto;
	}
	
	#main-content{
		width:670px;
		float:right;
		height:1200px;
		padding-left:50px;
		z-index:4;
		position:relative;
		overflow:hidden;
		
	}
	
	.main_content_top_inner {
		min-width:0;
		width:670px;
	}
	
	.main_content_top_inner  h1{
		min-width:400px;
	}
	
	.main_content_top_inner  form.updates{
					float:right;
					margin-top: -120px;
				}	
	
	#main_content_inner{
		min-width:0;
		width:670px;
	}
	
	
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* nexus 5 landscape  */
 	
	
	
	body{
				
				padding:0;
				margin:0;
				border-top:none;
				min-width:0;
	}		
	
	.top_fixed{
		width:1000px;
		overflow:visible;
		position:relative;
		padding:1px 0;
	}
	
	.top_fixed_inner{
		margin-top:10px;
		min-width:0;
		width:1000px;
		overflow:visible;
		font-size:20px;
	}
	
	#header {
		z-index:3;
		position:fixed;
		min-width: 0;
		width:220px;
		float:left;
		top:35px;
	}
	
	.header_inner{
		width:auto;
	}
	
	#main-content{
		width:670px;
		float:right;
		height:1200px;
		padding-left:50px;
		padding-right:20px;
		z-index:4;
		position:relative;
		overflow:hidden;
		padding-top:10px;
		margin-top:-8px;
		
	}
	
	.main_content_top_inner {
		min-width:0;
		width:670px;
	}
	
	.main_content_top_inner  h1{
		min-width:400px;
	}
	
	.main_content_top_inner  form.updates{
					float:right;
					margin-top: -120px;
				}	
	
	#main_content_inner{
		min-width:0;
		width:670px;
	}
	
	
}