/* Colors Very Very Bright Brown: #f7f2eb Very Bright Brown: #ede0d0 bright brown : #e2ccb2 dark brown : #584127 blue lines : #2DCDFF red lines : #EC3B45 */ /* General */ /* @font-face { font-family: 'thoughts'; font-style: normal; font-weight: normal; src: url('aescrawl.ttf') format('truetype'); } */ @font-face { font-family: 'thoughts'; font-style: normal; font-weight: 400; src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format('woff'); } body { min-width: 700px; font-family: thoughts, Arial; font-size:1em; background-color:#e2ccb2; margin:0; color:#584127; } table { border:none; background:none; text-align:center; margin:0; padding:0; border-spacing:0; } input, textarea { font-family: thoughts, Arial; font-size:1em; color:#584127; } input[type=button], input[type=submit] { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; font-weight:bold; color:#584127; } p { margin:0; padding:0; } a:visited, a { color:#584127; text-decoration: none; font-weight: bold; } a:active, a:focus, input:active, input:focus { outline: none; } .round { -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .round_top { -moz-border-radius:3px 3px 0 0; -webkit-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0; } .round_right { -moz-border-radius:0 3px 3px 0; -webkit-border-radius:0 3px 3px 0; border-radius:0 3px 3px 0; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; } /* Common Classes */ a.button { font-weight:normal; height:50px; width:50px; line-height:50px; font-size: 1.2em; text-align:center; background: url("../images/minicloud.png") 0 0 no-repeat; } a.button:hover { color:white; background-position:0 -50px; } a.button:active { color:white; background-position:0 -100px; } /* Container */ #container { position:absolute; left:0; right:0; top:1em; bottom:1em; width:40em; margin:auto; } /* Feedback */ #feedback { position:absolute; width:100%; z-index:1000; } #feedback span.feedback { display:block; margin-bottom:1em; width:calc(100% - 1em); box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.6); } /* Header */ #header { margin-left:-100px; height:203px; background:url('../images/logo.png') 0 0 no-repeat; } /* Menu */ #menu { position:absolute; top:0; right:0; } /* Calendar */ #calendar { position:absolute; margin-top:-40px; margin-left:560px; } table.calendar_list { /*border:2px solid #584127;*/ background-color:#e2ccb2; } table.calendar_list tbody { display:none; border:2px solid #584127; } table.calendar_list:hover tbody { display:inline-table; overflow:visible; } table.calendar_list tr.calendar_items td { background-position:-6px -7px; background-repeat:no-repeat; width:37px; height:42px; padding-top:2px; padding-right:3px; } table.calendar_list tr th { width:auto; text-align:left; font-size:16px; /*border-bottom:2px solid #584127;*/ padding-top:2px; } table.calendar_list tr td.item_full { background-image:url('../images/minicloud.png'); cursor:pointer; } table.calendar_list tr td.item_full:hover { background-image:url('../images/minicloud_hover.png'); color:white; } table.calendar_list tr td.item_full:active { background-image:url('../images/minicloud_active.png'); background-position: 53% 53%; } table.calendar_list tr td.item_empty { background-image:url('../images/minicloud_disabled.png'); color:#e2ccb2; font-weight:bold; } table.calendar_list tr td.item_disabled { color:#e2ccb2; } a.calendar_direction { text-decoration:none; } /* Main */ #main { margin-top:1em; position: absolute; top:203px; bottom:2em; right:0; left:0; background:#EDE0D0; border-radius: 0.5em; } /* Log on */ #logon { width: 496px; height: 225px; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; background: transparent url('../images/bubble_inverted.png') 0 0 no-repeat; } #logon, #logon input { font-size:30px; border:none; background-color:transparent; } #logon .credentials { margin:45px 0 0 0 ; } #logon .credentials input { width: 305px; padding:0 60px; text-align: center; } #logon input.connection { position:absolute; left:374px; top:140px; cursor:pointer; } #logon .register { margin-top:60px; text-align: center; } /* Write */ /* Write - Container */ #write { height:100%; } /* Write - Toolbar */ #write .jqte_toolbar { position: fixed; left: calc(50% - 22em); width: 1.5em; background:none; border-bottom:none; border-radius: 3px 0 0 3px; } #write .jqte_tool { float:none; border:none; margin-bottom: 0.3em; } #write .jqte_tool .jqte_tool_icon { border:none; background:none; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); text-align: center; color:#997E60; } #write .jqte_tool.jqte_tool_4 .jqte_tool_icon:before { content: "\f032"; } #write .jqte_tool.jqte_tool_5 .jqte_tool_icon:before { content: "\f033"; } #write .jqte_tool.jqte_tool_6 .jqte_tool_icon:before { content: "\f0cd"; } #write .jqte_tool.jqte_tool_7 .jqte_tool_icon:before { content: "\f0cb"; } #write .jqte_tool.jqte_tool_8 .jqte_tool_icon:before { content: "\f03a"; } #write .jqte_tool.jqte_tool_16 .jqte_tool_icon:before { content: "\f0cc"; } #write .jqte_tool:hover, #write .jqte_tool:hover .jqte_tool_icon, #write .jqte_tool_depressed, #write .jqte_tool_depressed .jqte_tool_icon { /*background-color: #EDE0D0;*/ background:none; color:#584127; } /* Write - Editor */ #write .jqte, #write .jqte_focused { border:none; box-shadow:none; height:calc(100% - 4em); margin:2em; padding:0; overflow: hidden; position:relative; } #write .jqte * { color: inherit; font-family:thoughts; font-size: inherit; } #write .jqte_editor { background: inherit; padding:0; max-height: inherit; resize:none; position:absolute; top:0; } #write .jqte_editor div { margin:0; } #write .jqte_editor p { text-indent: 1.5em; margin:1em 0 0 0; padding:0; text-align: justify; } #write .jqte_editor p:FIRST-CHILD, #write .jqte_toolbar { margin-top:0.5em; } /* Write - Toolbar */ #write #nav { position:absolute; bottom:0; right:0; left:0; text-align: center; } #write .fa-prev, #write .page_nb, #write .fa-next { color:#997E60; font-size:1.5em; margin:0 0 0.5em 0; cursor:pointer; } #write .page_nb { font-size: 1em; vertical-align:0.25em; cursor: default; padding-left:0.5em; padding-right:0.5em; } #write .fa-prev:hover, #write .fa-next:hover { color:#584127; } #write .fa-prev.disabled, #write .fa-next.disabled, #write .fa-prev.disabled:hover, #write .fa-next.disabled:hover { color:#EDE0D0; } /* Write - Placeholder */ #write .jqte_placeholder_text { top:1em; left:0; text-indent: 1.5em; } #write .jqte_focused .jqte_placeholder_text { display:none; } /* Write - Feedback */ #write_feedback { position:absolute; top: -1.5em; right:0.5em; } /* Read */ div.read { position:relative; padding-bottom:30px; } div.thought { font-size:16px; line-height:20px; } p.date { font-size:20px; } div.time { position:absolute; margin-left:-100px; } div.paragraphs p { margin:0 0 20px 0; } div.paragraphs p:first-letter { font-size:59px; line-height:16px; margin-right:5px; font-weight:400; float:left; text-transform:uppercase; } div.paragraphs p + p, div.paragraphs p + p:first-letter { font-size:inherit; line-height:inherit; margin-right:inherit; font-weight:normal; float:none; text-indent:40px; } /* Settings */ #settings table tr td { text-align:left; } /* Footer */ #footer { position: absolute; bottom: 0; text-align:center; color:grey; font-size:0.9em; width:100%; height:2em; } #footer a { color:grey; } /* Errors */ #errors { position:fixed; bottom:-2px; background-color:white; width:696px; border:2px solid red; } #errors ul li { list-style-image: url(../images/error.png); color:red; font-weight: bold; font-size:24px; } fieldset { margin:20px auto; width:90%; } fieldset p { text-align: justify; } /* Feedback */ .notice { padding:0; color:#997E60; } .error { padding:0 0.5em; color: red; background:#FFB2B2; } .warning { padding:0 0.5em; color:orange; background:#FFE4B2; } .success { padding:0 0.5em; color:green; background:#B2D9B2; }