/*************************************************************************************** * Basic Settings * ****************************************************************************************/ * { margin: 0; padding: 0; } img { border: none; } textarea { font-family: Calibri,​ Arial,​ sans-serif; padding: 10px; height: 150px; } .hidden { display: none !important; } .block { display: block !important; } .inline { display: inline-block !important; } .b { font-weight: bold !important; } .i { font-style: italic !important; } .r { text-align: right !important; } .l { text-align: left !important; } .c { text-align: center !important; } .j { text-align: justify !important; } .fL { float: left !important; } .fR { float: right !important; } .vT { vertical-align: top; } .vM { vertical-align: middle; } .vB { vertical-align: bottom; } .clear { clear: both !important; } .noWrap { white-space: nowrap; } .error, .info { margin-top: 20px; margin-bottom: 20px; padding: 10px; border: 1px solid green; } .error { border: 1px solid red; } .pointer { cursor: pointer !important; } .auto { width: auto !important; } .opacity0 { opacity: 0.0 !important; } .opacity1 { opacity: 1.0 !important; } /*************************************************************************************** * Form * ****************************************************************************************/ .form label, .form input, .form textarea, .form select, .form .likeInput, .form div.uploadArea, .form .tip, .form .tipON, .form img.captcha, .form .mce-tinymce { margin-left: 15px; margin-right: 15px; } .form form > div { margin-bottom: 20px; display: inline-block; width: 100%; position: relative; } .form form > div > label { display: block; text-align: left; } .form form > div > label.radio, .form form > div > label.checkbox { display: inline-block; vertical-align: middle; margin-left: 0px; cursor: pointer; } select, textarea, input, input[type="submit"]:hover, .likeInput, .form div.uploadArea, .form img.captcha, .likeInput:hover { background-color: #FAFAFA; border-radius: 4px; text-align: left; font-size: 15px; color: #414241; display: inline-block; min-height: 30px; font-weight: normal; vertical-align: top; text-decoration: none; padding: 0 10px; border: 1px solid #CCCCCC; width: 94%; width: calc(100% - 52px); vertical-align: middle; font-family: Arial; overflow: hidden; line-height: 28px; } .likeInput, .likeInput:hover, input[type="submit"], input[type="submit"]:hover, input[type="button"], input[type="button"]:hover, .form div.uploadArea { background-color: #F0F0F0; } input[type="submit"], input[type="submit"]:hover { width: 94%; width: calc(100% - 30px); cursor: pointer; text-align: center; height: 32px; } .form input[type="radio"], .form input[type="checkbox"] { width: 20px; margin-right: 0px; } .form textarea { padding: 10px; } .form img.captcha { height: 75px; margin-bottom: 0; margin-top: 0; padding: 0; width: 150px; } .form input.captcha { font-family: Courier New,monospace; font-size: 50px; height: 55px; padding: 10px; width: 130px; text-align: center; } .form select { width: calc(100% - 30px); padding: 5px 10px; height: 32px; } .form select option { padding: 2px 5px; } .form div.uploadArea { position: relative; overflow: hidden; text-align: center; min-height: 30px; } .form div.uploadArea > input { bottom: -5px; right: -5px; cursor: pointer; font-size: 2em; height: 100px; width: 110%; position: absolute; opacity: 0.0; margin: 0; padding: 0; -moz-opacity: 0.0; -khtml-opacity: 0.0; -o-opacity: 0.0; -webkit-opacity: 0.0; zoom: 1; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .form div.uploadArea > span { vertical-align: sub; } .form div.uploadArea > span.fileSelected:after { content: " ↵"; } .form .formGrid1 { width: 10%; } .form .formGrid2 { width: 20%; } .form .formGrid3 { width: 30%; } .form .formGrid4 { width: 40%; } .form .formGrid5 { width: 50%; } .form .formGrid6 { width: 60%; } .form .formGrid7 { width: 70%; } .form .formGrid8 { width: 80%; } .form .formGrid9 { width: 90%; } .form .formLeft { text-align: left; } .form .formRight { text-align: right; } .form .formCenter { text-align: center; } .form .formError * { border-color: red; } .form .tip { background: none repeat scroll 0 0 white; border: 1px solid #CCCCCC; border-radius: 2px 2px 2px 2px; bottom: 100%; bottom: calc(100% - 22px); display: none; line-height: 1em; padding: 10px; position: absolute; margin-bottom: 3px; text-align: left; } .form .noLabel { bottom: 100%; } .form .tip strong { display: block; margin-bottom: 5px; } .likeInput:hover, input:focus, select:focus, textarea:focus, input[type="button"]:hover, input[type="submit"]:hover, .form div.uploadArea:hover { border-color: #666666; } :focus::-webkit-input-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; } .likeInput, .likeInput:hover { line-height: 30px; text-align: center; } /*************************************************************************************** * Grid * ****************************************************************************************/ .gridArea { max-width: 900px; margin: auto; } .gridContainer1 > div, .gridContainer2 > div, .gridContainer3 > div, .gridContainer4 > div, .gridContainer5 > div, .gridContainer6 > div, .gridContainer7 > div, .gridContainer8 > div, .gridContainer9 > div, .gridContainer10 > div { min-height: 1px; } .gridContainer1, .gridContainer2, .gridContainer3, .gridContainer4, .gridContainer5, .gridContainer6, .gridContainer7, .gridContainer8, .gridContainer9, .gridContainer10 { width: 100%; vertical-align: top; display: inline-block !important; } .grid0 { display: none; } .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10 { float: left; margin-left: 4%; transition: all .4; } .gridContainer1 > .grid1, .gridContainer2 > .grid2, .gridContainer3 > .grid3, .gridContainer4 > .grid4, .gridContainer5 > .grid5, .gridContainer6 > .grid6, .gridContainer7 > .grid7, .gridContainer8 > .grid8, .gridContainer9 > .grid9, .gridContainer10 > .grid10 { width: 92%; max-width: 92%; } .gridContainer2 > .grid1, .gridContainer4 > .grid2, .gridContainer6 > .grid3, .gridContainer8 > .grid4, .gridContainer10 > .grid5 { width: 44%; max-width: 44%; } .gridContainer3 > .grid1, .gridContainer6 > .grid2, .gridContainer9 > .grid3 { width: 28%; max-width: 28%; } .gridContainer3 > .grid2, .gridContainer6 > .grid4, .gridContainer9 > .grid6 { width: 60%; max-width: 60%; } .gridContainer4 > .grid1, .gridContainer8 > .grid2 { width: 20%; max-width: 20%; } .gridContainer4 > .grid3, .gridContainer8 > .grid6 { width: 68%; max-width: 68%; } .gridContainer5 > .grid1, .gridContainer10 > .grid2 { width: 15.2%; max-width: 15.2%; } .gridContainer5 > .grid2, .gridContainer10 > .grid4 { width: 34.4%; max-width: 34.4%; } .gridContainer5 > .grid3, .gridContainer10 > .grid6 { width: 53.6%; max-width: 53.6%; } .gridContainer5 > .grid4, .gridContainer10 > .grid8 { width: 72.8%; max-width: 72.8%; } .gridContainer6 > .grid1 { width: 12%; max-width: 12%; } .gridContainer6 > .grid5 { width: 76%; max-width: 76%; } .gridContainer7 > .grid1 { width: 9.7142857142857%; max-width: 9.7142857142857%; } .gridContainer7 > .grid2 { width: 23.428571428571%; max-width: 23.428571428571%; } .gridContainer7 > .grid3 { width: 37.142857142857%; max-width: 37.142857142857%; } .gridContainer7 > .grid4 { width: 50.857142857143%; max-width: 50.857142857143%; } .gridContainer7 > .grid5 { width: 64.571428571429%; max-width: 64.571428571429%; } .gridContainer7 > .grid6 { width: 78.285714285714%; max-width: 78.285714285714%; } .gridContainer8 > .grid1 { width: 8%; max-width: 8%; } .gridContainer8 > .grid3 { width: 32%; max-width: 32%; } .gridContainer8 > .grid5 { width: 56%; max-width: 56%; } .gridContainer8 > .grid7 { width: 80%; max-width: 80%; } .gridContainer9 > .grid1 { width: 6.6666666666667%; max-width: 6.6666666666667%; } .gridContainer9 > .grid2 { width: 17.333333333333%; max-width: 17.333333333333%; } .gridContainer9 > .grid4 { width: 38.666666666667%; max-width: 38.666666666667%; } .gridContainer9 > .grid5 { width: 49.333333333333%; max-width: 49.333333333333%; } .gridContainer9 > .grid7 { width: 70.666666666667%; max-width: 70.666666666667%; } .gridContainer9 > .grid8 { width: 81.333333333333%; max-width: 81.333333333333%; } .gridContainer10 > .grid1 { width: 5.6%; max-width: 5.6%; } .gridContainer10 > .grid3 { width: 24.8%; max-width: 24.8%; } .gridContainer10 > .grid7 { width: 63.2%; max-width: 63.2%; } .gridContainer10 > .grid9 { width: 82.4%; max-width: 82.4%; } /*************************************************************************************** * Grid (borderless) * ****************************************************************************************/ .borderless > .gridContainer1 > :first-child, .borderless > .gridContainer2 > :first-child, .borderless > .gridContainer3 > :first-child, .borderless > .gridContainer4 > :first-child, .borderless > .gridContainer5 > :first-child, .borderless > .gridContainer6 > :first-child, .borderless > .gridContainer7 > :first-child, .borderless > .gridContainer8 > :first-child, .borderless > .gridContainer9 > :first-child, .borderless > .gridContainer10 > :first-child { margin-left: 0; } .borderless > .gridContainer1 > .grid1, .borderless > .gridContainer2 > .grid2, .borderless > .gridContainer3 > .grid3, .borderless > .gridContainer4 > .grid4, .borderless > .gridContainer5 > .grid5, .borderless > .gridContainer6 > .grid6, .borderless > .gridContainer7 > .grid7, .borderless > .gridContainer8 > .grid8, .borderless > .gridContainer9 > .grid9, .borderless > .gridContainer10 > .grid10 { width: 100%; max-width: 100%; } .borderless > .gridContainer2 > .grid1, .borderless > .gridContainer4 > .grid2, .borderless > .gridContainer6 > .grid3, .borderless > .gridContainer8 > .grid4, .borderless > .gridContainer10 > .grid5 { width: 48%; max-width: 48%; } .borderless > .gridContainer3 > .grid1, .borderless > .gridContainer6 > .grid2, .borderless > .gridContainer9 > .grid3 { width: 30.666666666667%; max-width: 30.666666666667%; } .borderless > .gridContainer3 > .grid2, .borderless > .gridContainer6 > .grid4, .borderless > .gridContainer9 > .grid6 { width: 65.333333333333%; max-width: 65.333333333333%; } .borderless > .gridContainer4 > .grid1, .borderless > .gridContainer8 > .grid2 { width: 22%; max-width: 22%; } .borderless > .gridContainer4 > .grid3, .borderless > .gridContainer8 > .grid6 { width: 74%; max-width: 74%; } .borderless > .gridContainer5 > .grid1, .borderless > .gridContainer10 > .grid2 { width: 16.8%; max-width: 16.8%; } .borderless > .gridContainer5 > .grid2, .borderless > .gridContainer10 > .grid4 { width: 37.6%; max-width: 37.6%; } .borderless > .gridContainer5 > .grid3, .borderless > .gridContainer10 > .grid6 { width: 58.4%; max-width: 58.4%; } .borderless > .gridContainer5 > .grid4, .borderless > .gridContainer10 > .grid8 { width: 79.2%; max-width: 79.2%; } .borderless > .gridContainer6 > .grid1 { width: 13.333333333333%; max-width: 13.333333333333%; } .borderless > .gridContainer6 > .grid5 { width: 82.666666666667%; max-width: 82.666666666667%; } .borderless > .gridContainer7 > .grid1 { width: 10.857142857143%; max-width: 10.857142857143%; } .borderless > .gridContainer7 > .grid2 { width: 25.714285714286%; max-width: 25.714285714286%; } .borderless > .gridContainer7 > .grid3 { width: 40.571428571429%; max-width: 40.571428571429%; } .borderless > .gridContainer7 > .grid4 { width: 55.428571428571%; max-width: 55.428571428571%; } .borderless > .gridContainer7 > .grid5 { width: 70.285714285714%; max-width: 70.285714285714%; } .borderless > .gridContainer7 > .grid6 { width: 85.142857142857%; max-width: 85.142857142857%; } .borderless > .gridContainer8 > .grid1 { width: 9%; max-width: 9%; } .borderless > .gridContainer8 > .grid3 { width: 35%; max-width: 35%; } .borderless > .gridContainer8 > .grid5 { width: 61%; max-width: 61%; } .borderless > .gridContainer8 > .grid7 { width: 87%; max-width: 87%; } .borderless > .gridContainer9 > .grid1 { width: 7.5555555555556%; max-width: 7.5555555555556%; } .borderless > .gridContainer9 > .grid2 { width: 19.111111111111%; max-width: 19.111111111111%; } .borderless > .gridContainer9 > .grid4 { width: 42.222222222222%; max-width: 42.222222222222%; } .borderless > .gridContainer9 > .grid5 { width: 53.777777777778%; max-width: 53.777777777778%; } .borderless > .gridContainer9 > .grid7 { width: 76.888888888889%; max-width: 76.888888888889%; } .borderless > .gridContainer9 > .grid8 { width: 88.444444444444%; max-width: 88.444444444444%; } .borderless > .gridContainer10 > .grid1 { width: 6.4%; max-width: 6.4%; } .borderless > .gridContainer10 > .grid3 { width: 27.2%; max-width: 27.2%; } .borderless > .gridContainer10 > .grid7 { width: 68.8%; max-width: 68.8%; } .borderless > .gridContainer10 > .grid9 { width: 89.6%; max-width: 89.6%; } /*************************************************************************************** * Grid (spaceless) * ****************************************************************************************/ .spaceless > .gridContainer1 > .grid1, .spaceless > .gridContainer2 > .grid2, .spaceless > .gridContainer3 > .grid3, .spaceless > .gridContainer4 > .grid4, .spaceless > .gridContainer5 > .grid5, .spaceless > .gridContainer6 > .grid6, .spaceless > .gridContainer7 > .grid7, .spaceless > .gridContainer8 > .grid8, .spaceless > .gridContainer9 > .grid9, .spaceless > .gridContainer10 > .grid10 { width: 100%; max-width: 100%; margin-left: 0; } .spaceless > .gridContainer2 > .grid1, .spaceless > .gridContainer4 > .grid2, .spaceless > .gridContainer6 > .grid3, .spaceless > .gridContainer8 > .grid4, .spaceless > .gridContainer10 > .grid5 { width: 50%; max-width: 50%; margin-left: 0; } .spaceless > .gridContainer3 > .grid1, .spaceless > .gridContainer6 > .grid2, .spaceless > .gridContainer9 > .grid3 { width: 33.333333333333%; max-width: 33.333333333333%; margin-left: 0; } .spaceless > .gridContainer3 > .grid2, .spaceless > .gridContainer6 > .grid4, .spaceless > .gridContainer9 > .grid6 { width: 66.666666666667%; max-width: 66.666666666667%; margin-left: 0; } .spaceless > .gridContainer4 > .grid1, .spaceless > .gridContainer8 > .grid2 { width: 25%; max-width: 25%; margin-left: 0; } .spaceless > .gridContainer4 > .grid3, .spaceless > .gridContainer8 > .grid6 { width: 75%; max-width: 75%; margin-left: 0; } .spaceless > .gridContainer5 > .grid1, .spaceless > .gridContainer10 > .grid2 { width: 20%; max-width: 20%; margin-left: 0; } .spaceless > .gridContainer5 > .grid2, .spaceless > .gridContainer10 > .grid4 { width: 40%; max-width: 40%; margin-left: 0; } .spaceless > .gridContainer5 > .grid3, .spaceless > .gridContainer10 > .grid6 { width: 60%; max-width: 60%; margin-left: 0; } .spaceless > .gridContainer5 > .grid4, .spaceless > .gridContainer10 > .grid8 { width: 80%; max-width: 80%; margin-left: 0; } .spaceless > .gridContainer6 > .grid1 { width: 16.666666666667%; max-width: 16.666666666667%; margin-left: 0; } .spaceless > .gridContainer6 > .grid5 { width: 83.333333333333%; max-width: 83.333333333333%; margin-left: 0; } .spaceless > .gridContainer7 > .grid1 { width: 14.285714285714%; max-width: 14.285714285714%; margin-left: 0; } .spaceless > .gridContainer7 > .grid2 { width: 28.571428571429%; max-width: 28.571428571429%; margin-left: 0; } .spaceless > .gridContainer7 > .grid3 { width: 42.857142857143%; max-width: 42.857142857143%; margin-left: 0; } .spaceless > .gridContainer7 > .grid4 { width: 57.142857142857%; max-width: 57.142857142857%; margin-left: 0; } .spaceless > .gridContainer7 > .grid5 { width: 71.428571428571%; max-width: 71.428571428571%; margin-left: 0; } .spaceless > .gridContainer7 > .grid6 { width: 85.714285714286%; max-width: 85.714285714286%; margin-left: 0; } .spaceless > .gridContainer8 > .grid1 { width: 12.5%; max-width: 12.5%; margin-left: 0; } .spaceless > .gridContainer8 > .grid3 { width: 37.5%; max-width: 37.5%; margin-left: 0; } .spaceless > .gridContainer8 > .grid5 { width: 62.5%; max-width: 62.5%; margin-left: 0; } .spaceless > .gridContainer8 > .grid7 { width: 87.5%; max-width: 87.5%; margin-left: 0; } .spaceless > .gridContainer9 > .grid1 { width: 11.111111111111%; max-width: 11.111111111111%; margin-left: 0; } .spaceless > .gridContainer9 > .grid2 { width: 22.222222222222%; max-width: 22.222222222222%; margin-left: 0; } .spaceless > .gridContainer9 > .grid4 { width: 44.444444444444%; max-width: 44.444444444444%; margin-left: 0; } .spaceless > .gridContainer9 > .grid5 { width: 55.555555555556%; max-width: 55.555555555556%; margin-left: 0; } .spaceless > .gridContainer9 > .grid7 { width: 77.777777777778%; max-width: 77.777777777778%; margin-left: 0; } .spaceless > .gridContainer9 > .grid8 { width: 88.888888888889%; max-width: 88.888888888889%; margin-left: 0; } .spaceless > .gridContainer10 > .grid1 { width: 10%; max-width: 10%; margin-left: 0; } .spaceless > .gridContainer10 > .grid3 { width: 30%; max-width: 30%; margin-left: 0; } .spaceless > .gridContainer10 > .grid7 { width: 70%; max-width: 70%; margin-left: 0; } .spaceless > .gridContainer10 > .grid9 { width: 90%; max-width: 90%; margin-left: 0; } /*************************************************************************************** * Margins * ****************************************************************************************/ .mL0, .mH0, .mA0 { margin-left: 0px !important; } .mR0, .mH0, .mA0 { margin-right: 0px !important; } .mT0, .mV0, .mA0 { margin-top: 0px !important; } .mB0, .mV0, .mA0 { margin-bottom: 0px !important; } .mL1, .mH1, .mA1 { margin-left: 5px !important; } .mR1, .mH1, .mA1 { margin-right: 5px !important; } .mT1, .mV1, .mA1 { margin-top: 5px !important; } .mB1, .mV1, .mA1 { margin-bottom: 5px !important; } .mL2, .mH2, .mA2 { margin-left: 15px !important; } .mR2, .mH2, .mA2 { margin-right: 15px !important; } .mT2, .mV2, .mA2 { margin-top: 15px !important; } .mB2, .mV2, .mA2 { margin-bottom: 15px !important; } .mL3, .mH3, .mA3 { margin-left: 25px !important; } .mR3, .mH3, .mA3 { margin-right: 25px !important; } .mT3, .mV3, .mA3 { margin-top: 25px !important; } .mB3, .mV3, .mA3 { margin-bottom: 25px !important; } .mL4, .mH4, .mA4 { margin-left: 35px !important; } .mR4, .mH4, .mA4 { margin-right: 35px !important; } .mT4, .mV4, .mA4 { margin-top: 35px !important; } .mB4, .mV4, .mA4 { margin-bottom: 35px !important; } .mL5, .mH5, .mA5 { margin-left: 45px !important; } .mR5, .mH5, .mA5 { margin-right: 45px !important; } .mT5, .mV5, .mA5 { margin-top: 45px !important; } .mB5, .mV5, .mA5 { margin-bottom: 45px !important; } .mL6, .mH6, .mA6 { margin-left: 55px !important; } .mR6, .mH6, .mA6 { margin-right: 55px !important; } .mT6, .mV6, .mA6 { margin-top: 55px !important; } .mB6, .mV6, .mA6 { margin-bottom: 55px !important; } .mL7, .mH7, .mA7 { margin-left: 65px !important; } .mR7, .mH7, .mA7 { margin-right: 65px !important; } .mT7, .mV7, .mA7 { margin-top: 65px !important; } .mB7, .mV7, .mA7 { margin-bottom: 65px !important; } .mL8, .mH8, .mA8 { margin-left: 75px !important; } .mR8, .mH8, .mA8 { margin-right: 75px !important; } .mT8, .mV8, .mA8 { margin-top: 75px !important; } .mB8, .mV8, .mA8 { margin-bottom: 75px !important; } .mL9, .mH9, .mA9 { margin-left: 85px !important; } .mR9, .mH9, .mA9 { margin-right: 85px !important; } .mT9, .mV9, .mA9 { margin-top: 85px !important; } .mB9, .mV9, .mA9 { margin-bottom: 85px !important; } .mL10, .mH10, .mA10 { margin-left: 95px !important; } .mR10, .mH10, .mA10 { margin-right: 95px !important; } .mT10, .mV10, .mA10 { margin-top: 95px !important; } .mB10, .mV10, .mA10 { margin-bottom: 95px !important; }