/**
 * @brief CookieAgreementMessage Input default CSS styles
 * @details Plugin / Input CSS styles
 * @author CaMykS Team
 * @version 1.1.1
 * @date Creation: May 2017
 * @date Modification: Jan 2026
 * @copyright 2017 - 2026 CaMykS Team
 * @note This program is distributed as is - WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 */
.cookieAgreementMessage {background:black; padding:16px 32px 20px; position:fixed; opacity:0.95; transition:all 0.3s ease; max-width:100%; max-height:100%; overflow: hidden auto; box-sizing: border-box; border-radius:8px; box-shadow: 0px 0px 21px 5px rgba(0,0,0,0.75); z-index:999999;}
.cookieAgreementMessage * {text-decoration:none; box-sizing: border-box;}
.cookieAgreementMessage img {font-size:0;}
.cookieAgreementMessage .opener {display:none; width:30px; height:30px; cursor:pointer; position:relative; top:-15px; left:-15px; margin: 0 5px 5px 0;}
.cookieAgreementMessage .closer {width:50px; height:50px; cursor:pointer; margin:0 0 12px; border:solid 1px white; padding:12px; border-radius:24px; float:right; position:relative; left:16px;}
.cookieAgreementMessage .message {color:white; padding:8px;}
.cookieAgreementMessage .acceptButton {display:inline-block; color:white !important; background:#434343; padding:8px 16px; margin:0 4px 10px; border-radius:6px; min-width:160px; font-weight:bold;}
.cookieAgreementMessage .aboutButton {display:inline-block; color:black !important; background:white; padding:8px 16px; margin:0 4px 10px; border-radius:6px; min-width:160px; font-weight:bold;}
.cookieAgreementMessage .aboutButton.hidden {visibility:hidden;}
.cookieAgreementMessage .acceptButton:hover, .cookieAgreementMessage .aboutButton:hover {text-decoration:none; opacity:0.8;}

.cookieAgreementMessage.minimised {padding:32px; max-width:40px; max-height:40px; overflow:hidden;}
.cookieAgreementMessage.minimised .opener {display:block;}

.cookieAgreementMessage.top {width:100%; text-align:center; padding:20px 0 0 0 ;}
.cookieAgreementMessage.top .message {display:inline-block; max-width:1000px; margin:0 auto;}
.cookieAgreementMessage.top .services {max-width:1000px; margin:0 auto;}
.cookieAgreementMessage.top .buttons {display:inline-block;max-width:1000px; margin:0 auto;}

.cookieAgreementMessage.top-left {width:750px; text-align:center; top:10px; left:10px;}
.cookieAgreementMessage.top-left .buttons {padding:8px 0;}
.cookieAgreementMessage.top-right {width:750px; text-align:center; top:10px; right:10px;}
.cookieAgreementMessage.top-right .buttons {padding:8px 0;}

.cookieAgreementMessage.bottom {width:100%; text-align:center; bottom:0; padding:0 0 0 20px;}
.cookieAgreementMessage.bottom .message {display:inline-block; max-width:1000px; margin:0 auto;}
.cookieAgreementMessage.bottom .services {max-width:1000px; margin:0 auto;}
.cookieAgreementMessage.bottom .buttons {display:inline-block; max-width:1000px; margin:0 auto;}

.cookieAgreementMessage.bottom-left {width:750px; text-align:center; bottom:10px; left:10px;}
.cookieAgreementMessage.bottom-left .buttons {padding:8px 0;}
.cookieAgreementMessage.bottom-right {width:750px; text-align:center; bottom:10px; right:10px;}
.cookieAgreementMessage.bottom-right .buttons {padding:8px 0;}

.cookieAgreementMessage.centered {width:750px; text-align:center; position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%);}
.cookieAgreementMessage.centered .buttons {padding:8px 0;}
.cookieAgreementMessage.centered.minimised {bottom:10px; left:10px; transform: translate(0%, 0%);}

