body{margin:0;
font-family: sans-serif;
font-size: 16px;
line-height:1.5em;
background: #fafafa;

    }

a {
font-size: 14px;
color: black;
font-style: normal;
text-decoration: none;
}

#top_menu:a {
font-size: 14px;
color: white;
font-style: normal;
text-decoration: none;
}


table, th, td {
   font-size: 13px;
   padding: 4px;
}

#home_brand {
	background-image: url(/images/BloqStyleBig.png);
	margin-top:250px;
	height: 900px;
	width: 900px;
	background-repeat: no-repeat;
		margin-left: auto;
    margin-right: auto;
	}
	
#nav_bg {  background: #f1f1f1;
        vertical-align: top;
		height: 100px;
		width: 100%
		}
		
#nav_wrapper {
	width: 960px;
	height: 100px;
	margin-left: auto;
    margin-right: auto;
	}
	
#nav_brand {
	background-image: url(/images/bloqs-logo.png);
	float: left;
	height: 100px;
	width: 500px;
	background-repeat: no-repeat;
	}
	
#nav_bar {
	background: #e8008c;
	height:40px;
	width:100%;
	}
	
#nav_text {
	width: 960px;
	margin-left: auto;
    margin-right: auto;
    color: white;
    padding-top: 8px;
    padding-left: 25px;
}	

#content_wrapper {
	width: 960px;
	margin-left: auto;
    margin-right: auto;
    Padding-top: 25px;
}

#clearspace {
	clear: both;
	margin-bottom: 30px;
	}

#grid_bloq {
	border: 1px solid #d5d5d5;
	width: 100px;
	height: 130px;
	background: white;
	float: left;
	font-size: 11px;
	line-height:1.2em;
	text-align:center;
	margin-right: 20px;
	
}

#color_bloq {
	width: 80px;
	height: 80px;

	margin-left: auto;
    margin-right: auto;
	margin-top:10px;
	clear: both;
	margin-bottom: 8px;
	}

#example_box {
	width: 960px;
	border: 1px solid #d5d5d5;
	padding: 10px;
	margin-top: 10px;
	background: white;
	clear: both;
	}
	
/* COLOR SELECTIONS */	
	
.color1 {
		background: #ba0001;
		}

.color2 {
		background: #e45008;
		}
		
.color3 {
		background: #c83087;
		}

.color4 {
		background: #167fb6;
		}
		
.color5 {
		background: #829e3a;
		}
		
.color6 {
		background: #5b009d;
		}

.color7 {
		background: #9d5314;
		}
		
.color8 {
		background: #000000;
		}
		
.color9 {
		background: #373737;
		}

.color10 {
		background: #7d7d7d;
		}
		
.color11 {
		background: #d8d8d8;
		}		

.color12 {
		background: #0d5276;
		}	
		
		

/* TYPE SELECTIONS */	


.submenu {
font-family: 'Arimo' !important;
font-size: 16px;
line-height: 20px;
font-style: normal;
font-weight: 400;
color: #d8d8d8;

}

.submenu:hover {
color: #000000;
}

.submenu-selected {
font-family: 'Arimo' !important;
font-size: 16px;
line-height: 20px;
font-style: normal;
font-weight:700;
color: #000000;
}




.standard-content {
font-family: 'Arimo' !important;
font-size: 14px;
line-height: 17px;
font-style: normal;
font-weight: 400;
color: #373737;
display: block;

}


.simple-headline {
font-family: 'Arimo' !important;
font-size: 30px;
line-height: 40px;
font-style: normal;
font-weight: 400;
color: #000000;

}

.standard-link {
font-family: 'Arimo' !important;
font-size: 14px;
line-height: 17px;
font-style: normal;
font-weight: 400;
color: #167fb6;
text-decoration: underline;
}

.standard-link:hover {
color: #0d5276;
}


.form-question {
font-family: 'Arimo' !important;
font-size: 17px;
line-height: 18px;
font-style: normal;
font-weight: 400;
color: #000000;
display: block;

}

.form-details {
font-family: 'Arimo' !important;
font-size: 12px;
line-height: 1.3em;
font-style: normal;
font-weight: 400;
color: #373737;
display: block;
}


#editmodebold {
font-family: 'Lato' !important;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
color: #fff;


}

#editmodelight {
font-family: 'Lato' !important;
font-size: 16px;
font-weight: 300;
letter-spacing: 1px;
color: #fff;


}


/* BUTTONS */	

#save-button {
display: inline-block;
padding: 10px 25px;
background-color: #167fb6;
font-family: 'Arimo' !important;
color: white;
font-size: 16px;
font-style: normal;
font-weight: 400;
}



