@charset "UTF-8";

@import url("https://fonts.googleapis.com/css?family=Amaranth:400,700");

@viewport {
	width: device-width;
}

/*
@import url(https://fonts.googleapis.com/css?family=Amaranth:400,700);
*/

/* EMP color ref						becomes DUT color ref
EMP red				color: #cd1c00;  
EMP yellow light	color: #ffe3b2		becomes almost white:	#fafafa; 
EMP yellow 			color: #ffe680		becomes light gold: 	#f3f1e9;
EMP yellow orange	color: #ffb510;		becomes light gold: 	#f0ede3  that's the main color;
EMP light grey  	color: #cdcdcd; 
EMP dark grey		color: #999;
										DUT dark gray for palettes: #777777;
										DUT blue for text: color: #459bd2 / c70 m25;
										DUT light blue for palette selected color: #92cff8
*/


html {
	background-color: #000;
}

html, body {
	margin: 0 ;
	padding: 0 ;
	text-align: center;
}

body {
}

h1, h2 {
	font-family:  'Amaranth',Verdana, Tahoma, Geneva, sans-serif;
	font-weight: bold;	
	line-height: 1.25em;
	color: #459bd2;
}

h3, h4, h5, p, a, ol, label{
	font-family:  'Amaranth',Verdana, Tahoma, Geneva, sans-serif;
	font-weight: normal;
	line-height: 1.3em;
	color: #000000;
}

h2 {
	font-size: 1.2em;
}

h3 {
	font-size: 1.075em;
}

p {
	margin: 0;
}

#headline h1 {
	line-height: 0.8em;
}

#vignettes li {
	line-height: 1.3em;
}

* { outline: none; } /* removes blue line over links, and all elements */

a {	text-decoration: none;}
a:link {color:#cd1c00;}    /* unvisited link */
a:visited {color:#cd1c00;} /* visited link */
a:hover {color:#92cff8;}   /* mouse over link */
a:active {color:#cdcdcd;}  /* selected link */

ul {
	padding:0;
	margin:0;
	list-style-type: none;
}

hr {  
height: 1px;
background-color:#999;
color:#999;
border: 0 none;
margin: 0 auto;
}

iframe {
  border: none;
}

.bold {
	font-weight: bold;	
}

/* ----- WRAPPER ----- */
 
#wrapper {
	background-color:#000;
	margin:0 auto;
}

/* ----- TOP + FOOTER ----- */

#top, #footer{
	max-width: 80%;
	background-color: #fff; 
	border-radius: 20px;
	border: 10px solid #FFF; 
}

/* ----- End TOP + FOOTER ----- */




/* ----- TOP = HEADER + NAVIGATION ----- */

#top{
	padding: 0;
	margin: .5em auto -15px auto;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-width: 0;
}

/* ----- HEADER (logo) ----- */

#header {
}

#header img {
/*	background-color: aquamarine; */
	margin: 0px auto 6px auto;
    max-width: 90%;
    height: auto;
    width: auto\9; /* ie8 */
}


/* ----- NAVIGATION (menu) ----- */

#navigation {
	background-color: #999999;
			/*	background GRADIENT */	
		background: -webkit-linear-gradient(left, #999999, #cdcdcd , #999999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #999999, #cdcdcd , #999999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #999999, #cdcdcd , #999999); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #999999, #cdcdcd , #999999); /* Standard syntax (must be last) */
	
	min-height: 1.8em;	
	margin: 0;
	border-radius: 20px; 
}

#navigation ul {
    overflow: hidden; 
	padding: 6px 2px; 
	text-align: center ; 
}

#navigation ul li {
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing:.125em;
	color: #FFF;
	display: inline;	
}

#navigation ul li a {
	text-decoration: none;
	text-decoration: none;
    padding: 14px 16px;
	color: #FFF;
	border-radius:18px;
}

#navigation ul li a:hover {
	color: #459bd2;
	background-color: #f0ede3;
		/*	background GRADIENT */	
	background-image: -webkit-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Safari */
	background-image: -o-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Opera 11.6 to 12.0 */
	background-image: -moz-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Firefox 3.6 to 15 */
	background-image: radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Standard syntax, must come last */	
	border-radius: 2.05em;
}

