/* CS1 Background and text colours
-------------------------------------------------------------*/
#pun {
  box-shadow: 0px 0px 0px 0px rgba(11,11,11,0.3);
  padding: 20px;
  background-color: rgba(11,11,11,0.3);
  border: 1px solid rgba(11,11,11,0.5);
}

#pun-register, #pun-index, #pun-main, #pun-title, #pun-viewforum, #pun-modviewforum, #pun-viewtopic, #pun-multimove, #pun-multidelete, #pun-multimegre, #pun-userlist, #pun-search, #pun-profile, #pun-messages, #pun-online, #pun-edit, #pun-delete, #pun-movetopic, #pun-mod, #pun-post, #pun-admin_index, #pun-admin_forums, #pun-admin_pages, #pun-admin_style, #pun-admin_options, #pun-admin_files, #pun-admin_promotion, #pun-admin_users, #pun-searchtopics, #pun-searchposts, #pun-login, #pun-respect, #pun-positive, #pun-invitation, #pun-reputation .inner, #pun-message, #pun-upavatar, #pun-changepass, #pun-pages
{background-color: #E3E7D1;} 


body {
  font-family: montserrat;
  font-size: 11px;
  color: #222;
  overflow-x: hidden;
  background-color: #e4e0e0;
  background-image: url(http://i.imgur.com/8Cuj51q.jpg);
  background-attachment: fixed;
  background-position: 50% 40%;
  background-size: cover;
}

#pun-navlinks .container {text-shadow: 2.5px 2.5px 1px #B7B8B6;text-align: center;}


#font-area, #size-area, #color-area, #table-area, #smilies-area, #image-area, #imageup-area, #imageattach-area, #keyboard-area, #video-area, #addition-area {position: absolute;right: 6px;top: 43px;background:rgba(227, 231, 209, 0.59);border: #393939 solid 1px;}

.punbb .quote-box, .punbb .code-box
{border: 3px double rgb(214, 198, 190);
  background-color:#F1F4E3}

.punbb textarea, .punbb select, .punbb input {
background-color:#F1F4E3}


/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: transparent;
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: transparent;
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #A0A0A0;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: transparent;
  }

/* CS2.5 */
.punbb th {
  border-color: transparent;
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: transparent;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: transparent;
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: transparent;
  }

.punbb .divider {
  border-color: transparent;
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #transparent;
  }

li.pa-online {
  border-left-color: transparent;
  }

.punbb .post-sig dt {
  border-top-color: transparent !important;
  }


/* CS3 Links
-------------------------------------------------------------*/

a:link, a:visited, a:active { 
	font-weight: bold;
	color: #c64a4a;
}
a:hover { 
	color: gray; 
	text-decoration: none; 
}
/* CS4 Post status icons
-------------------------------------------------------------*/
    div.icon {
            background: url(http://i.imgur.com/zV7dZJO.png) no-repeat;}
    tr.inew div.icon {
            background: url(http://i.imgur.com/7FmR1mO.png) no-repeat;}
    tr.iclosed div.icon {
            background: url(http://i.imgur.com/zV7dZJO.png) no-repeat;}
    tr.isticky div.icon {
            background: url(http://i.imgur.com/7FmR1mO.png) no-repeat;}


.quenta {width:450px;color:#393939;background-color:#f7f7f7;border-left:30px solid rgba(100, 107, 122, 1);;padding:20px;}
.quentaname {font:50px rochester;letter-spacing:-0.5px;}
.quentaline {background:rgba(100, 107, 122, 0.47);; width:418px;padding:3px;}
.quentaquote {font:12px century gothic;letter-spacing:-0.8px;line-height:100%;text-transform: lowercase;}
.quentaage {font:9px century gothic;text-align:center;letter-spacing:0.2px;line-height:100%;text-transform:lowercase;}
.quentaart {width:300px;font: 20px century gothic;letter-spacing:-0.5px;border-bottom:3px solid rgba(100, 107, 122, 0.47);;}
.quentatext {width:400px;text-align: justify;}
.quentamail {width:300px;font-family:century gothic;border-top:3px solid #928890;}

.fontemam {padding:3px;text-align:center;border:3px double #d6c6be;color:#393939;width:500px;}
.bodytemam {padding: 20px;background: #FFFFFF;border-top: 15px solid #EEE4FF;border-bottom: 40px solid #A6AC54;font:12px tahoma;line-height: 14px;}
.otsikoita {font:22px Nautilus Pompilius;letter-spacing:-1.0px;text-shadow: 0px 1px 0px #ffffff, 1px 2px 0px rgba(0, 0, 0, 0.39);}
.tabsline {width:460px;height:4px;background-color:#D8D8D8;}
.playbyots {font: 32px rochester;letter-spacing:-1px;text-shadow: 0px 1px 0px #ffffff, 1px 2px 0px rgba(0, 0, 0, 0.39);}
.playbyalf {font: 15px Nautilus Pompilius;letter-spacing:4px;}
.firstlast {font:30px rochester;letter-spacing:-1px;text-shadow:0px 1px 0px #ffffff, 1px 2px 0px rgba(0, 0, 0, 0.39);}
.siriq {text-align:right;font:15px nautilus pompilius;}
.siria {text-align:left;font-style:italic;}

.newsbgr {width:550px;background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4872/4872730.png?1438249228);padding-top: 28px;padding-bottom: 28px;}
.newsotsikko {width: 438px;height: 82px;background-color: rgb(238, 228, 255);font: 60px dorsa;line-height: 81px;color: white;text-shadow: 2px 2px 0px rgb(166, 172, 84);letter-spacing: 0.8px;margin-top: -103px;text-align: right;padding-right: 30px;}
.newsbody {width: 468px;background-color: white;border-bottom: 20px solid rgb(166, 172, 84);color: #393939;text-align: justify;}
.newsavatar {background-position:center top;background-size:100% auto;height:150px;width:150px;margin:-10px 360px 0px -10px;-moz-border-radius:100%;-o-border-radius:100%;position:relative;box-shadow:2px 2px 0px rgb(86, 76, 84)}
.newstext {font:12px tahoma;line-height:14px;padding:40px 20px 20px 20px;}
.acceptstr {width:0px;height:0px;border-top:24px solid transparent;border-bottom:24px solid transparent;border-right:43px solid #EFEFEF;margin-top:-114px;}
.acceptav {border:8px solid #EFEFEF;box-shadow:3px 3px 2px #888888;-moz-border-radius:50%;-webkit-border-radius:50%;width:150px;height:150px;background-position:center top;}
.acceptbody {width:300px;min-height:114px;padding:20px;background-color:#EFEFEF;-moz-border-radius:20px;-webkit-border-radius:20px;font:11px Tahoma;box-shadow:3px 3px 2px #888888;line-height:110%;color:#393939;margin-top: -80px;margin-left: 235px;}
.acceptwelcome {text-shadow:1px 1px 0px #ffffff, 1.3px 1.5px 0px #191919;font:36px rochester;letter-spacing:0.5px;margin:-22px -2px -20px 0px;}
.acceptline {width: 248px;height:4px;background-color:#D8D8D8; }
.accepttext {font:12px century gothic;letter-spacing: 0.2px;line-height:100%;text-align:center;margin-top: 15px;margin-bottom: 2px;text-transform:lowercase;}    

.linkopisanie {font-size:10.5px;letter-spacing:-0.7px;background-color:rgba(240, 237, 228, 1);text-transform:lowercase;padding:1px 3px 4px 3px;font-variant:small-caps;}

.table {background-image:url(http://i.imgur.com/5mWjyhb.png);padding-bottom:12px;color:silver;width:860px;text-align:center;position:relative;}
.table-box-1 {margin-top:12px;background-color:rgba(11,11,11,0.3);border:1px solid rgba(11,11,11,0.5);padding:5px 5px 5px 5px;}
.table-box-2 {margin-top:12px;background-color: rgba(11,11,11,0.3);border:1px solid rgba(11,11,11,0.5);padding:15px 5px 6px 5px;font-variant:small-caps;}
.table-box-3 {margin-top:-5px;background-color:rgba(11,11,11,0.3);border:1px solid rgba(11,11,11,0.5);padding:5px 2px 2px 5px;}
.table-box-4 {width:257px;margin-top:12px;background-color:rgba(11,11,11,0.3);border:1px solid rgba(11,11,11,0.5);padding:8px 4px 21px 5px;}
.table-space-1 {width:5px;}
.table-space-2 {width:10px;}
.table-name {font:14px Nautilus Pompilius;text-shadow: 1px 1px 0px #000000;}
.table-smile {font:18px Nautilus Pompilius;line-height: 10px;letter-spacing:-1.4px;text-shadow: 1px 1px 0px black;}
.table-name-1 {text-shadow: 1px 1px 0px #000000;}
.table-name-2 {font:20px Yesteryear;text-shadow:1.5px 1.5px 0px #747070;color:rgb(251, 241, 248);line-height:15px;}
.table-welcome {font:12.3px Montserrat;letter-spacing:-0.5px;padding:4px;text-align:justify;line-height: 84%;}
.table-news {font:18px Yesteryear;text-shadow: 1px 1px 0px #000000;text-transform:uppercase;}
.table-link-1 {width:68px;height:24px;line-height:24px;background-color:#222;text-align:center;color:#fff;font-size:9px;letter-spacing:-1px;font-weight:700;text-transform:uppercase;margin-right:3px;margin-bottom:3px;text-shadow: 1px 1px 0px #c64a4a;}
.table-link-2 {width:68px;height:24px;line-height:24px;background-color:#c64a4a;text-align:center;color:#fff;font-size:9px;letter-spacing:-1px;font-weight:700;text-transform:uppercase;margin-right:3px;margin-bottom:3px;text-shadow: 1px 1px 0px #000000;}
.tooltip {position: relative;}
.tooltip em {display: none;}
.tooltip:hover em {font-style:normal;display: block;position:absolute;background-color:#525252;box-shadow:inset 0px 0px 1px 0px #C0C0BB;color:#191919;padding:1px;bottom:15px;right:10px;}
.tooltip:hover em i {position:absolute;bottom:-7px;right:5px;display:block;}


.schoolwrap {width:619px;margin:auto;height:400px;overflow:hidden;}
.schoolleft, .schoolright {display:inline-block;vertical-align:top;width:300px;height:400px;}
.schoolleft {background-color:#81ac99;width:290px;border-left: solid 15px #2d2e2c; border-radius: 10px 0px 0px 10px }
.schoolright {background:#fff;margin-left:-1px;opacity:0;background:-webkit-gradient(linear, 0 0, 0 100%,from(#d9eaf3),color-stop(4%, #fff)) 0 4px;  background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px;background-size: 100% 20px;}
.schoolwrap .schoolright {transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out;  border-radius: 0px 15px 15px 0px;} 
.schoolwrap:hover .schoolright {opacity:1}
.schoolrightinner {font-size:14px;padding:9px;line-height:19.9px;color:#444; overflow:auto !important;height:380px;width:282px;}
.sleftinner {background:#f9f9f9;margin:auto;margin-top:50px;width:200px;padding:10px;border-radius: 10px;}
.schoolname {font-size:40px;font-family:great vibes;text-align:center;color:#64958f;}
.schoolinfo {text-transform:uppercase;text-align:center;font-size:11px;color:#aaa;}
.schoolnotes {font-size:12px;line-height:12px;padding:5px 8px;text-align:justify;}
.schoolrightinner::-webkit-scrollbar {background:#fff;width:5px;}
.schoolrightinner::-webkit-scrollbar-thumb {background:#9ec4bb;width:5px}
.schoolrightinner::-webkit-scrollbar-corner {background:#000;}


#j-slide1 {margin:0 auto;width:350px;height:190px;overflow:hidden;position:relative;border-bottom:solid 3px #5A201A;}
#j-slide1:hover .j-slide6 {left: 150px;top: 0px; transition: 1.0s all ease-in-out 0s;-webkit-transition: 11.0s5s all ease-in-out 0s;-moz-transition: 1.0s all ease-in-out 0s;o-transition: 1.0s all ease-in-out 0s; opacity: 0;}
#j-slide1:hover .j-slide7 {left: 0px;top: 0px;transition: 1.0s all ease-in-out 0.9s;-webkit-transition: 1.0s all ease-in-out 0.9s;-moz-transition: 1.0s all ease-in-out 0.9s;o-transition: 1.0s all ease-in-out 0.9s; opacity: 1;}
#j-slide1:hover .j-slide4 {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);transition: 2.0s all ease-in-out 0s;-webkit-transition: 2.0s all ease-in-out 0s;-moz-transition: 2.0s all ease-in-out 0s;o-transition: 2.0s all ease-in-out 0s; }
.j-slidetext a:link, .j-slidetext a:active, .j-slidetext a:visited {font-family: Calibri;font-size: 10px;color: #f7f7f7;font-style: italic;letter-spacing: 3px;text-align:center; text-transform: uppercase;text-decoration: none;}
.j-slide2 {width:350px;height: 40px;background-image:url(http://i.imgur.com/5mWjyhb.png);position:absolute;overflow:hidden;}
.j-slidetext {width: 350px;height: 40px;position: absolute;overflow: hidden;font-family: Calibri;font-size: 10px;line-height: 40px;color: #f7f7f7;font-style: italic;letter-spacing: 3px;text-align: center;z-index: 6;top: 0px;text-transform: uppercase;}
.j-slide3 {width: 350px;height: 40px;background: -webkit-linear-gradient(#000, #5A201A);background: -o-linear-gradient(#000, #5A201A); background: -moz-linear-gradient(#000, #5A201A);background: linear-gradient(#000, #5A201A);opacity: 0.7;position: absolute;}
.j-slide4 {width: 150px;height: 150px;position: absolute;top: 40px;left: 0px;z-index: 3;transition: 2.0s all ease-in-out 0s;-webkit-transition: 2.0s all ease-in-out 0s;-moz-transition: 2.0s all ease-in-out 0s;o-transition: 2.0s all ease-in-out 0s;}
.j-slide5 {width: 200px; height: 150px; background-color: #f7f7f7;position: absolute; top: 40px; left: 150px; z-index: 4; font:9.5px century gothic; text-align: justify; line-height: 90%;}
.j-slide6 {width: 180px; height: 50px;margin: 50px 10px;position: absolute; text-transform: uppercase; top: 0px; left: 0px; transition: 1.0s all ease-in-out 0.9s; -webkit-transition: 1.0s all ease-in-out 0.9s; -moz-transition: 1.0s all ease-in-out 0.9s;o-transition: 1.0s all ease-in-out 0.9s;opacity: 1;}
.j-slide7 {width: 177px; height: 130px;margin:10px; overflow: auto; position: absolute; padding-right: 3px;left: 150px;top: 0px; z-index: 5;transition: 1.0s all ease-in-out 0s;-webkit-transition: 1.0s all ease-in-out 0s;-moz-transition: 1.0s all ease-in-out 0s; o-transition: 1.0s all ease-in-out 0s;opacity: 0;}
.j-slide8 {text-align: center;font-family: great vibes;position: relative;font-size: 32px;color: #3C323A;text-shadow: 0.5px 0.5px 0.5px #E0981B;text-transform: lowercase;padding-bottom: 9px;z-index: 7;}
.j-slide9 {height:48px;margin: 0px auto;text-align: center;}