html,body {
			margin:10px;
			padding:0;
			font-family: serif;
			font-size: 90%;
			background-color: #EDEDE7; /*#e0d8d8;*/
		}
		
textarea {
			font-family: monospace;
			resize: none;
		}

code {
            background-color: #dedede;
			font-size: 1.0em;
		}

blockquote {
			background-color: #dedede;
			margin-left: 3em;
            font-size: 1.0em;
            /*font-family:monospace;*/
   		}
        
pre {
            background-color: #dedede;
			margin-left: 3em;
            font-size: 1.4em;
   		}		
   				
dl {
	padding: 5px;
	background-color: #ccc;
}


table tr,th,td ,thead{
	border: 1px solid #999;
}
table {
	border-collapse: collapse;
	margin-bottom: 1em;
}
thead {
	font-weight: bold;
}

button, select {
			color: black;
			border: solid #999 1px;
			font-size: 1em;
			height: 24px;
			margin: 0 0.4em 0.4em 0;
			background-color: #dacccc;
			vertical-align: middle;
			font-weight: 900;
			transition: background 300ms;
		}
button:hover,select:hover {
	background-color: #ebdddd;
}
		
button {
	padding: 0 10px;
	display: inline-block;
}


a {
	color: #428bca;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #2a6496;
	text-decoration: underline;
}

a:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
		
#switchButton  img {
			max-width: 20px;
			max-height: 20px;
		}

#tabSize {
			display: none;
			position: absolute;
			z-index: 1;
			font-family: Arial;
		}
		#tabSize table {
			border-collapse: collapse;
			cursor: pointer;
		}
		#tabSize thead {
			background-color: rgba(255,0,0,0.8);
			transition: background-color 100ms;
		}
		#tabSize thead:hover {
			background-color: rgba(0,255,0,0.8);
		}
		#tabSize td {
			width: 20px;
			height: 20px;
			border: 1px solid rgb(60, 118, 157);
			background-color: rgba(230,230,230, 0.8);
			transition: background-color 70ms;
			text-align: center;
			font-weight: 900;
		}
		
#globalPage {
			width: 100%;
		}
		
#headerContainer {
			display: block;
			width: 95%;
			margin: 1% 2.5%;
			text-align: center;
			vertical-align: middle;
		}
		
#markItUp {
			background-color: rgb(0,230,80);
		}

#switchFunc {
			background-color: rgb(0,230,80);
		}
		
#previewPane {
			background-color: #fff;
		}
		
#outputPane {
			background-color: #6c6666;
			color: #fff;
			display: none;
		}
		
#syntaxPane {
			background-color: #e6dede;
			background-color: #f7ecec;
			display: none;
		}
		
#processingTime {
			display: inline-block;
			color: #999;
			width: 3em;
			font-weight: 900;
		}

		