#navigation ul li a:active {
	color: #f0ede3;
	background-color: #FFF;
	background-image: none;
	border-radius: 2.05em;
}

/* ----- END of TOP ----- */



#content {
	min-height: 120px;
	max-width: 96%;
	float: none;
	padding: 0;
	margin: 15px auto;
	
}

#maincontent {
	padding: .5em;
	border-radius: 20px;
	border: 10px solid #FFF;
	background-color: #f0ede3; /* if gradient is not supported */

	/*	background GRADIENT */	
	background-image: -webkit-radial-gradient(ellipse at top, #fafafa, #f0ede3); /* Safari */
	background-image: -o-radial-gradient(ellipse at top, #fafafa, #f0ede3); /* Opera 11.6 to 12.0 */
	background-image: -moz-radial-gradient(ellipse at top, #fafafa, #f0ede3); /* Firefox 3.6 to 15 */
	background-image: radial-gradient(ellipse at top, #fafafa, #f0ede3); /* Standard syntax, must come last */

}

.panel {
	margin: 5px;
	background-color: #FFF;
	border-radius: 20px;
	border: 10px solid #FFF;	
}

#video iframe {
	padding: 0;
	margin: 15px auto;
	border-radius: 20px;
	border: 10px solid #000;
}

#faq, #gettingstarted {
	text-align:justify;
	margin: 0 20%;
}

.text {
	text-align:justify;
	margin: 0 25px;
}

#gettingstarted {
	text-align: center;
}

#gettingstarted img, #gettingstarted .Q, #gettingstarted .A {
	margin: 0.25em 0 0 0;
	padding: 0;
}

.Q {
	color: #cd1c00; 
}

#faq .Q {
	font-style:italic;
	font-weight: bold;
	padding: 1.5em 0 0.7em 0;
}

#faq .A {
	margin: -10px 0 0 0;
}


#thankyou {
	min-height: 500px;
}

#faq ul {
	
}

#warning {
	max-width: 350px;
	background-color: #fff; 
	border-radius: 20px;
	border: 10px solid #cd1c00; 
	text-align: center;
	padding: 0 0 10px 0; 
	margin:0 auto;
}

.BoxShadow {	
	border-radius: 20px;
	border: 10px solid #cd1c00; 
	box-shadow:0px 15px 60px -10px #000;
}

/* USER MANUAL and TABLE OF CONTENTS */

#TableOfContents li {
	font-weight: bold;
}

#TC_left {
	float: left;
  	width: 30%;
	padding-left: 20%;
}

#TC_right {
	float: right;
  	width: 30%;
	padding-right: 20%;
}

#TC_bottom {
	clear: both ;
}

#TableOfContents a {	text-decoration: none; font-weight: bold;}
#TableOfContents a:link {color:#000000;}    /* unvisited link */
#TableOfContents a:visited {color:#000000;} /* visited link */
#TableOfContents a:hover {color:#cd1c00;}   /* mouse over link */
#TableOfContents a:active {color:#cd1c00;}  /* selected link */

.Section p a {	text-decoration: none; font-weight: bold;}
.Section p a:link {color:#666666;}    /* unvisited link */
.Section p a:visited {color:#666666;} /* visited link */
.Section p a:hover {color:#cd1c00;}   /* mouse over link */
.Section p a:active {color:#cd1c00;}  /* selected link */

/* #UM_FundamentalConcepts, #UM_EnterText, #UM_UploadImage, #UM_PositionImage, #UM_PositionText, #UM_UploadLogo, #UM_ApplyImageFilter, #UM_AdditionalTips, #UM_FinalSteps, #UM_OrderPDF */
.Section {
	max-width: 720px;
	background-color: #fff; 
	border-radius: 20px;
	border: 10px solid #FFF; 
	margin:0 auto;
}

.screenshotresize {
	max-width:93%;
}
	
	

/* GRID TEMPLATES */

#vignettes_container {
	max-width: 720px;
	background-color: #fff; 
	border-radius: 20px;
	border: 10px solid #FFF; 
	margin:0 auto;
}

#select_style {
	padding:1em 0;
	margin: 0;
}

#select_style h3 {
	vertical-align: middle;
	display: inline;
}

#select_style select {
	vertical-align: middle;
	padding: 0;
	margin: 0 0 1px 0;
}