#save-button:hover {
background-color: #0d5276;}

#password-button {
display: inline-block;
width:100px;
height:100px;
background-image: url(/images/lock-off.png);
}

#password-button:hover {
background-image: url(/images/lock-hover.png);
}

#password-button-on {
display: inline-block;
width:100px;
height:100px;
background-image: url(/images/lock-on.png);
}


#power-button {
display: inline-block;
width:100px;
height:100px;
background-image: url(/images/button-power-standby.png);
}

#power-button:hover {
background-image: url(/images/button-power-on.png);
}

#power-button-on {
display: inline-block;
width:100px;
height:100px;
background-image: url(/images/button-power-on.png);
}

#power-button-off {
display: inline-block;
width:100px;
height:100px;
background-image: url(/images/button-power-off.png);
}

#power-button-b {
display: inline-block;
width:100px;
height:100px;
background-image: url(/images/button-power-standby.png);
}

#power-button-b:hover {
background-image: url(/images/button-power-off.png);
}

#viz-on-button {
display: inline-block;
width:74px;
height:75px;
background-image: url(/images/button-viz-on.png);
}

#viz-off-button {
display: inline-block;
width:74px;
height:75px;
background-image: url(/images/button-viz-off.png);
}

#viz-inviz-button {
display: inline-block;
width:74px;
height:75px;
background-image: url(/images/button-viz-inviz.png);
}

#viz-on-button-off {
display: inline-block;
width:74px;
height:75px;
background-image: url(/images/button-viz-on-off.png);
}

#viz-on-button-off:hover {
background-image: url(/images/button-viz-on-hover.png);
}

#viz-off-button-off {
display: inline-block;
width:74px;
height:75px;
background-image: url(/images/button-viz-off-off.png);
}

#viz-off-button-off:hover {
background-image: url(/images/button-viz-off-hover.png);
}

#viz-inviz-button-off {
display: inline-block;
width:74px;
height:75px;
background-image: url(/images/button-viz-inviz-off.png);
}

#viz-inviz-button-off:hover {
background-image: url(/images/button-viz-inviz-hover.png);
}


/* FORMS */

div.large-entry {    
    padding-top: 0px;
    width: auto;
    display: inline-block;
}


div.large-entry input {
    background-color: #fff;
    font-family: sans-serif;
    font-size:18px;
    padding: 6px;
    border: 1PX solid #7d7d7d;
}

.styled-select select {
border: 1px solid #d8d8d8;
font-family: 'Arimo' !important;
font-size: 16px;
color: #000;
background: #f6f6f6;
padding: 8px;
height: 34px;
   }
   
 
input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-family: 'Arimo' !important;
  font-size : 1em;
  opacity   : 0;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
  font-family: 'Arimo' !important;
  font-size: 15px;
}

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0825em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : #000;
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em #000;
  font-weight : bold;
}

input[type=radio]:not(old):checked +  label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.2em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : #373737;
}




/* PAGES EDIT MODE BUTTONS */

#page-editmode {
width: 100%;
height: 77px;
background-color: #e45008;
}

#back-arrow {
Height: 77px;
width: 60px;
background-image: url(/images/back-arrow.png);
border-right: 1px solid #ef966b;
float: left;
}

#currently-editing {
color: #ef966b;
font-family: 'Arimo' !important;
font-size: 11px;
}

#page-editing {
color: white;
font-family: 'Arimo' !important;
font-size: 20px;
}

#pagename {
float: left;
height:70px;
padding: 10px 0px 0px 15px;
}


#delete-button {
float: right;
height: 77PX;
width: 70PX;
background-image: url(/images/button-delete-off.png);
}

#delete-button:hover {
background-image: url(/images/button-delete-hover.png);
}

#design-button {
float: right;
height: 77PX;
width: 70PX;
background-image: url(/images/button-design-off.png);
}

#design-button:hover {
background-image: url(/images/button-design-hover.png);
}

#addbloq-button {
float: right;
height: 77PX;
width: 70PX;
background-image: url(/images/button-addbloq-off.png);
}

#addbloq-button:hover {
background-image: url(/images/button-addbloq-hover.png);
}


#visability-button {
float: right;
height: 77PX;
width: 70PX;
background-image: url(/images/button-visability-off.png);
}

#visability-button:hover {
background-image: url(/images/button-visability-hover.png);
}


#settings-button {
float: right;
height: 77PX;
width: 70PX;
background-image: url(/images/button-settings-off.png);
}

#settings-button:hover {
background-image: url(/images/button-settings-hover.png);
}


#pages-view-modes {
  display: inline;