@media all and (min-width: 800px) {

		#pageHeader {
			margin: 0px;
			padding: 0;
			text-align: center;
			margin-bottom: 0;
			margin-top: 0.4em;
			color: #766;
		}
		
		#pageHeader h1 {
			font-size: 3em;
		}
		
		#pageHeader * {
			margin: 0;
			padding: 0;
			line-height: 1em;
			font-weight: 100;
		}

		#pageHeader a {
			color: #766;
			text-decoration: none;
			position: relative;
			z-index: 20;
		}

		#pageHeader h1 a:hover {
			color: #fff;
		}
		
		#pageHeader h4 a:hover {
			text-decoration: underline;
		}

		#panesContainer {
			position: relative;
			width: 100%;
		}
		
		#headerContainer {
			line-height: 24px;
		}
		
		#leftContainer, #rightContainer {
			width: 48%;
			display: inline-block;
			position: absolute;
		}
		
		.switch {
			-webkit-animation: changeOpacity 500ms; /* Chrome, Safari, Opera */
			animation: changeOpacity 500ms;
			transition: left 500ms;
		}
		
		#leftContainer {
			left: 1%;
			top: 0;
		}
		
		#rightContainer {
			left: 51%;
			top: 0;
		}
		
		.pane {
			margin: 0;
			padding: 0;
			width: 100%;
			background-color: #eee;
			display: block;
			border: 1px solid rgb(60, 118, 157);
		
			/* note: the panes get their height set with
		       javascript; see sizeTextAreas(). */
		
			/* for now, set a height so things look nice
			   if the user has javascript disabled */
			height: 400px;
		}

		#previewPane {
			background-color: #f3eeee;
		}
		
		#outputPane {
			background-color: #6c6666;
			color: #fff;
			display: none;
		}
		
		#syntaxPane {
			background-color: #e6dede;
			background-color: #f7ecec;
			display: none;
		}
		
		div.pane {
			overflow: auto;
			border: 1px solid rgb(60, 118, 157);
		}
		
		#inputPane {
			background-color: #fff;
			padding: 5px;
		}
		
		#previewPane {
			padding: 5px;
			
		}

		#previewPane > * {
			margin-left: 4px;
			margin-right: 4px;
   		}

		#previewPane > :first-child {
			margin-top: 4px; /* pane padding */
		}

		#previewPane * {
			line-height: 1.4em;
		}

		#previewPane pre code {
            margin-left: 0em;
			font-size: 1.0em;
		}
        
        #previewPane code {
            background-color: #dedede;
			font-size: 1.3em;
		}

		#previewPane blockquote {
			background-color: #dedede;
			margin-left: 3em;
            font-size: 1.0em;
            /*font-family:monospace;*/
   		}
        
        #previewPane pre {
            background-color: #dedede;
			margin-left: 3em;
            font-size: 1.4em;
   		}		
       
        
		#footer {
			margin: 0;
			padding: 0;
			position: relative;
			float: left;
			width: 100%;
			height: 2.5em;
			margin-top: 0.5em;
			font-family: Helvetica, Arial, Verdana, sans-serif;
			pointer-events: none;
		}
		
		#footer a {
			text-decoration: none;
			color: #666;
		}
		
		#footer a:hover {
			text-decoration: underline;
		}
		
		#byline {
			padding-left: 2em;
			color: #666;
		}
}


@media all and (max-width: 799px) {

		textarea {
			max-width: 750px;
		}
		
		button {
			width: 30px;
			height: 30px;
		}
		
		.textInButton {
			display: none;
		}
		
		#markItUp {
			background-image: url("./icone/markitup.png");
			background-size: contain;
		}
		
		#synchronizeButton {
			background-image: url("./icone/scrollSync.png");
			background-size: contain;
		}
		
		#changeButton {
			background-image: url("./icone/arrows.png");
			background-size: contain;
		}
		
		#convertTextButton {
			background-image: url("./icone/convert.png");
			background-size: contain;
		}
		
		#panesContainer {
			width: 95%;
			margin: 2.5%;
			position: relative;
		}
		
		#headerContainer {
			line-height: 30px;
		}
		
		#leftContainer, #rightContainer {
			display: block;
			position: absolute;
			width: 100%;
		}

		#leftContainer {
			left: 0;
			top: 0;
		}
		#rightContainer {
			left: 0px;
			margin-bottom: 20px;
		}
		
.switch {
			-webkit-animation: changeOpacity 500ms; /* Chrome, Safari, Opera */
			animation: changeOpacity 500ms;
			transition : top 500ms;
		}

.pane {
			padding: 2px;
			width: 100%;
			background-color: #fff;
			border: 1px solid rgb(60, 118, 157);
			overflow: auto;
			/* note: the panes get their height set with
		       javascript; see sizeTextAreas(). */
		
			/* for now, set a height so things look nice
			   if the user has javascript disabled */
			height: 400px;
		}

		#pageHeader {
			margin: 0px;
			padding: 0;
			text-align: center;
			margin-bottom: 0;
			margin-top: 0.4em;
			color: #766;
		}
		
		#pageHeader h1 {
			font-size: 3em;
		}
		
		#pageHeader * {
			margin: 0;
			padding: 0;
			line-height: 1em;
			font-weight: 100;
		}

		#pageHeader a {
			color: #766;
			text-decoration: none;
			position: relative;
			z-index: 20;
		}

		#pageHeader h1 a:hover {
			color: #fff;
		}
		
		#pageHeader h4 a:hover {
			text-decoration: underline;
		}


		
}

@keyframes changeOpacity {
    0% {opacity: 1;}
    50% {opacity: 0.3;}
    100% {opacity: 1;}
}

@-webkit-keyframes changeOpacity {
    0% {opacity: 1;}
    50% {opacity: 0.3;}
    100% {opacity: 1;}
}