/* ************************************
      CSS QUICK THEME TOOLS
************************************** */

.rounded-small {}
.rounded-normal {}
.rounded-big {}
.rounded-huge {}

/* positions */

.resonsive {width:100%;height:auto;}
.center {}
.middle {}
.left {}
.right {}
.top {}
.bottom {}

/* animate  */
.animate {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.smooth {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* clearfix */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix { display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

.inlineblock { display: inline-block;}
.block { display: block;}

/* boxes */
.darkbox {
	background: #161616;
	margin: 0;
	color: silver;
	padding: 5px;
}
.darkbox h2, .darkbox h3, .darkbox h4, .darkbox b, .darkbox strong { color:white;}

.graybox {
	background: #404040;
	margin: 0;;
	color: silver;
	padding: 5px;	
}

.lightgraybox {
	background: #7f7f7f;
	margin: 0;
	color: silver;
	padding: 5px;
}


.whitebox {
	background: #fff;
	margin: 0;
	border:1px solid #d4d5d5;
	padding: 5px;
}

/* gradients  */
.gray-gradient {
	background: -webkit-linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	background: -moz-linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	background: -o-linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	background: -ms-linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	background: linear-gradient(top, #f4f5f7 0%,#e1e2e6 90%,#cfd1d4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f5f7', endColorstr='#cfd1d4',GradientType=0 );
	border: 1px solid #949494;
	-webkit-box-shadow: inset 0px 1px 0px #fff, 0px 1px 1px rgba(0,0,0,.15);
	-moz-box-shadow: inset 0px 1px 0px #fff, 0px 1px 1px rgba(0,0,0,.15);
	box-shadow: inset 0px 1px 0px #fff, 0px 1px 1px rgba(0,0,0,.15);
	-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;
}


.darker-gradient {
	background: rgba(43,43,43,1);
	background: -moz-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(43,43,43,1)), color-stop(100%, rgba(22,22,22,1)));
	background: -webkit-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	background: -o-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	background: -ms-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	background: linear-gradient(to bottom, rgba(43,43,43,1) 0%, rgba(22,22,22,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#161616', GradientType=0 );
}



.dark-gradient {
	background: rgba(43,43,43,1);
	background: -moz-linear-gradient(top, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(75,75,75,1)), color-stop(100%, rgba(43,43,43,1)));
	background: -webkit-linear-gradient(top, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	background: -o-linear-gradient(top, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	background: -ms-linear-gradient(top, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	background: linear-gradient(to bottom, rgba(75,75,75,1) 0%, rgba(43,43,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#161616', GradientType=0 );

}

.dark-gradient {color: silver;}
.dark-gradient a, .dark-gradient a:visited , .dark-gradient a:active { color:silver !important;}
.dark-gradient a:hover{ color:white !important;}

button.dark-gradient {color:silver;}
button.dark-gradient:hover { color:white;}


.dark-gradient2 {
	background: rgba(43,43,43,1);
	background: -moz-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(43,43,43,1)), color-stop(100%, rgba(75,75,75,1)));
	background: -webkit-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	background: -o-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	background: -ms-linear-gradient(top, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	background: linear-gradient(to bottom, rgba(43,43,43,1) 0%, rgba(75,75,75,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#161616', GradientType=0 );
}


.darker-gradient2 {
	background: rgba(22,22,22,1);
	background: -moz-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(22,22,22,1)), color-stop(100%, rgba(43,43,43,1)));
	background: -webkit-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	background: -o-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	background: -ms-linear-gradient(top, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	background: linear-gradient(to bottom, rgba(22,22,22,1) 0%, rgba(43,43,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#161616', GradientType=0 );
}

.dark-gradient2 {color: silver;}
.dark-gradient2 a, .dark-gradient2 a:visited , .dark-gradient2 a:active { color:silver !important;}
.dark-gradient2 a:hover{ color:white !important;}

button.dark-gradient2 {color:silver;}
button.dark-gradient2:hover { color:white;}


.blue-gradient {
	background: #7abcff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzYwYWJmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDk2ZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-8 */

}

.red-gradient {
	background: #ff3019; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNmZjMwMTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2YwNDA0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  #ff3019 46%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(46%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff3019 46%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff3019 46%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff3019 46%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff3019 46%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-8 */

}



/* quick tools for paddings and margins */
.padding {padding: 5px;}
.padded {padding: 5%;}

.no-padding {padding:0;}
.no-margin {margin:0;}

/* BOX STYLES */
.rounded {border-radius: 6px;padding: 5% 5%;}
.space {margin-top: 10px;margin-bottom: 10px;}
.space-top {margin-top: 10px;margin-bottom: 0px;}
.space-bottom {margin-top: 0px;margin-bottom: 10px;}
.big-space {margin-top: 20px;margin-bottom: 20px;}
.padding{ padding:5%;}
.shadow {
	-moz-box-shadow:2px 2px 1px rgba(50, 50, 50, 0.75);
	-webkit-box-shadow:2px 2px 1px rgba(50, 50, 50, 0.75);
	box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.75);
}

.bigshadow {
	-webkit-box-shadow: 0px 5px 29px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 5px 29px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 5px 29px 0px rgba(50, 50, 50, 0.75);
}

.hugeshadow {
	-webkit-box-shadow: 0px 14px 40px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 14px 40px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 14px 50px 0px rgba(0,0,0,0.75);
}


/************************
/* theme colors  - must be bottom of CSS to be overrides : todo -> should prob imported LAST
************************ */
.text-black {color:#161616;}
.text-dark {color:#404040;}
.text-gray {color: #4b4b4b;}
.text-light {color:#7f7f7f;}
.text-white {color:white;}
.text-red {color:red;}
.text-blue {color:#00abeb;}
.text-orange {color:#fb9600;}
.text-green {color:#37c229;}


.text-black {color:#161616;}
.text-dark {color:#404040;}
.text-gray {color: #4b4b4b;}
.text-light {color:#7f7f7f;}
.text-white {color:white;}
.text-red {color:red;}
.text-blue {color:#00abeb;}
.text-orange {color:#fb9600;}
.text-green {color:#37c229;}

.text-shadow-white { text-shadow: 0px 2px 3px #fff;}
.text-shadow-dark { text-shadow: 0px 2px 3px #404040;}
.text-shadow-light { text-shadow: 0px 2px 3px #7f7f7f;}

.background-black {background:#161616;}
.background-dark {background:#404040;}
.background-gray {background: #4b4b4b;}
.background-light {background:#7f7f7f;}
.background-white {background:white;}
.background-red {background:red;}
.background-blue {background:#00abeb;}
.background-orange {background:#fb9600;}
.background-green {background:#37c229;}


.border-black {border:#161616 1px solid;}
.border-dark {border:#404040 1px solid;}
.border-gray {border: #4b4b4b 1px solid;}
.border-light {border:#7f7f7f 1px solid;}
.border-white {border:white 1px solid;}
.border-red {border:red 1px solid;}
.border-blue {border:#00abeb 1px solid;}
.border-orange {border:#fb9600 1px solid;}
.border-green {border:#37c229 1px solid;}


.underline-black {border-bottom:#161616 1px solid;}
.underline-dark {border-bottom:#404040 1px solid;}
.underline-gray {border-bottom: #4b4b4b 1px solid;}
.underline-light {border-bottom:#7f7f7f 1px solid;}
.underline-white {border-bottom:white 1px solid;}
.underline-red {border-bottom:red 1px solid;}
.underline-blue {border-bottom:#00abeb 1px solid;}
.underline-orange {border-bottom:#fb9600 1px solid;}
.underline-green {border-bottom:#37c229 1px solid;}


.clearline { display:block; width: 100%;}

/* font size and space */
.text-small {font-size: 0.750em;}
.text-normal {font-size: 1.000em;}
.text-large {font-size: 1.333em;}
.text-big {font-size:1.667em}
.text-huge {font-size:2.000em}

.text-spaced { text-align: justify;}
.text-upper {text-transform: uppercase;}
.text-lower {text-transform: lowercase;}
.text-capitalize {text-transform: capitalize;}
.text-spaced {text-align:justify center;text-justify:inter-word;}
.text-fill {text-align: justify;}
.text-center { text-align: center;}
.text-bold {font-weight: bold;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}


/* center positioning  */
/* todo : needs more testing */

.center {margin-right: auto;margin-right: auto;}
.right {float:right;}
.left {float:left;}

p.center {
	min-width: 60%;
	margin: 2% 20% 2% 20%;
	height: auto;
}
.center-vertical {}

section.center {flex: 1;}

article.center_old {
	min-height: 10em;
	display: table-cell;
    vertical-align: middle;
}

.auto-center {
	display: block;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

/*************
 BUTTONS child of .vdj8 to apply themed stuff
************* */

.vdj8 .button-success,
.vdj8 .button-error,
.vdj8 .button-warning,
.vdj8 .button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.vdj8 .button-success { background: #37c229; /* this is a green */}
.vdj8 .button-error { background: rgb(202, 60, 60); /* this is a maroon */}
.vdj8 .button-warning { background: #fb9600;; /* orange */}
.vdj8 .button-secondary {background: #00abeb; /* this is a light blue */}


/* ************************
	RESPONSIVE HELPERS
************************** */
.responsive {width: 100%;height:auto;}
.width-100 {width: 100% !important; }
.width-95 {width: 95% !important;}
.width-90 {width: 90% !important;}
.width-85 {width: 85% !important;}
.width-80 {width: 80% !important;}
.width-75 {width: 75% !important;}
.width-70 {width: 70% !important;}
.width-65 {width: 65% !important;}
.width-60 {width: 60% !important;}
.width-55 {width: 55% !important;}
.width-50 {width: 50% !important;}
.width-45 {width: 45% !important;}
.width-40 {width: 40% !important;}
.width-35 {width: 35% !important;}
.width-30 {width: 30% !important;}
.width-25 {width: 25% !important;}
.width-20 {width: 20% !important;}
.width-15 {width: 15% !important;}
.width-10 {width: 10% !important;}
.width-5 {width: 5% !important;}

.minwidth-100 {min-width: 100% !important; }
.minwidth-95 {min-width: 95% !important;}
.minwidth-90 {min-width: 90% !important;}
.minwidth-85 {min-width: 85% !important;}
.minwidth-80 {min-width: 80% !important;}
.minwidth-75 {min-width: 75% !important;}
.minwidth-70 {min-width: 70% !important;}
.minwidth-65 {min-width: 65% !important;}
.minwidth-60 {min-width: 60% !important;}
.minwidth-55 {min-width: 55% !important;}
.minwidth-50 {min-width: 50% !important;}
.minwidth-45 {min-width: 45% !important;}
.minwidth-40 {min-width: 40% !important;}
.minwidth-35 {min-width: 35% !important;}
.minwidth-30 {min-width: 30% !important;}
.minwidth-25 {min-width: 25% !important;}
.minwidth-20 {min-width: 20% !important;}
.minwidth-15 {min-width: 15% !important;}
.minwidth-10 {min-width: 10% !important;}
.minwidth-5 {min-width: 5% !important;}

.width-auto {width: auto !important; }
.height-auto {height: auto !important; }



.height-20px {height: 20px !important;}
.height-30px {height: 30px !important;}
.height-40px {height: 40px !important;}
.height-50px {height: 50px !important;}
.height-60px {height: 60px !important;}

/* align */
.valign-middle { vertical-align: middle;}
.valign-top { vertical-align: top;}
.valign-bottom { vertical-align: bottom;}


/* IMAGES */
img.round-corners{
	border:1px solid;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}