float: right;
height: 77PX;
width: 150PX;

background-repeat: no-repeat;
background-position: center;
}


.edit-dropdown-top{
background-image: url(/images/button-editmode-on.png);
}

.view-dropdown-top{
background-image: url(/images/button-viewmode-on.png);
}

.layout-dropdown-top{
background-image: url(/images/button-layoutmode-on.png);
}

#view-choices {
width: 102PX;
height: 77PX;
float:right;
background-image: url(/images/button-viewoptions.png);
background-repeat: no-repeat;
background-position: bottom;
}


#view-desktop {
float: left;
height: 43PX;
width: 51PX;
background-image: url(/images/button-desktop-selected.png);
}

#view-mobile {
float: left;
height: 43PX;
width: 51PX;
background-image: url(/images/button-mobile-notselected.png);
}

#view-mobile:hover {
background-image: url(/images/button-mobile-selected.png);
}

#view-options {
float: left;
width: 102PX;
height: 20px;
background-image: url(/images/button-viewoptions.png);
}

/*  EDIT MODE TALBLE SETTINGS  */

#editmode-settings {
width: 70px;
height: 40px;
background-image: url(/images/editmode-button-settings-off.png);
}

#editmode-settings:hover {
background-image: url(/images/editmode-button-settings-hover.png);
}

#editmode-design {
width: 70px;
height: 40px;
background-image: url(/images/editmode-button-design-off.png);
}

#editmode-design:hover {
background-image: url(/images/editmode-button-design-hover.png);
}

#editmode-visability {
width: 70px;
height: 40px;
background-image: url(/images/editmode-button-visability-off.png);
}

#editmode-visability:hover {
background-image: url(/images/editmode-button-visability-hover.png);
}

#editmode-addbloq {
width: 70px;
height: 40px;
background-image: url(/images/editmode-button-addbloq-off.png);
}

#editmode-addbloq:hover {
background-image: url(/images/editmode-button-addbloq-hover.png);
}

#editmode-delete {
width: 70px;
height: 40px;
background-image: url(/images/editmode-button-delete-off.png);
}

#editmode-delete:hover {
background-image: url(/images/editmode-button-delete-hover.png);
}

#editmode-downarrow {
background-image: url(/images/editmode-downarrow.png);
}

#editmode-desktopview {
float: left;
width: 42px;
height: 40px;
background-image: url(/images/editmode-button-desktop-off.png);
}

#editmode-desktopview:hover {
background-image: url(/images/editmode-button-desktop-on.png);
}


#editmode-mobileview {
float: left;
width: 42px;
height: 40px;
background-image: url(/images/editmode-button-mobile-off.png);
}

#editmode-mobileview:hover {
background-image: url(/images/editmode-button-mobile-on.png);
}


table.editmodetable  {
   font-size: 10px;
   padding: 0px;
}

table.editmodetable td {
font-family: 'Arimo' !important;
   font-size: 10px;
   padding-top: 5px;
   text-align:center; 
    vertical-align:middle;
   
    color: #f5b99c;
   
}

/* PAGE LAYOUT */

#layout-sitebackground {
width: 100%;
height: 1088PX;
background-image: url(/images/layouts-sample-background.jpg);
background-repeat: no-repeat;
background-position: center top;
}

#alpha-overlay {
background-color: rgba(255, 255, 255, 0.6);
width: 100%;
height: 1088PX;
}

#section-editor {
width: 100%;
border-bottom: dotted 1px #167fb6;
clear: both;
}

.section-1 {
height: 148px;
}

.section-1:hover {
background-color: rgba(22, 127, 181, 0.5);
background-image: url(/images/button-edit-section-blue.jpg);
background-repeat: no-repeat;
background-position: center top;

}

.section-2 {
height: 48px;
}

.section-2:hover {
background-color: rgba(22, 127, 181, 0.5);
background-image: url(/images/button-edit-section-blue.jpg);
background-repeat: no-repeat;
background-position: center top;

}

.section-3 {
height: 384px;
}

.section-3:hover {
background-color: rgba(22, 127, 181, 0.5);
background-image: url(/images/button-edit-section-blue.jpg);
background-repeat: no-repeat;
background-position: center top;

}

.section-4 {
height: 480px;
}

.section-4:hover {
background-color: rgba(22, 127, 181, 0.5);
background-image: url(/images/button-edit-section-blue.jpg);
background-repeat: no-repeat;
background-position: center top;

}
.section-edit {
display: inline-block;
padding: 10px 25px;
background-color: #167fb6;
font-family: 'Arimo' !important;
color: white;
font-size: 14px;
font-style: normal;
font-weight: 400;
}