.cookieAgreementMessage .services {max-height:0; transition:max-height 0.3s ease-out; overflow:hidden; text-align:left; margin:12px 0 0 ;}
.cookieAgreementMessage .services.opened {max-height:500px; overflow-y:auto;}
.cookieAgreementMessage .services .title {font-weight:bold; font-size:+2em; color:white;}
.cookieAgreementMessage .services .service {padding:20px 8px; border-top:solid 1px #888; font-size:0; display:flex;}
.cookieAgreementMessage .services .service .details {flex:2;}
.cookieAgreementMessage .services .service .details .title {font-size:+1.5em;}
.cookieAgreementMessage .services .service .details .link {color:white !important; text-decoration:underline;}
.cookieAgreementMessage .services .service .actions {min-width:95px; max-width:95px;}
.cookieAgreementMessage .services .service .actions .mandatory {float:right; color:#2d867a; padding:4px 8px; font-weight:bold;}
.cookieAgreementMessage .services .service .actions .accept, .cookieAgreementMessage .service .refuse {display:block; margin-left:8px; float:right; width:39px; height:39px; background-color:#888; background-position:50% 50%; background-repeat:no-repeat; border:solid 2px #888; border-radius:21px;}
.cookieAgreementMessage .services .service .actions .accept {background-image:url(../../../cplugin/input/CookieAgreementMessage/css/../img/accept.png);}
.cookieAgreementMessage .services .service .actions .accept:hover {border:solid 2px #006e64;}
.cookieAgreementMessage .services .service .actions .accept.selected {border:solid 2px #006e64; background-color:#006e64;}
.cookieAgreementMessage .services .service .actions .refuse {background-image:url(../../../cplugin/input/CookieAgreementMessage/css/../img/refuse.png);}
.cookieAgreementMessage .services .service .actions .refuse:hover {border:solid 2px #961414;}
.cookieAgreementMessage .services .service .actions .refuse.selected {border:solid 2px #961414; background-color:#961414;}

/* mobile adaptation */
@media (max-width: 400px) {
    .cookieAgreementMessage {max-width:100%; left:0; right:0;}
    .cookieAgreementMessage.minimised {left:auto;}
    .cookieAgreementMessage.minimised.bottom-left, .cookieAgreementMessage.minimised.top-left {left:0; right:auto;}
}

@media (max-width: 750px) {
    .cookieAgreementMessage {padding:16px 16px 6px;}
    .cookieAgreementMessage.minimised {padding:32px;}
    .cookieAgreementMessage .message {padding:8px 0;}
    .cookieAgreementMessage .services .title {font-size:+1.5em;}
    .cookieAgreementMessage .services .service .details .title {font-size:+1.25em;}
}

/* print mode */
@media print {
    .cookieAgreementMessage {display:none;}
}


/**
 * @brief skymacDesign theme, main CSS.
 * @details Plugin / Theme Styles
 * @author sky
 * @version 1.0.12
 * @date Creation: Oct 2016
 * @date Modification: Dec 2024
 * @copyright 2016 - 2024 skymac.org
 */

/* global */
* {padding:0; margin:0; box-sizing: border-box;}
body {background:#e7eef1;}
p {padding: 8px 0;}
a {text-decoration:none; color:#ff9600; transition: color 0.3s;}
a:hover {color:#00378B;}
ul {margin:0px 28px; padding:0; list-style:url(../../../plugin/theme/skymacDesign/css/../img/bullet.png);}
ul ul {margin:0px 18px; padding:0; list-style:url(../../../plugin/theme/skymacDesign/css/../img/bullet2.png);}
ul ul ul {margin:0px 18px; padding:0; list-style:url(../../../plugin/theme/skymacDesign/css/../img/bullet.png);}
ol {margin:0px 28px; padding:0;}
li {margin:4px 4px 8px;}
b, strong {font-weight:bold;}
i, em {font-style:italic;}
blockquote {margin:8px 20px;}
input, textarea, select {border:none; padding:0; background:#fdea91; color:#5A5A5A; font-weight:bold; font-size:12px; border-radius:4px;}
input, textarea, option {padding:4px 4px; font-weight:bold; color:#5A5A5A; font-size:12px;}
textarea {resize: none;}
.inputs {width:200px;}
.linputs {width:400px;}
.sinputs {width:150px;}
.vsinputs {width:75px;}
.vlinputs {width:100%;}
form {margin:0;}
.img {font-size:0;}
sup, sub {font-size:9px; color:inherit;}
img {border:0; max-width:100%; height:auto;}
.RSS {float:right;}
.pre-eTitle1 {border-bottom:solid 1px #ff9600; height:0; font-size:0; position:relative; top:32px;}
.preview {background:white; padding:20px;}

/* icon image for layered menu */
img.icon{float:left; margin-right:4px;}

/* update cookie agreement */
.cookieAgreementMessage {z-index:110;}

/* error */
.error {font-size:1.10em; font-weight:bold; color:#CC3333; padding:4px;}

/* tool */
.clear {clear:both; height:0; font-size:0;}
.centered {text-align:center;}
.lefted {text-align:left;}
.righted {text-align:right;}

/* editor */
* {font-family: 'Dosis', sans-serif; font-size: 15px; font-weight:normal; font-style:normal; color:#454550;}

/* generic titles */
.eTitle1 {font-size:32px; text-transform:uppercase; color:#ff9600; margin:0 0 16px; position:relative; z-index:20; padding:0 16px 0 0; background:white; display:inline-block;}
.eTitle2 {font-size:24px; text-transform:uppercase; color:#454550; margin:8px 0; padding: 0 0 4px; border-bottom:solid 1px #454550;}
.eTitle3 {font-size:18px; font-style:italic; font-weight:bold; color:#ff9600;}

a.eTitle3 {text-decoration:none;}
a.eTitle3:hover{text-decoration:none;}

.eTitle4 {font-size:18px; color:#00378B; padding:4px 0;}
.eTitle5 {font-size:16px; color:#ff9600; font-weight:bold; padding:4px 0;}

/* generic contents */
.eContent1 {}
.eContent2 {color:#00378B; font-weight: bold;}
.eContent3 {font-style: italic;}

p.eContent1, p.eContent2, p.eContent3 {text-align:justify}

a.eLink1 {border-bottom:dotted 1px #ff9600; transition: color 0.3s, border 0.3s;}
a.eLink2 {border-bottom:dotted 1px #ff9600; font-weight:bold; transition: color 0.3s, border 0.3s;}
a.eLink1:hover, a.eLink2:hover {color:#00378B; border-bottom:dotted 1px #00378B;}

table.eTable{margin:4px 96px; border:solid 1px #797f9d;}
th.eTableHeader, td.eTableHeader {background:#797f9d; padding:4px; font-weight:bold; color: white;}
td.eTableLine0 {background:white; padding:4px; font-weight:bold;}
td.eTableLine1 {background:#EFEAF4; padding:4px; font-weight:bold;}

td.eTableLineAuto {background:white; padding:4px; font-weight:bold;}
tr:nth-child(odd) td.eTableLineAuto {background:#EFEAF4; padding:4px; font-weight:bold;}

/* specific content */
.JSSource, .BashSource, .HTMLSource, .CSSSource, .PHPSource, .LOGSource, .SQLSource {border-left:solid 4px #00378B; background:rgba(0, 55, 139, 0.02); margin:8px 0 8px 24px; padding:8px; white-space:pre-wrap; font-family:monospace; font-size:11px;}
.CSSSource, .LOGSource, .SQLSource {min-height:36px;}
.PHPSource {min-height:40px;}
.HTMLSource {min-height:58px;}

.JSSource:before {content:'JS'; display: inline-block; height:0; width:0; overflow:visible; position:relative; left:-21px; top:18px;
                  color:#00378B; font-weight:bold; font-size:24px; line-height:0; font-family: 'Dosis', sans-serif; opacity:0.5;
                  -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg);}

.BashSource:before {content:'SH'; display: inline-block; height:0; width:0; overflow:visible; position:relative; left:-21px; top:18px;
                    color:#00378B; font-weight:bold; font-size:24px; line-height:0; font-family: 'Dosis', sans-serif; opacity:0.5;
                    -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg);}

.CSSSource:before {content:'CSS'; display: inline-block; height:0; width:0; overflow:visible; position:relative; left:-21px; top:30px;
                   color:#00378B; font-weight:bold; font-size:24px; line-height:0; font-family: 'Dosis', sans-serif; opacity:0.5;
                   -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg);}

.HTMLSource:before {content:'HTML'; display: inline-block; height:0; width:0; overflow:visible; position:relative; left:-21px; top:52px;
                   color:#00378B; font-weight:bold; font-size:24px; line-height:0; font-family: 'Dosis', sans-serif; opacity:0.5;
                   -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg);}

.PHPSource:before {content:'PHP'; display: inline-block; height:0; width:0; overflow:visible; position:relative; left:-21px; top:34px;
                   color:#00378B; font-weight:bold; font-size:24px; line-height:0; font-family: 'Dosis', sans-serif; opacity:0.5;
                   -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg);}

.LOGSource:before {content:'LOG'; display: inline-block; height:0; width:0; overflow:visible; position:relative; left:-21px; top:30px;
                   color:#00378B; font-weight:bold; font-size:24px; line-height:0; font-family: 'Dosis', sans-serif; opacity:0.5;
                   -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg);}

.SQLSource:before {content:'SQL'; display: inline-block; height:0; width:0; overflow:visible; position:relative; left:-21px; top:30px;
                   color:#00378B; font-weight:bold; font-size:24px; line-height:0; font-family: 'Dosis', sans-serif; opacity:0.5;
                   -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg);}

.updateBox {background-color:rgba(0, 55, 139, 0.05); padding:20px; clear:both; margin:10px 0 20px;}

.JSSource *, .BashSource *, .HTMLSource *, .CSSSource *, .PHPSource *, .LOGSource *, .SQLSource * {white-space:pre-wrap; font-family:monospace; font-size:11px;}

/* parts */
.skymacButton {display:inline-block; margin: 4px; min-width: 150px; padding:4px 8px; background: #ff9600; text-align:center; color:white; font-weight:bold; transition: background-color 0.3s;}
.skymacButton:hover {background: #00378B; color:white;}

/* media popup */
.mediaPopupBkgd {position:fixed; left:0; top:0; background:#333333; opacity:0.75; width:100%; z-index:10000;}
.mediaPopup {z-index:10001; padding:10px; background:white; position:fixed; top:0; left:0; text-align:center; max-width:96%; box-sizing: content-box;}
.mediaPopup .closeButton {width:0; height:0; overflow:visible; float:right; position:relative; top:-28px; left:0px; cursor:pointer; font-size:0;}
.mediaPopup .mediaTitle {margin:4px 0 0; padding:2px 8px; text-align:center; color:#444444; font-weight:bold; background:white;}

/* page controler in control bar */
.genericPageEmptyController {font-size:0px; height: 0px;}
.genericPageController {margin:0 0 16px; padding:0 4px; width:100%; clear:both;}
.genericPageController .gpcBox {margin:0 auto;}
.genericPageController .gpcButton {padding:0 2px; font-size:0; vertical-align:middle;}
.genericPageController .gpcSelected {line-height:17px; font-weight:bold; padding:6px 12px; font-size:16px; background:#ff9600; color:white; text-decoration:none; display:inline-block;}
.genericPageController .gpcLink {line-height:17px; color:#ff9600; padding:5px 11px; text-decoration:none; font-size:16px; font-weight:bold; display:inline-block; border:solid 1px #ff9600; transition: color 0.3s, border 0.3s;}
.genericPageController .gpcLink:hover {text-decoration:none; background:white; color:#00378B; border:solid 1px #00378B;}
.genericPageController .gpcSpacer{padding:0 2px; color:white; text-decoration:none;}
.genericPageController .gpcLPage{padding:0 2px; color:white; text-decoration:none;}
.genericPageController .gpcRPage{padding:0 2px; color:white; text-decoration:none;}
.genericPageController .gpcPage{padding:0 2px; color:white; text-decoration:none;}

/* header  */
#pageHeader {background:#333333; background-image: linear-gradient(#333333, #4b4a60); width:300px; position:fixed; top:0; left:0; bottom:0;}
#pageHeader .menuButton {display:none;}
#pageHeader .logo {padding:20px 0 0; text-align:center;}
#pageHeader .mainMenu {padding: 20px 0;}
#pageHeader .mainMenu a.menu {display:block; border-top: solid 1px white; padding:20px 40px; font-size:18px; font-weight:300; text-align:right; text-decoration:none; text-transform:uppercase; color:white; transition: background 0.5s;}
#pageHeader .mainMenu a.menu:first-child {border-top:none;}
#pageHeader .mainMenu a.menu.selected {background:white; color:#ff9600; font-weight:400; font-size:22px; padding:16px 40px;}
#pageHeader .mainMenu a.menu.selected:hover {background:white;}
#pageHeader .mainMenu a.menu:hover {background:#ff9600; background-image: linear-gradient(#ff9600, #ff7e00);}
#pageHeader .mainMenu a.menu.hasChildren {padding-bottom:4px;}

#pageHeader .mainMenu a.submenu {display:block; padding:4px 40px; font-size:15px; font-weight:300; text-align:right; text-decoration:none; text-transform:uppercase; color:#CECECE; transition: background 0.5s;}
#pageHeader .mainMenu a.submenu.selected {background:white; color:#ff9600; font-weight:400; font-size:16px;}
#pageHeader .mainMenu a.submenu.selected:hover {background:white;}
#pageHeader .mainMenu a.submenu:hover {background:#ff9600; background-image: linear-gradient(#ff9600, #ff7e00);}

#pageHeader .mainMenu a.submenu .corner {position:relative; top:-4px; color:#CECECE; font-weight:300; font-size:20px; line-height:4px;}
#pageHeader .mainMenu a.submenu.selected .corner {color:#ff9600;}

#pageHeader .mainMenu a.submenu + a.menu {margin-top:8px;}

#pageHeader .mainMenu .search {padding:0 20px; margin:20px 0 0;}
#pageHeader .mainMenu .displayModes {float:left; width:100px; font-size:0; padding-left:10px;}
#pageHeader .mainMenu .displayModes a.mode {display:inline-block; padding:16px 0 8px 10px; transition: opacity 0.5s; border-top:none;}
#pageHeader .mainMenu .displayModes a.mode:hover{background:none; background-image:none;}
#pageHeader .mainMenu .displayModes a.mode.night {opacity:0.3;}
#pageHeader .mainMenu .displayModes a.mode.night:hover {opacity:1;}
#pageHeader .mainMenu .SNSP.follow {text-align:right; margin:0 20px;}
#pageHeader .mainMenu .SNSP.follow a {display:inline-block; padding:10px 0 10px 10px; transition: opacity 0.5s;}
#pageHeader .mainMenu .SNSP.follow a:hover {background:none; background-image:none; opacity:0.7;}
#pageHeader .mainMenu .tipeee {font-size:18px; color:white; padding:8px 0; text-align:center;}
#pageHeader .mainMenu .tipeee * {color:inherit; font-size:inherit;}

/* footer */
#pageFooter {position:fixed; bottom:0; width:100%; margin:0 0 0 300px; box-sizing: border-box; height:40px; background-color:#ff9600; background-image: linear-gradient(#ff9600, #ff7e00); padding:12px 12px 12px 42px; max-width:900px; box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.5),  0 -20px 8px -10px rgba(255,255,255,1); z-index:21;}
#pageFooter .content {font-size:0;}
#pageFooter .content * {color:white;}
#pageFooter .content .menu {display:inline-block; width:70%;}
#pageFooter .content .poweredby {display:inline-block; width:30%; text-align:right;}

/* content */
#pageContent {min-height:100vh; margin:0 0 0 300px; background:#FFFFFF; max-width:900px; box-sizing: border-box; border-right:solid 1px #dcdeec; padding:50px 100px 70px; box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.3);}

/* home */
.home .edito {padding:12px 0 0 50px; background:url(../../../plugin/theme/skymacDesign/css/../img/home/quote.png) 0 0 no-repeat;}
.home div.footer {margin-left:50px;}
.home .share {display:inline;}

/* links */
.linkList {}
.linkList .link {padding:12px 0;}
.linkList .link .icon {float:left; width:85px;}
.linkList .link .icon img {width:75px;}
.linkList .link .content {margin-left:85px; height:85px; vertical-align:top;}

/* articles */
.articles {font-size:0;}
.articles .article {}
.articles .article .date {width:80px; float:left;}
.articles .article .date .dayMonth {background:#ff9600; background-image: linear-gradient(#ff9600, #ff7e00);}
.articles .article .date .day {text-align:center; color:white; font-size:24px; padding:4px 0 0;}
.articles .article .date .month {text-align:center; color:white; font-size:18px; padding: 0 0 4px;}
.articles .article .date .year {color: #ff9600; text-align:center; padding: 4px; font-weight:bold;}
.articles .article .content {margin-left:100px;}
.articles .article .content a.title {font-size:18px;}
.articles .bottomSeparator {clear:both; height:20px;}
.articles .link {margin-left:20px;}

.articleDisplay .date {width:80px; float:left; margin-right:20px;}
.articleDisplay .date .dayMonth {background:#ff9600; background-image: linear-gradient(#ff9600, #ff7e00);}
.articleDisplay .date .day {text-align:center; color:white; font-size:24px; padding:4px 0 0;}
.articleDisplay .date .month {text-align:center; color:white; font-size:18px; padding: 0 0 4px;}
.articleDisplay .date .year {color: #ff9600; text-align:center; padding: 4px; font-weight:bold;}
.articleDisplay .intro {margin-left:100px;}
.articleDisplay .share {float:right;}

.commentWarning {padding:4px 0; font-size:12px;}

.commentForm .formInput {padding:4px 0;}
.commentForm .formButton {padding:4px 0; text-align:right;}
.commentForm .g-recaptcha div {margin-left:auto;}

.commentList .commentHeader {font-weight:bold;}
.commentList .commentHeader .info {font-weight:bold; color: #ff9600;}
.commentList .commentContent {padding-left:40px;}

/* picture gallery */
.pictureGallery {clear:both; font-size:0; margin:16px 0;}
.pictureGallery .item {display:inline-block; margin:0 8px 8px 0; font-size:0; width: 164px;}
.pictureGallery .item img {transition: -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s, box-shadow 0.5s;  border:solid 1px white;}
.pictureGallery .item:hover img {-webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg); box-shadow:0px 0px 4px rgba(0, 55, 139, 0.7);}

/* search */
.search {margin:0 auto 40px; width:500px; max-width:100%; font-size:0;}
.search.full {width:100%;}
.search form {font-size:0;}
.search .formInput {padding:4px 0;}
.search .formInput.half {display:inline-block; width:46%; margin:0 2%;}
.search .formButton {padding:4px 0; text-align:center;}
.search .formButton.half {display:inline-block; width:50%;}
.search .formButton .skymacButton {font-size:15px; padding:8px 32px;}
.search input {font-size:15px; padding:11px 20px; background: url(../../../plugin/theme/skymacDesign/css/../img/search/search.png) top 50% right 6px no-repeat white; border-radius:20px; box-shadow:0px 0px 4px rgba(0, 0, 0, 0.5);}
.search input:focus {box-shadow:0px 0px 4px rgba(0, 55, 139, 0.7);}
.search select {font-size:15px; padding:7px 20px; background:white; border-radius:20px; box-shadow:0px 0px 4px rgba(0, 0, 0, 0.5);}
.searchNoResult {text-align:center;}

/* data block */
.dataBlock {font-size:0;}
.dataBlock .element {display:inline-block; width:50%;}
.dataBlock .icons {position:relative; top:4px;}

/* GT7 Guide */
.guideGT7 {}
.guideGT7 .pictureBox {float:right; margin:0 0 20px 20px; border:solid 2px #222222; font-size:0; position:relative; z-index:5;}
.guideGT7 .pictureBox img {width:300px;}

/* night mode */
body.night {background:#222222;}
body.night * {color:#b2b2b2;}

body.night .error {color:#CC3333;}

/* editor */
body.night .eTitle1 {background:#333333; color:#ff9600;}
body.night .eTitle3 {color:#bbb;}
body.night .eTitle4 {color:#ff9600;}
body.night .eContent2 {color:#729fe2;}

body.night a.eLink1:hover, a.eLink2:hover {color:#ff9600; border-bottom:dotted 1px #ff9600;}
body.night .updateBox{background-color: rgba(0, 55, 139, 0.25);}
body.night input, body.night textarea, body.night select, body.night option {color:#888888;}

/* header */
body.night #pageHeader .mainMenu a {border-top: solid 1px #555555; color:#b2b2b2;}
body.night #pageHeader .mainMenu a:first-child {border-top:none;}
body.night #pageHeader .mainMenu a.submenu {border-top:none;}
body.night #pageHeader .mainMenu a.selected {background:#333333;}
body.night #pageHeader .mainMenu a.selected:hover {background:#333333; color:#b2b2b2;}
body.night #pageHeader .mainMenu a:hover {background:#ff9600; color:#333333; background-image: linear-gradient(#ff9600, #ff7e00);}
body.night #pageHeader .mainMenu .displayModes a.mode.night {opacity:1;}
body.night #pageHeader .mainMenu .displayModes a.mode.day {opacity:0.3;}
body.night #pageHeader .mainMenu .displayModes a.mode.day:hover {opacity:1;}

body.night #pageHeader .mainMenu .tipeee {color:#b2b2b2;}
body.night #pageHeader .mainMenu .tipeee a {border:none;}

/* content */
body.night #pageContent {background:#333333; border-right:solid 1px #555555;}

/* footer */
body.night #pageFooter {box-shadow:none;}
body.night #pageFooter .content * {color:#333333;}

/* page controller */
body.night .genericPageController .gpcSelected {color:#333333;}
body.night .genericPageController .gpcLink:hover {background:none;}

/* article list */
body.night .articles .article .date .day {color:#333333;}
body.night .articles .article .date .month {color:#333333;}

/* editor */
body.night th.eTableHeader, td.eTableHeader {background:#00378B;}
body.night td.eTableLine0 {background:#333333;}
body.night td.eTableLine1 {background:#555555;}

body.night .JSSource, body.night .BashSource, body.night .HTMLSource, body.night .CSSSource, body.night .PHPSource, body.night .LOGSource, body.night .SQLSource {background:white; border-left:solid 4px #888888; color:#454550;}
body.night .JSSource:before, body.night .BashSource:before, body.night .HTMLSource:before, body.night .CSSSource:before, body.night .PHPSource:before, body.night .LOGSource:before, body.night .SQLSource:before {color:#888888;}

/* search */
body.night .search input {background-color: black; box-shadow:0px 0px 4px rgba(255, 255, 255, 0.5);}
body.night .search input:focus {box-shadow:0px 0px 4px rgba(0, 55, 139, 1);}
body.night .search select {background:black; box-shadow:0px 0px 4px rgba(255, 255, 255, 0.5);}

/* parts */
body.night .skymacButton {color:#333333;}
body.night .skymacButton:hover {color:white;}

/* GT7 Guide */
body.night .guideGT7 .pictureBox {border:solid 2px white;}