#vignettes {
	}

#vignettes ul {
/*	padding-top: 11px; */
	padding-bottom: 0;
	text-align: center; 
}

#vignettes ul li {
	display: inline-block;
	float: none; 
	width: 204px;
	margin: 15px;
}

#vignettes ul li.line {
	border-top: solid 1px #999;
	width: 100%;
 	margin: 0 auto ;
}

#vignettes ul li.headshotvignette {
	width: 249px;
}

#vignettes img {
	border: 1px solid #000;
	margin:  5px;
}

.noborder {
	border: none;
}

.thumbnail  {
	z-index: 2;
}


span.text-content {
  	background-color: rgba(69,155,210,0.65); 
	
		/*	background GRADIENT */	
	background-image: -webkit-radial-gradient(ellipse at top, rgba(255,255,255,0.5), rgba(69,155,210,0.65)); /* Safari */
	background-image: -o-radial-gradient(ellipse at top, rgba(255,255,255,0.5), rgba(69,155,210,0.65)); /* Opera 11.6 to 12.0 */
	background-image: -moz-radial-gradient(ellipse at top, rgba(255,255,255,0.5), rgba(69,155,210,0.65)); /* Firefox 3.6 to 15 */
	background-image: radial-gradient(ellipse at top, rgba(255,255,255,0.5), rgba(69,155,210,0.65)); /* Standard syntax, must come last */


  	border: 1px solid #459bd2; 
	position: relative; /* need this for z-index to work */
 	color: white;
  	display: table; /* for text to appear centered on top of image */
  	height: 296px;
  	opacity: 0;
  	margin: -309px 5px 5px 5px;
	z-index: 3;
}

li:hover .text-content {
  	opacity: 1; 
} 
 
span.text-content span {
  	display: table-cell;
  	text-align: center;
  	vertical-align: middle;
}

#vignettes h3 {
	text-transform: uppercase;
/*	letter-spacing:.125em; */
	font-size: 1.075em; 
	padding-top: 3px;
/*	color: #000; */
}

#vignettes ul li h3, #vignettes ul li p {
	margin: 0; 
	line-height: 1.15em;
} 

#vignettes .description_title {
	color: #f0ede3;
	padding-bottom: 10px;
	text-shadow:0px 3px 10px #000;  
	float: left;
  	width: 192px;
  	font-style: normal;
  	text-transform: uppercase;
}
#vignettes .description {
	font-size: 0.8em; 
	line-height: 1.3em;
	float: left;
  	width: 169px;
	padding: 1em 0.5em 1em 0.5em;
	margin: 5px;
	color: #FFF;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	text-shadow:0px 3px 10px #000;
}

#vignettes .description_title.headshotvignette {
	width: 237px;
}

#vignettes .description.headshotvignette {
  	width: 214px;
}



/* button "GO" */
.go {
	font-size: 0.8em; 
	text-transform: uppercase;
	letter-spacing: 0.125em;
	border-radius: 2.05em;
	margin:0 auto;
	padding: 5px;
}