/* PAGE ADD MOVE ITEMS */

#drag-page {
	width: 24px;
	height: 28px;
	background-image: url(/images/page-drag-off.png);
	background-repeat: no-repeat;
	background-position: center;
	float: left;
	border-right: solid 1px #b9b9b9;
	background-color: white;
	}

#drag-page:hover {

	background-image: url(/images/page-drag.png);
	background-repeat: no-repeat;
	background-position: center;
	background-color: #fff;
	}
	
#drag-page-new {
	width: 24px;
	height: 28px;
	background-image: url(/images/page-drag-newpage.png);
	background-repeat: no-repeat;
	background-position: center;
	float: left;
	border-right: solid 1px #b9b9b9;

	}

#drag-page-new:hover {

	background-image: url(/images/page-drag-newpage.png);
	background-repeat: no-repeat;
	background-position: center;
	background-color: #ab2a74;
	}
	
	
#page-name-box {

	float: left;
	font-family: 'Arimo' !important;
font-size: 12px;
line-height: 20px;
font-style: normal;
font-weight: 400;
color: #383838;
padding: 3px 6px 0px 8px;
	}
	
	
#page-name-box:hover {
color: #000;
	}
	
#page-name-box-new {

	float: left;
	font-family: 'Arimo' !important;
font-size: 12px;
line-height: 20px;
font-style: normal;
font-weight: 500;
color: #fff;
padding: 3px 6px 0px 8px;
	}
	
	
#page-name-box-new:hover {

	}
	
	
#page-name-wrapper {
	width: 175px;
	height: 28px;
	border: solid 1px #b9b9b9;
	}

#page-name-wrapper:hover {
	background-color: #e2f5ff;
	}

#page-name-wrapper-new {
	width: 175px;
	height: 28px;
	border: solid 1px #b9b9b9;
	background-color: #c83087;
	}

#page-name-wrapper-new:hover {
	background-color: #ab2a74;
	}
	
#newpage-drag-arrow {
	height: 31px;
	background-image: url(/images/newpage-drag-arrow.png);
	background-repeat: no-repeat;
	background-position: center;
}

#add-page-button {
	width: 30px;
	height: 30px;
	background-image: url(/images/button-simple-add.png);
	background-repeat: no-repeat;
	background-position: center;
	background-color: #fff;
	}

#add-page-button:hover {
background-image: url(/images/button-simple-add-hover.png);
}

#add-page-text {
	font-family: 'Arimo' !important;
font-size: 15px;
line-height: 20px;
font-style: normal;
font-weight: 500;
color: #167fb6;
}

#add-page-text:hover {
color: #0b2c3d;
}


/* PAGE LAYOUT */

#divider-960 {
	width: 960px;
	height: 20px;
	background-image: url(/images/layout-960-divider.png);
	background-repeat: no-repeat;
	background-position: center;
	padding-top: 40px;
	}

#layout-left-button {
	width: 81px;
	height: 200px;
	background-image: url(/images/layout-left-button-off.png);
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#layout-left-button:hover {
background-image: url(/images/layout-left-button-hover.png);
}


#layout-right-button {
	width: 81px;
	height: 200px;
	background-image: url(/images/layout-right-layout-off.png);
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

#layout-right-button:hover {
background-image: url(/images/layout-right-layout-hover.png);
}

#layout-center-options {
width: 555px;
height: 200px;
float: left;}

#upload-image {
	width: 64px;
	height: 64px;
	background-image: url(/images/button-upload-image-off.png);
	background-repeat: no-repeat;
	background-position: center;
}

#upload-image:hover {
background-image: url(/images/button-upload-image-hover.png);
}

/* LAYOUT COLUMNS */

#column {
background-image: url(/images/stripe-repeating-bg.png);
border: 1px solid #cacaca;
margin: 2px;
float: left;
}

#column:hover {
background-image: url(/images/stripe-repeating-bg-hover.png);
}

.column-1 {
width: 84px;
height: 200px;
}

.column-2 {
width: 84px;
height: 160px;
}


/* OTHER ITEMS */

#pages-header {
	background-color: #e95300;
	width: 100%
	height: 40px;
	}

#color-border {
	width: 100%
	height: 32px;
	background-image: url(/images/color-strip.png);
	background-repeat: repeat-x;
	background-position: center;
	
	}
#slide_down {
	width: 100%;
	background: white;
	border-bottom: 10px solid black;
	}
	
#white_wrapper {
	width: 960px;
	margin-left: auto;
    margin-right: auto;
    Padding: 25px 25px 25px 25px;
}