@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}
body { line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
/* End of Reset CSS **********************************************************/

html { height:100%;}
body { width:100%; height:100%; background: #FFF;}
body, input, td, select, textarea { font-family: 'Open Sans', sans-serif; font-size:14px; color:#000; line-height:1.2em;}
strong, b { font-weight: bold;}
em {font-style: italic;}

/* general styles */
.hidden { display: none; }
.btn { cursor: pointer; }
.cleaner { height:1px; clear:both; float:none;}

/* top */
#top { background:#FFF; }
#logo { float:left; margin:15px; width:150px; height:60px; background:url(../img/logo_reflex.png) no-repeat;}

#toolbar { float:right; margin:6px 2% 6px 0; position: relative;}
#bottombar { margin:24px 0 24px 0; text-align:center; }
.preview #toolbarFile { display: none;}
#toolbarView { clear:left; }
#toolbar .lbl { float: left; margin: 6px 10px 0 10px; width:48px; color:#b9148c; font-weight:bold;}
#toolbar .btn, #bottombar .btn { float: left; margin: 6px 10px 0 10px; color:#008faf;  font-weight:bold; }
#toolbar .btn:before, #bottombar .btn:before { display:block; float:left; text-align:center; height: 24px; width:24px;  margin:-4px 0px 0 0px;
	font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 16px; line-height: 24px; text-transform: none;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
	}
#bottombar .btn {float:none;}
#showFullScheme { display:none;}
#showFullScheme:before { content:"\E8F0"; }
#disclaimer {display: none; margin: 3em 12px 1em 12px;}
#disclaimer span {display: inline-block; clear: left; text-align: left; font-size: 0.8em; font-style: italic; max-width: 700px;}
#disclaimer span:before {content:""; background: url(../img/Flag_of_Europe.svg) top/100% no-repeat; float:left; display: inline-block; width: 12%; padding: 4% 0; margin: 3px 2% 0px 0px;}

.loadBtn:before { content:"\E2C4"; }
.saveBtn:before { content:"\E2C6"; }
.resetBtn:before { content:"\E042"; }

#fullView:before { content:"\E8EF"; }
#commentsView:before { content:"\E8ED"; }
#compactView:before { content:"\E8EE"; }
.comments #fullView, .compact #fullView { opacity: 0.7; color:#666; font-weight:normal;}
body:not(.comments) #commentsView { opacity: 0.7; color:#666; font-weight:normal;}
body:not(.compact) #compactView { opacity: 0.7; color:#666; font-weight:normal;}

/* load/save toolbar */
.fileDialog { position:absolute; display:block; width:87%; top:28px; left: 3%; padding: 5% 5% 1% 5%; background:#eaeaea; border:solid 1px #999; border-radius:3px; z-index: 4000; }
.fileDialog input { width: 98%; margin-bottom:12px; }
#toolbar .fileDialog .btn { float:none; margin:0 0 12px -6px;}
.fileDialog .message p { margin-bottom:8px;}
.fileDialog .message { margin-bottom:12px;}
.fileDialog .error { color:#900; }
#saveDialog input { cursor:text;}
#saveDialog h3 {font-weight: bold; border-top: #999 1px solid; padding-top: 12px; margin: 14px 0px;}
#saveDialog .note {font-size: 0.8em; margin: 14px 0px;}

#headline { background:#333; color:#FFF; text-align:center; padding:20px 0px; display: table; width: 100%;}

#backToInitialWrap, #headlineWrap, #headlineEditWrap {display: table-cell;}
#backToInitialWrap, #headlineEditWrap {width: 120px; padding: 0px 15px 0px 5px;}

#headline h1 { font-size:1.4em; font-weight:bold; line-height:1.5em;}
#headline h2 { font-size:1.2em; font-style:italic; line-height:1.3em;}
#headline input { width:90%; border:none; background: rgba(255,255,255,0.1); color:#FFF; font-size:1.2em; font-weight:bold; text-align:center; padding: 2px; }
#headline.editing h1 {display:none;}
#headline:not(.editing) input {display:none;}
#headlineEdit { float:right; }
	.preview #headlineEdit { display:none;}

/* view modes */
.preview #groups .btn, .preview .unusedContainer { display: none;}
.compact .moduleComment, .compact .description { display: none;}
.comments .description { display: none;}

.initial #showFullScheme, .singleGroup #showFullScheme {display: inline-block; }
.initial #disclaimer {display: block;}
.initial #backToInitial {display: none;}

/* group styles */
#career { background-color: #309d55;}
	.singleGroup:not(.career) #career {display: none;}
	#career .module {border-color: #309d55;}
	#career .moduleName { color: #309d55;}
	#career .unusedContainer .moduleName {color:rgba(0,0,0,0.3);}
#academic { background-color: #bf4b44;}
	.singleGroup:not(.academic) #academic {display: none;}
	#academic .module {border-color: #bf4b44;}
	#academic .moduleName { color: #bf4b44;}
	#academic .unusedContainer .moduleName {color:rgba(0,0,0,0.3);}
#company { background-color: #6f375a;}
	.singleGroup:not(.company) #company {display: none;}
	#company .module {border-color: #6f375a;}
	#company .moduleName { color: #6f375a;}
	#company .unusedContainer .moduleName {color:rgba(0,0,0,0.3);}
#mobility { background-color: #F2C100;}
	.singleGroup:not(.mobility) #mobility {display: none;}
	#mobility .module {border-color: #F2C100;}
	#mobility .moduleName { color: #F2C100;}
	#mobility .unusedContainer .moduleName {color:rgba(0,0,0,0.3);}
#networking {	background-color: #76cccf;}
	.singleGroup:not(.networking) #networking {display: none;}
	#networking .module {border-color: #76cccf;}
	#networking .moduleName { color: #76cccf;}
	#networking .unusedContainer .moduleName {color:rgba(0,0,0,0.3);}
.groupContainer { width:19%; padding:0.5%; float:left;}
	.initial .groupContainer { width:97%; padding:1.5%; float: none; cursor:pointer; }
	.initial .groupContainer:hover {opacity:0.8;}
	.initial .groupContainer h2 { max-width: 700px; margin-left:auto; margin-right:auto;}
	.initial .groupContainer .groupDescription { max-width: 700px; margin-left:auto; margin-right:auto;}
	.singleGroup .groupContainer { width:97%; padding:1.5%; float: none; }
	.singleGroup .groupContainer h2 { max-width: 700px; margin-left:auto; margin-right:auto;}
	.singleGroup .groupContainer .groupDescription { max-width: 700px; margin-left:auto; margin-right:auto;}
	.singleGroup .dragWrapper { max-width: 700px; margin-left:auto; margin-right:auto;}
.groupContainer h2 { color:#FFF; font-weight:bold; text-transform:uppercase; margin-bottom:10px;}
.groupDescription { color:#FFF; font-size: 1em;	margin-bottom: 10px;}
.groupToolbar { float:right; color:#FFF; }
	.initial .groupToolbar { display:none;}

/* drag and drop containers */
.dragWrapper {border-radius:8px 8px 8px 8px; overflow: hidden;}
	.initial .dragWrapper {display: none;}
.dragContainer { padding:1px 0;	min-height:30px;}
.usedContainer { background-color: #FFF; color:#000; } /*rgba(0,0,0,0.5);*/
	.preview .usedContainer { min-height:0px;}
.tentativeContainer { background-color: rgba(255,255,255,0.8); }
	.preview .tentativeContainer { min-height:0px;}
.unusedContainer { background-color: rgba(255,255,255,0.7); color:rgba(0,0,0,0.2); }

/* stars in empty containers */
.usedContainer:empty:before, .tentativeContainer:empty:before, .unusedContainer:empty:before {  display: block; text-align:center; height: 24px; margin-top: 3px;  opacity: .2;
	font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; text-transform: none;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; 
}
.usedContainer:empty:before { content:"\E838"; }
.tentativeContainer:empty:before { content:"\E839"; }
	.preview .tentativeContainer:empty, .preview .usedContainer:empty { padding: 0; }
	.preview .tentativeContainer:empty:before, .preview .usedContainer:empty:before { content:""; height: 0px; margin-top: 0px; }
.unusedContainer:empty:before { content:"\E83A"; opacity: .3}

.usedContainer .moduleToolbar .usedBtn { display: none;}
.tentativeContainer .moduleToolbar .tentativeBtn { display: none;}
.unusedContainer .moduleToolbar .unusedBtn { display: none;}

/* modules */
.module {	border:1px solid; padding: 10px; margin: 5px; border-radius:4px;
					cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;}
.preview #groups .module { cursor: auto;}

.moduleName { font-weight: bold; }
.moduleName:before { content: "\E838"; display: block; float: left; margin-top: -2px; width: 24px; height: 20px;
	font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; text-transform: none;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
}
	.tentativeContainer .moduleName:before { content: "\E839"; }
	.unusedContainer .moduleName:before { content: "\E83A";  }
.moduleName span { cursor:text; word-wrap: break-word;}
.moduleName input { width: 80%; border: none; background: none; font-size: 1em; font-weight:bold; color:inherit;}
.moduleName input:focus { background: rgba(0,0,0,0.1);}
	.moduleName.editing span { display:none;}
	.moduleName:not(.editing) input { display:none;}

.moduleDescription  { font-size: 0.8em; margin-top:5px; font-style: italic;}
.moduleDescription span { cursor:text; word-wrap: break-word;}
.moduleDescription textarea { width: 100%; height: 3em; resize: none; border: none; background: none; font-size: 1em; }
.moduleDescription textarea:focus { background: rgba(0,0,0,0.1);}
	.moduleDescription.editing span { display:none;}
	.moduleDescription:not(.editing) textarea { display:none;}

.moduleComment { margin-top: 5px; font-size: 0.8em; min-height:11px; clear:both;}
	.preview .moduleComment { min-height:0px; }
.moduleComment .commentArea { padding-right: 26px;}
.moduleComment:not(.noComment) .addBtn { display: none; }
.moduleComment.noComment .commentArea, .moduleComment.noComment .editBtn, .moduleComment.noComment .removeBtn, .moduleComment.noComment .commentText { display: none; }
.moduleComment textarea { display: none;}

.commentText { word-wrap: break-word;}
.commentText a { color:#008faf; text-decoration:underline; }
.commentText a:hover { text-decoration:none;}
	.editing .commentText, .editing .editBtn {	display: none;}

.module, .gu-mirror { transition: opacity 0.4s ease-in-out;}
.gu-mirror { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing;}

.moduleToolbar { float:right;  }
.iconBtn { display:block; float:left; opacity: 0.7; height: 24px;}
.iconBtn:before { display:block; float:left; text-align:center; height: 24px; width:24px; opacity: .5;  margin:-4px -4px 0 4px;
	font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 16px; line-height: 24px; text-transform: none;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';
}
.iconBtn:not(:empty):before { margin-right: 2px;}

/* buttons */
.addBtn:before { content:"\E150"; }
.editBtn:before { content:"\E150"; }
.removeBtn:before { content:"\E14C"; }
.backBtn:before { content:"\E5C4"; }
#backToInitial:before { content:"\E8E9"; }

.groupToolbar .addBtn { opacity:0.9; }
.groupToolbar .addBtn:before { content:"\E147"; }
.moduleComment .addBtn { margin:-4px -4px 0 -4px; }
.moduleComment .editBtn { float:right; }
.moduleComment .removeBtn { float:right; }
.moduleToolbar .removeBtn:before { content:"\E15C"; }
.moduleToolbar .usedBtn:before { content:"\E838"; }
.moduleToolbar .tentativeBtn:before {content:"\E839"; }
.moduleToolbar .unusedBtn:before { content:"\E83A"; }

.gu-mirror .addBtn, .gu-mirror .removeBtn { display:none;}

/* responsive */

@media screen and (max-width: 1200px) {
	.groupContainer { width:30.33%; padding:1.5%}
	.groupContainer:nth-child(3n+1) { clear:left; }
}

@media screen and (max-width: 800px) {
	.groupContainer { width:46%; padding:2%}
	.groupContainer:nth-child(3n+1) { clear:none; }
	.groupContainer:nth-child(3) { clear:left; }
}
@media screen and (max-width: 600px) {
	.iconBtn, #toolbar .btn { text-indent:-1000px;}
	.iconBtn:before, #toolbar .btn:before { text-indent:0px;}
	.fileDialog { width:85%; left: 5%;}
	#toolbar .fileDialog .btn { text-indent:0px;}
	#backToInitialWrap, #headlineEditWrap {width: 32px; padding: 0px 15px 0px 5px;}
}
@media screen and (max-width: 480px) {
	#headline h1 { font-size:1.2em;}
	.groupContainer { width:92%; padding:4% 6% 4% 2%;}
	.singleGroup .groupContainer { width:92%; padding:4% 6% 4% 2%; float: none; }
	.preview .groupContainer { width:96%; padding:4% 2%;}
	#logo { margin:10px;}
	#toolbar { float:left; clear:left; margin:4px 0 4px 0; }
}