#vignettes .go { 
	color: #000;
	margin:0 auto;
	padding: 5px;
	width:60px;
		background-color: #999;
	/*	background GRADIENT */	
	background-image: -webkit-radial-gradient(ellipse at top, #FFF 5%, #e5e5e5 30%, #999 80%); /* Safari */
	background-image: -o-radial-gradient(ellipse at top, #FFF 5%, #e5e5e5 30%, #999 80%); /* Opera 11.6 to 12.0 */
	background-image: -moz-radial-gradient(ellipse at top, #FFF 5%, #e5e5e5 30%, #999 80%); /* Firefox 3.6 to 15 */
	background-image: radial-gradient(ellipse at top, #FFF 5%, #e5e5e5 30%, #999 80%); /* Standard syntax, must come last */

}

.start {
	width:150px;
	margin:0 auto;
	background-color: #FFF;
	border-radius: 20px;
	border: 10px solid #FFF;	
}

.start .go {
	color: #FFF;
	background-color: #cd1c00;
	/*	background GRADIENT */	
	background-image: -webkit-radial-gradient(ellipse at top, #f89e0e 5%, #f0870b 10%, #cd1c00 40%); /* Safari */
	background-image: -o-radial-gradient(ellipse at top, #f89e0e 5%, #f0870b 10%, #cd1c00 40%); /* Opera 11.6 to 12.0 */
	background-image: -moz-radial-gradient(ellipse at top, #f89e0e 5%, #f0870b 10%, #cd1c00 40%); /* Firefox 3.6 to 15 */
	background-image: radial-gradient(ellipse at top, #f89e0e 5%, #f0870b 10%, #cd1c00 40%); /* Standard syntax, must come last */

	
}

#vignettes .go:hover, .start .go:hover {
	color: #FFF;
	background-color: #f0ede3;
	/*	background GRADIENT */	
	background-image: -webkit-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Safari */
	background-image: -o-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Opera 11.6 to 12.0 */
	background-image: -moz-radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Firefox 3.6 to 15 */
	background-image: radial-gradient(ellipse at top, #fafafa 5%, #f3f1e9 10%, #f0ede3 75%); /* Standard syntax, must come last */

}

#vignettes .go:active, .start .go:active {
	color: #f0ede3;
	background-color: #FFF;
	background-image: none;
}






.space {
	height: 2em;
	clear:both;
}



#bottom {
}

#footer {
	padding: 1px 0 0 0;
	margin: -15px auto 1% auto ;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-top-width: 0px;
}

#footer p {
	font-size: 0.7em;
	color: #999;
	margin: 0;
}

#footer a {
	color: #999;
	} 
#footer a:hover {
	color: #cdcdcd;
	}   
	
	
/* FONTS_preload page */
#font_preload .placeholder {
	margin: 0.25em 0px 0px 0px;
/*	font-size: 14px; */
}

/* IPAD? 
#font_preload .categorie {
	background-color: #FFFFFF;
	font-size: 14px; 
	text-transform: uppercase;
	margin: 5px 15% 0px 15%;
	border-radius: 10px;
}
*/
	

	
/* ANIMATION HEADLINE */


#headline
{
/*background:#000;*/
color:#000;
font-size: 1.075em;
position:relative;
text-align:center;
-webkit-animation:animtext 0.5s; /* Chrome, Safari, Opera */
animation:animtext 0.5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animtext {

0%   {color: #FFF; left:0px; top:-70px; font-size: 1.075em; letter-spacing:-10px;
text-shadow: 0px 0px 25px #FFF;}

40% {color: #FFF; left:0px; top:5px;	font-size: 1.075em; letter-spacing:-7px;
text-shadow: 0px 0px 25px #FFF;}

60% {color: #000; left:0px; top:-2px;	font-size: 1.075em; letter-spacing:2px;
text-shadow: 0px 0px 25px #FFF;}

80% {color: #000; left:0px; top:1px;	font-size: 1.075em; letter-spacing:-0.5px;
text-shadow: 0px 0px 25px #FFF;}

100% {color:#000; left:0px; top:0px;	font-size: 1.075em; letter-spacing:0px;
text-shadow: 0px 0px 25px #FFF;}
}



/* Standard syntax */
@keyframes animtext {

0%   {color: #FFF; left:0px; top:-70px; font-size: 1.075em; letter-spacing:-10px;
text-shadow: 0px 0px 25px #FFF;}

40% {color: #FFF; left:0px; top:5px;	font-size: 1.075em; letter-spacing:-7px;
text-shadow: 0px 0px 25px #FFF;}

60% {color: #000; left:0px; top:-2px;	font-size: 1.075em; letter-spacing:2px;
text-shadow: 0px 0px 25px #FFF;}

80% {color: #000; left:0px; top:1px;	font-size: 1.075em; letter-spacing:-0.5px;
text-shadow: 0px 0px 25px #FFF;}

100% {color:#000; left:0px; top:0px;	font-size: 1.075em; letter-spacing:0px;
text-shadow: 0px 0px 25px #FFF;}
}