├── LICENSE
├── README.md
├── bower.json
├── composer.json
├── css
    ├── pine.css
    └── pine.min.css
├── examples
    ├── accordion.html
    ├── box.html
    ├── navbar.html
    └── tabs.html
├── index.html
└── js
    ├── pine.js
    └── pine.min.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 PineCSS
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![PineCSS](http://pinecss.com/images/pinenew.png "PineCSS Logo")
 2 | # [PineCSS](http://pinecss.com)
 3 | Kolay kullanımlı responsive destekli CSS Kütüphanesi.
 4 | 
 5 | Hemen başlamak için <http://pinecss.com> adresindeki dökümantasyon kısmına göz ata bilirsiniz
 6 | 
 7 | 
 8 | ## Hemen Başla
 9 | Sayfanıza alttaki şekilde pine'ı dahil ede bilirsiniz.
10 | ``` html
11 | <link rel="stylesheet" href="http://pinecss.com/v/2.0/pine.css"/>
12 | ```
13 | Daha hızlı bir pine için sıkıştırılmışını terci edebilirsiniz.
14 | ``` html
15 | <link rel="stylesheet" href="http://pinecss.com/v/2.0/pine.min.css"/>
16 | ```
17 | 
18 | Javascript Kütüphanesini altta ki şekilde dahil edebilirsiniz.
19 | ``` html
20 | <link rel="stylesheet" href="http://pinecss.com/v/2.0/pine.js"/>
21 | ```
22 | Daha hızlı bir pine için sıkıştırılmışını terci edebilirsiniz.
23 | ``` html
24 | <link rel="stylesheet" href="http://pinecss.com/v/2.0/pine.min.js"/>
25 | ```
26 | Not : Javascript kütüphanesi dahil etmeden önce jQuery kütüphanesini dahil etmeniz gerekir.
27 | Bower ile yükleme
28 | ```
29 | bower install pinecss
30 | ```
31 | Composer ile yükleme
32 | ```
33 | composer require pine-css/pine
34 | ```
35 | ### İndirdiklerim ne ?
36 | indirdiğiniz dosyaların ağaç görünümü alttadır ve detayları yanlarında yazmaktadır.
37 | ```
38 | Pine/
39 | ├── index.html ( Boş Sayfa )
40 | └── css/
41 |     └── pine.css ( Pine dosyası)
42 |     └── pine.min.css ( Küçültülmüş Pine Dosyası )
43 | └── js/
44 |     └── pine.js ( PineJS dosyası)
45 |     └── pine.min.js ( Küçültülmüş PineJS Dosyası )
46 | ```
47 | ## License
48 | Lisans Detayları -> ( EN )  [open-source MIT license](https://github.com/PineCSS/pine/blob/master/LICENSE).
49 | 
50 | ## Geliştirmen
51 | Author: [Savaş Can ALTUN](http://savascanaltun.com.tr)
52 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pinecss",
 3 |   "version": "1.1",
 4 |   "homepage": "http://pinecss.com/",
 5 |   "description": "Responsive CSS Framework",
 6 |   "main": "css/pine.min.css",
 7 |   "keywords": [
 8 |     "responsive",
 9 |     "css",
10 |     "framework"
11 |   ],"authors": [
12 |     "Savaş Can ALTUN <savascanaltun@gmail.com> (http://savascanaltun.com.tr/)"
13 |   ],
14 |   "license": "MIT",
15 |   "ignore": [
16 |     "**/.*",
17 |     "node_modules",
18 |     "bower_components",
19 |     "test",
20 |     "tests"
21 |   ],
22 |   "dependencies": {
23 |    "jquery": "1.9.1 - 3"
24 |  }
25 | }
26 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pine-css/pine",
 3 |   "description": "Responsive CSS Framework ( PineCSS )",
 4 |   "keywords": [
 5 |     "css",
 6 |     "js",
 7 |     "PineJS",
 8 |     "PineCSS",
 9 |     "responsive",
10 |     "front-end",
11 |     "framework",
12 |     "web"
13 |   ],
14 |   "homepage": "http://pinecss.com",
15 |   "authors": [
16 |     {
17 |       "name": "Savaş Can ALTUN",
18 |       "email": "savascanaltun@gmail.com"
19 |     }
20 |   ],
21 |   "support": {
22 |     "issues": "https://github.com/pineCSS/pine/issues"
23 |   },
24 |   "license": "MIT"
25 | 
26 |   
27 | }
28 | 


--------------------------------------------------------------------------------
/css/pine.css:
--------------------------------------------------------------------------------
   1 | /*
   2 | * PineCSS v2.0
   3 | * Copyright 2014 - 2016, Savas Can ALTUN <savascanaltun@gmail.com>
   4 | * http:://github.com/pineCSS/pine
   5 | * http://pinecss.com
   6 | */
   7 | /* Base Styles
   8 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
   9 | 
  10 | html {
  11 |     font-size: 62.5%;
  12 | }
  13 | body {
  14 |     font-size: 1.5em;
  15 |     line-height: 1.6;
  16 |     font-weight: 400;
  17 |     font-family: source-sans-pro, helvetica, arial, sans-serif;
  18 |     -webkit-text-size-adjust: 100%;
  19 |     -ms-text-size-adjust: 100%;
  20 |     color: #222;
  21 | }
  22 | /* Typography
  23 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
  24 | 
  25 | h1,
  26 | h2,
  27 | h3,
  28 | h4,
  29 | h5,
  30 | h6 {
  31 |     margin-top: 0;
  32 |     margin-bottom: 2rem;
  33 |     font-weight: 300;
  34 | }
  35 | h1 {
  36 |     font-size: 4.0rem;
  37 |     line-height: 1.2;
  38 |     letter-spacing: -.1rem;
  39 | }
  40 | h2 {
  41 |     font-size: 3.6rem;
  42 |     line-height: 1.25;
  43 |     letter-spacing: -.1rem;
  44 | }
  45 | h3 {
  46 |     font-size: 3.0rem;
  47 |     line-height: 1.3;
  48 |     letter-spacing: -.1rem;
  49 | }
  50 | h4 {
  51 |     font-size: 2.4rem;
  52 |     line-height: 1.35;
  53 |     letter-spacing: -.08rem;
  54 | }
  55 | h5 {
  56 |     font-size: 1.8rem;
  57 |     line-height: 1.5;
  58 |     letter-spacing: -.05rem;
  59 | }
  60 | h6 {
  61 |     font-size: 1.5rem;
  62 |     line-height: 1.6;
  63 |     letter-spacing: 0;
  64 | }
  65 | @media (min-width: 550px) {
  66 |     h1 {
  67 |         font-size: 5.0rem;
  68 |     }
  69 |     h2 {
  70 |         font-size: 4.2rem;
  71 |     }
  72 |     h3 {
  73 |         font-size: 3.6rem;
  74 |     }
  75 |     h4 {
  76 |         font-size: 3.0rem;
  77 |     }
  78 |     h5 {
  79 |         font-size: 2.4rem;
  80 |     }
  81 |     h6 {
  82 |         font-size: 1.5rem;
  83 |     }
  84 | }
  85 | p {
  86 |     margin-top: 0;
  87 | }
  88 | /* links */
  89 | 
  90 | a {
  91 |     color: #1EAEDB;
  92 |     text-decoration: none;
  93 | }
  94 | a:hover {
  95 |     color: #0FA0CE;
  96 | }
  97 | hr {
  98 |     margin-top: 3rem;
  99 |     margin-bottom: 3.5rem;
 100 |     border-width: 0;
 101 |     border-top: 1px solid #E1E1E1;
 102 | }
 103 | /* Grid System
 104 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 105 | 
 106 | .container {
 107 |     position: relative;
 108 |     width: 100%;
 109 |     max-width: 960px;
 110 |     margin: 0 auto;
 111 |     padding: 0 20px;
 112 |     box-sizing: border-box;
 113 | }
 114 | .col,
 115 | .cols {
 116 |     width: 100%;
 117 |     float: left;
 118 |     box-sizing: border-box;
 119 | }
 120 | /* For devices larger than 400px */
 121 | 
 122 | @media (min-width: 400px) {
 123 |     .container {
 124 |         width: 85%;
 125 |         padding: 0;
 126 |     }
 127 | }
 128 | /* For devices larger than 550px */
 129 | 
 130 | @media (min-width: 550px) {
 131 |     .container {
 132 |         width: 80%;
 133 |     }
 134 |     .col,
 135 |     .cols {
 136 |         margin-left: 4%;
 137 |     }
 138 |     .col:first-child,
 139 |     .cols:first-child {
 140 |         margin-left: 0;
 141 |     }
 142 |     .grid-1.col,
 143 |     .grid-1.cols {
 144 |         width: 4.66666666667%;
 145 |     }
 146 |     .grid-2.cols {
 147 |         width: 13.3333333333%;
 148 |     }
 149 |     .grid-3.cols {
 150 |         width: 22%;
 151 |     }
 152 |     .grid-4.cols {
 153 |         width: 30.6666666667%;
 154 |     }
 155 |     .grid-5.cols {
 156 |         width: 39.3333333333%;
 157 |     }
 158 |     .grid-6.cols {
 159 |         width: 48%;
 160 |     }
 161 |     .grid-7.cols {
 162 |         width: 56.6666666667%;
 163 |     }
 164 |     .grid-8.cols {
 165 |         width: 65.3333333333%;
 166 |     }
 167 |     .grid-9.cols {
 168 |         width: 74.0%;
 169 |     }
 170 |     .grid-10.cols {
 171 |         width: 82.6666666667%;
 172 |     }
 173 |     .grid-11.cols {
 174 |         width: 91.3333333333%;
 175 |     }
 176 |     .grid-12.cols {
 177 |         width: 100%;
 178 |         margin-left: 0;
 179 |     }
 180 |     .grid-1-short.col {
 181 |         width: 48%;
 182 |     }
 183 |     /* Offsets */
 184 |     
 185 |     .offset-by-grid-1.col,
 186 |     .offset-by-grid-1.cols {
 187 |         margin-left: 8.66666666667%;
 188 |     }
 189 |     .offset-by-grid-2.col,
 190 |     .offset-by-grid-2.cols {
 191 |         margin-left: 17.3333333333%;
 192 |     }
 193 |     .offset-by-grid-3.col,
 194 |     .offset-by-grid-3.cols {
 195 |         margin-left: 26%;
 196 |     }
 197 |     .offset-by-grid-4.col,
 198 |     .offset-by-grid-4.cols {
 199 |         margin-left: 34.6666666667%;
 200 |     }
 201 |     .offset-by-grid-5.col,
 202 |     .offset-by-grid-5.cols {
 203 |         margin-left: 43.3333333333%;
 204 |     }
 205 |     .offset-by-grid-6.col,
 206 |     .offset-by-grid-6.cols {
 207 |         margin-left: 52%;
 208 |     }
 209 |     .offset-by-grid-7.col,
 210 |     .offset-by-grid-7.cols {
 211 |         margin-left: 60.6666666667%;
 212 |     }
 213 |     .offset-by-grid-8.col,
 214 |     .offset-by-grid-8.cols {
 215 |         margin-left: 69.3333333333%;
 216 |     }
 217 |     .offset-by-grid-9.col,
 218 |     .offset-by-grid-9.cols {
 219 |         margin-left: 78.0%;
 220 |     }
 221 |     .offset-by-grid-10.col,
 222 |     .offset-by-grid-10.cols {
 223 |         margin-left: 86.6666666667%;
 224 |     }
 225 |     .offset-by-grid-11.col,
 226 |     .offset-by-grid-11.cols {
 227 |         margin-left: 95.3333333333%;
 228 |     }
 229 |     .offset-by-grid-1-short.col,
 230 |     .offset-by-grid-1-short.cols {
 231 |         margin-left: 52%;
 232 |     }
 233 | }
 234 | /* Buttons 
 235 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 236 | 
 237 | .button,
 238 | button,
 239 | input[type="submit"],
 240 | input[type="reset"],
 241 | input[type="button"] {
 242 |     display: inline-block;
 243 |     height: 38px;
 244 |     padding: 0 30px;
 245 |     color: #555;
 246 |     text-align: center;
 247 |     font-size: 11px;
 248 |     font-weight: 600;
 249 |     line-height: 38px;
 250 |     letter-spacing: .1rem;
 251 |     text-transform: uppercase;
 252 |     text-decoration: none;
 253 |     white-space: nowrap;
 254 |     background-color: transparent;
 255 |     border-radius: 4px;
 256 |     border: 1px solid #bbb;
 257 |     cursor: pointer;
 258 |     box-sizing: border-box;
 259 | }
 260 | .button:hover,
 261 | button:hover,
 262 | input[type="submit"]:hover,
 263 | input[type="reset"]:hover,
 264 | input[type="button"]:hover,
 265 | .button:focus,
 266 | button:focus,
 267 | input[type="submit"]:focus,
 268 | input[type="reset"]:focus,
 269 | input[type="button"]:focus {
 270 |     color: #333;
 271 |     border-color: #888;
 272 |     outline: 0;
 273 | }
 274 | .button:disabled{
 275 |      border: 1px solid #E3E3E3;
 276 |     color: #888;
 277 |     cursor: not-allowed;
 278 | }
 279 | 
 280 | /* Button Primary */
 281 | 
 282 | .button.button-primary,
 283 | button.button-primary,
 284 | input[type="submit"].button-primary,
 285 | input[type="reset"].button-primary,
 286 | input[type="button"].button-primary {
 287 |     color: #FFF;
 288 |     background-color: #33C3F0;
 289 |     border-color: #33C3F0;
 290 | }
 291 | .button.button-primary:hover,
 292 | button.button-primary:hover,
 293 | input[type="submit"].button-primary:hover,
 294 | input[type="reset"].button-primary:hover,
 295 | input[type="button"].button-primary:hover,
 296 | .button.button-primary:focus,
 297 | button.button-primary:focus,
 298 | input[type="submit"].button-primary:focus,
 299 | input[type="reset"].button-primary:focus,
 300 | input[type="button"].button-primary:focus {
 301 |     color: #FFF;
 302 |     background-color: #1EAEDB;
 303 |     border-color: #1EAEDB;
 304 | }
 305 | .button.button-primary:disabled{
 306 |     background-color: #72cbe6;
 307 |     border-color: #72cbe6;
 308 |     cursor: not-allowed;
 309 | }
 310 | /* Button Danger */
 311 | 
 312 | .button.button-danger,
 313 | button.button-danger,
 314 | input[type="submit"].button-danger,
 315 | input[type="reset"].button-danger,
 316 | input[type="button"].button-danger {
 317 |     color: #FFF;
 318 |     background-color: #ff0039;
 319 |     border-color: #ff0039;
 320 | }
 321 | .button.button-danger:hover,
 322 | button.button-danger:hover,
 323 | input[type="submit"].button-danger:hover,
 324 | input[type="reset"].button-danger:hover,
 325 | input[type="button"].button-danger:hover,
 326 | .button.button-primary:focus,
 327 | button.button-primary:focus,
 328 | input[type="submit"].button-danger:focus,
 329 | input[type="reset"].button-danger:focus,
 330 | input[type="button"].button-danger:focus {
 331 |     color: #FFF;
 332 |     background-color: #cc002e;
 333 |     border-color: #cc002e;
 334 | }
 335 | .button.button-danger:disabled{
 336 |     background-color: #f34f4f;
 337 |     border-color: #f34f4f;
 338 |     cursor: not-allowed;
 339 | }
 340 | /* Button Warning */
 341 | 
 342 | .button.button-warning,
 343 | button.button-warning,
 344 | input[type="submit"].button-warning,
 345 | input[type="reset"].button-warning,
 346 | input[type="button"].button-warning {
 347 |     color: #FFF;
 348 |     background-color: #e45c00;
 349 |     border-color: #e45c00;
 350 | }
 351 | .button.button-warning:hover,
 352 | button.button-warning:hover,
 353 | input[type="submit"].button-warning:hover,
 354 | input[type="reset"].button-warning:hover,
 355 | input[type="button"].button-warning:hover,
 356 | .button.button-primary:focus,
 357 | button.button-primary:focus,
 358 | input[type="submit"].button-warning:focus,
 359 | input[type="reset"].button-warning:focus,
 360 | input[type="button"].button-warning:focus {
 361 |     color: #FFF;
 362 |     background-color: #ff7518;
 363 |     border-color: #ff7518;
 364 | }
 365 | .button.button-warning:disabled{
 366 |     background-color: #fd8534;
 367 |     border-color: #fd8534;
 368 |     cursor: not-allowed;
 369 | }
 370 | /* Button Success */
 371 | 
 372 | .button.button-success,
 373 | button.button-success,
 374 | input[type="submit"].button-success,
 375 | input[type="reset"].button-success,
 376 | input[type="button"].button-success {
 377 |     color: #FFF;
 378 |     background-color: #3fb618;
 379 |     border-color: #3fb618;
 380 | }
 381 | .button.button-success:hover,
 382 | button.button-success:hover,
 383 | input[type="submit"].button-success:hover,
 384 | input[type="reset"].button-success:hover,
 385 | input[type="button"].button-success:hover,
 386 | .button.button-primary:focus,
 387 | button.button-primary:focus,
 388 | input[type="submit"].button-success:focus,
 389 | input[type="reset"].button-success:focus,
 390 | input[type="button"].button-success:focus {
 391 |     color: #FFF;
 392 |     background-color: #2f8912;
 393 |     border-color: #2f8912;
 394 | }
 395 | .button.button-success:disabled{
 396 |     background-color: #5bbd3b;
 397 |     border-color: #5bbd3b;
 398 |     cursor: not-allowed;
 399 | }
 400 | /* Button İnfo */
 401 | 
 402 | .button.button-info,
 403 | button.button-info,
 404 | input[type="submit"].button-info,
 405 | input[type="reset"].button-info,
 406 | input[type="button"].button-info {
 407 |     color: #FFF;
 408 |     background-color: #9954bb;
 409 |     border-color: #9954bb;
 410 | }
 411 | .button.button-info:hover,
 412 | button.button-info:hover,
 413 | input[type="submit"].button-info:hover,
 414 | input[type="reset"].button-info:hover,
 415 | input[type="button"].button-info:hover,
 416 | .button.button-primary:focus,
 417 | button.button-primary:focus,
 418 | input[type="submit"].button-info:focus,
 419 | input[type="reset"].button-info:focus,
 420 | input[type="button"].button-info:focus {
 421 |     color: #FFF;
 422 |     background-color: #7e3f9d;
 423 |     border-color: #7e3f9d;
 424 | }
 425 | .button.button-info:disabled{
 426 |     background-color: #a773c1;
 427 |     border-color: #a773c1;
 428 |     cursor: not-allowed;
 429 | }
 430 | /* Forms
 431 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 432 | 
 433 | input[type="email"],
 434 | input[type="search"],
 435 | input[type="text"],
 436 | input[type="tel"],
 437 | input[type="date"],
 438 | input[type="color"],
 439 | input[type="url"],
 440 | input[type="file"],
 441 | input[type="password"],
 442 | textarea,
 443 | select {
 444 |     height: 38px;
 445 |     padding: 6px 10px;
 446 |     background-color: #fff;
 447 |     border: 1px solid #D1D1D1;
 448 |     border-radius: 4px;
 449 |     box-shadow: none;
 450 |     box-sizing: border-box;
 451 | }
 452 | input[type="email"],
 453 | input[type="search"],
 454 | input[type="text"],
 455 | input[type="tel"],
 456 | input[type="date"],
 457 | input[type="color"],
 458 | input[type="url"],
 459 | input[type="file"],
 460 | input[type="password"],
 461 | textarea {
 462 |     -webkit-appearance: none;
 463 |     -moz-appearance: none;
 464 |     appearance: none;
 465 | }
 466 | textarea {
 467 |     min-height: 65px;
 468 |     padding-top: 6px;
 469 |     padding-bottom: 6px;
 470 | }
 471 | input[type="email"]:focus,
 472 | input[type="search"]:focus,
 473 | input[type="text"]:focus,
 474 | input[type="tel"]:focus,
 475 | input[type="date"]:focus,
 476 | input[type="color"]:focus,
 477 | input[type="url"]:focus,
 478 | input[type="password"]:focus,
 479 | textarea:focus,
 480 | select:focus {
 481 |     border: 1px solid #33C3F0;
 482 |     outline: 0;
 483 | }
 484 | label,
 485 | legend {
 486 |     display: block;
 487 |     margin-bottom: .5rem;
 488 |     font-weight: 600;
 489 | }
 490 | fieldset {
 491 |     padding: 0;
 492 |     border-width: 0;
 493 | }
 494 | input[type="checkbox"],
 495 | input[type="radio"] {
 496 |     display: inline;
 497 | }
 498 | label > .label-body {
 499 |     display: inline-block;
 500 |     margin-left: .5rem;
 501 |     font-weight: normal;
 502 | }
 503 | input.input-danger,
 504 | textarea.input-danger,
 505 | select.input-danger,
 506 | .input-danger {
 507 |     border-color: #ff0039;
 508 | }
 509 | input.input-success,
 510 | textarea.input-success,
 511 | select.input-success,
 512 | .input-success {
 513 |     border-color: #3fb618;
 514 | }
 515 | input.input-info,
 516 | textarea.input-info,
 517 | select.input-info,
 518 | .input-info {
 519 |     border-color: #9954bb;
 520 | }
 521 | input.input-primary,
 522 | textarea.input-primary,
 523 | select.input-primary,
 524 | .input-primary {
 525 |     border-color: #33C3F0;
 526 | }
 527 | input.input-warning,
 528 | textarea.input-warning,
 529 | select.input-warning,
 530 | .input-warning {
 531 |     border-color: #e45c00;
 532 | }
 533 | /* Lists
 534 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 535 | 
 536 | ul {
 537 |     list-style: circle inside;
 538 | }
 539 | ol {
 540 |     list-style: decimal inside;
 541 | }
 542 | ol,
 543 | ul {
 544 |     padding-left: 0;
 545 |     margin-top: 0;
 546 | }
 547 | ul ul,
 548 | ul ol,
 549 | ol ol,
 550 | ol ul {
 551 |     margin: 1.5rem 0 1.5rem 3rem;
 552 |     font-size: 90%;
 553 | }
 554 | li {
 555 |     margin-bottom: 1rem;
 556 | }
 557 | /* Code
 558 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 559 | 
 560 | code {
 561 |     padding: .2rem .5rem;
 562 |     margin: 0 .2rem;
 563 |     font-size: 90%;
 564 |     white-space: nowrap;
 565 |     background: #F1F1F1;
 566 |     border: 1px solid #E1E1E1;
 567 |     border-radius: 4px;
 568 |     word-wrap: break-word;
 569 | }
 570 | pre > code {
 571 |     display: block;
 572 |     padding: 1rem 1.5rem;
 573 |     white-space: pre;
 574 |     word-wrap: break-word;
 575 | }
 576 | /* Tables
 577 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 578 | 
 579 | th,
 580 | td {
 581 |     padding: 12px 15px;
 582 |     text-align: left;
 583 |     border-bottom: 1px solid #E1E1E1;
 584 | }
 585 | th:first-child,
 586 | td:first-child {
 587 |     padding-left: 5;
 588 | }
 589 | th:last-child,
 590 | td:last-child {
 591 |     padding-right: 5;
 592 | }
 593 | /* hover table class */
 594 | 
 595 | .table-hover tr:hover {
 596 |     background-color: #ddd;
 597 | }
 598 | /* İmages
 599 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 600 | 
 601 | .img-thumbnail {
 602 |     display: inline-block;
 603 |     max-width: 100%;
 604 |     height: auto;
 605 |     padding: 4px;
 606 |     line-height: 1.42857143;
 607 |     background-color: #fff;
 608 |     border: 1px solid #ddd;
 609 |     border-radius: 4px;
 610 |     -webkit-transition: all .2s ease-in-out;
 611 |     -o-transition: all .2s ease-in-out;
 612 |     transition: all .2s ease-in-out;
 613 | }
 614 | .img-circle {
 615 |     border-radius: 50%;
 616 | }
 617 | .img-circle-border {
 618 |     border-radius: 50%;
 619 |     height: auto;
 620 |     padding: 4px;
 621 |     line-height: 1.42857143;
 622 |     background-color: #fff;
 623 |     border: 1px solid #ddd;
 624 |     -webkit-transition: all .2s ease-in-out;
 625 |     -o-transition: all .2s ease-in-out;
 626 |     transition: all .2s ease-in-out;
 627 | }
 628 | .img-rounded {
 629 |     border-radius: 6px;
 630 | }
 631 | .img-grayscale {
 632 |     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 633 |     /* Firefox 10+, Firefox on Android */
 634 |     
 635 |     filter: gray;
 636 |     /* IE6-9 */
 637 |     
 638 |     -webkit-filter: grayscale(100%);
 639 |     /* Chrome 19+, Safari 6+, Safari 6+ iOS */
 640 | }
 641 | .img-blur {
 642 |     filter: blur(5px);
 643 |     /* Someday, sigh ... */
 644 |     
 645 |     -webkit-filter: blur(5px);
 646 |     /* Prefixed CSS3 blur filters */
 647 |     
 648 |     -moz-filter: blur(5px);
 649 |     -o-filter: blur(5px);
 650 |     -ms-filter: blur(5px);
 651 |     filter: url(#blur);
 652 |     /* Firefox needs SVG */
 653 |     
 654 |     filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='5');
 655 |     /* IE lte 9 */
 656 | }
 657 | .img-blur:hover {
 658 |     filter: blur(0px);
 659 |     /* Someday, sigh ... */
 660 |     
 661 |     -webkit-filter: blur(0px);
 662 |     /* Prefixed CSS3 blur filters */
 663 |     
 664 |     -moz-filter: blur(0px);
 665 |     -o-filter: blur(0px);
 666 |     -ms-filter: blur(0px);
 667 |     filter: url(#blur);
 668 |     /* Firefox needs SVG */
 669 |     
 670 |     filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='0');
 671 |     /* IE lte 9 */
 672 | }
 673 | }
 674 | /* Tools
 675 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 676 | 
 677 | blockquote {
 678 |     background: #ccc;
 679 |     border-left: 10px solid #ccc;
 680 |     margin: 1.5em 10px;
 681 |     padding: 0.5em 10px;
 682 |     quotes: "\201C""\201D""\2018""\2019";
 683 | }
 684 | blockquote:before {
 685 |     color: #207957;
 686 |     content: open-quote;
 687 |     font-size: 4em;
 688 |     line-height: 0.1em;
 689 |     margin-right: 0.25em;
 690 |     vertical-align: -0.4em;
 691 | }
 692 | blockquote p {
 693 |     display: inline;
 694 | }
 695 | .bg-primary {
 696 |     color: #fff;
 697 |     background-color: #33c3f0;
 698 | }
 699 | .bg-success {
 700 |     background-color: #a0d28c;
 701 | }
 702 | .bg-info {
 703 |     background-color: #9954bb;
 704 | }
 705 | .bg-warning {
 706 |     background-color: #e45c00;
 707 | }
 708 | .bg-danger {
 709 |     color: #fff;
 710 |     background-color: #ff0039;
 711 | }
 712 | /* jumbo */
 713 | 
 714 | .jumbo {
 715 |     padding: 30px 15px;
 716 |     margin-bottom: 30px;
 717 |     color: inherit;
 718 |     background-color: #eee;
 719 | }
 720 | .jumbo h1,
 721 | .jumbo .h1 {
 722 |     color: inherit;
 723 | }
 724 | .jumbo p {
 725 |     margin-bottom: 15px;
 726 |     font-size: 21px;
 727 |     font-weight: 200;
 728 | }
 729 | .container .jumbo,
 730 | .container-fluid .jumbo {
 731 |     border-radius: 6px;
 732 | }
 733 | .jumbo .container {
 734 |     max-width: 100%;
 735 | }
 736 | @media screen and (min-width: 768px) {
 737 |     .jumbo {
 738 |         padding: 48px 0;
 739 |     }
 740 |     .container .jumbo,
 741 |     .container-fluid .jumbjumbootron {
 742 |         padding-right: jumbo;
 743 |         padding-left: 60px;
 744 |     }
 745 |     .jumbo h1,
 746 |     .jumbo .h1 {
 747 |         font-size: 63px;
 748 |     }
 749 | }
 750 | .border {
 751 |     border: 1px solid #E1E1E1;
 752 | }
 753 | /* responsive video area */
 754 | 
 755 | .video-area {
 756 |     height: 0;
 757 |     padding-bottom: 56.25%;
 758 |     position: relative;
 759 |     margin-bottom: 1.65em;
 760 | }
 761 | .video-area iframe,
 762 | .video-area object,
 763 | .video-area embed {
 764 |     position: absolute;
 765 |     top: 0;
 766 |     left: 0;
 767 |     width: 100%;
 768 |     height: 100%;
 769 | }
 770 | .rotate:hover {
 771 |     transition: all 1s;
 772 |     -moz-transition: all 1s;
 773 |     -webkit-transition: all 1s;
 774 |     -o-transition: all 12s;
 775 |     transform: rotateX(360deg);
 776 |     -moz-transform: rotateX(360deg);
 777 |     -webkit-transform: rotateX(360deg);
 778 |     -o-transform: rotateX(360deg);
 779 | }
 780 | .rotate-2:hover {
 781 |     background: #3498db;
 782 |     border-bottom: 4px solid #2980b9;
 783 |     transition: all 2s;
 784 |     -moz-transition: all 2s;
 785 |     -webkit-transition: all 2s;
 786 |     -o-transition: all 2s;
 787 |     transform: rotateY(360deg);
 788 |     -moz-transform: rotateY(360deg);
 789 |     -webkit-transform: rotateY(360deg);
 790 |     -o-transform: rotateY(360deg);
 791 | }
 792 | /* Text
 793 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 794 | 
 795 | .text-blur {
 796 |     color: transparent;
 797 |     text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 798 | }
 799 | .text-blur:hover {
 800 |     color: #222;
 801 |     text-shadow: 0 0 0px;
 802 | }
 803 | .text-center {
 804 |     text-align: center;
 805 | }
 806 | .text-right {
 807 |     text-align: right;
 808 | }
 809 | .text-left {
 810 |     text-align: left;
 811 | }
 812 | .text-bold {
 813 |     font-weight: bold;
 814 | }
 815 | /* Width ( 10.20.30.40.50.60.70.80.90.100 )
 816 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 817 | 
 818 | .width-10 {
 819 |     width: 10%;
 820 | }
 821 | .width-20 {
 822 |     width: 20%;
 823 | }
 824 | .width-30 {
 825 |     width: 30%;
 826 | }
 827 | .width-40 {
 828 |     width: 40%;
 829 | }
 830 | .width-50 {
 831 |     width: 50%;
 832 | }
 833 | .width-60 {
 834 |     width: 60%;
 835 | }
 836 | .width-70 {
 837 |     width: 70%;
 838 | }
 839 | .width-80 {
 840 |     width: 80%;
 841 | }
 842 | .width-90 {
 843 |     width: 90%;
 844 | }
 845 | .width-100 {
 846 |     width: 100%;
 847 | }
 848 | /* Utilities
 849 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 850 | 
 851 | .full-width {
 852 |     width: 100%;
 853 |     box-sizing: border-box;
 854 | }
 855 | .max-full-width {
 856 |     max-width: 100%;
 857 |     box-sizing: border-box;
 858 | }
 859 | .pull-right {
 860 |     float: right;
 861 | }
 862 | .pull-left {
 863 |     float: left;
 864 | }
 865 | /* Spacing
 866 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 867 | 
 868 | button,
 869 | .button {
 870 |     margin-bottom: 1rem;
 871 | }
 872 | input,
 873 | textarea,
 874 | select,
 875 | fieldset {
 876 |     margin-bottom: 1.5rem;
 877 | }
 878 | pre,
 879 | blockquote,
 880 | form,
 881 | dl,
 882 | figure,
 883 | table,
 884 | p,
 885 | ul,
 886 | ol,
 887 | form {
 888 |     margin-bottom: 2.5rem;
 889 | }
 890 | p {
 891 |     margin-top: 0;
 892 | }
 893 | 
 894 | /* PineJS Elements 
 895 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 896 | 
 897 | /* PineBOX
 898 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 899 | 
 900 | .pinebox {
 901 |     display: none; 
 902 |     position: fixed; 
 903 |     z-index: 1; 
 904 |     padding-top: 100px; 
 905 |     left: 0;
 906 |     top: 0;
 907 |     button:;
 908 |     width: 100%; 
 909 |     height: 100%; 
 910 |     overflow: auto; 
 911 |     background-color: rgba(0,0,0,0.4); 
 912 | 
 913 | }
 914 | 
 915 | /* PineBox Content */
 916 | .pinebox-content {
 917 |     background-color: #fefefe;
 918 |     margin: auto;
 919 |     position: fixed;
 920 |     right: 0;
 921 |     left: 0;
 922 |     padding: 20px;
 923 |     border: 3px solid #34495e;
 924 |     width: 50%;
 925 | }
 926 | 
 927 |   
 928 | /* PineAccordion
 929 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 930 | button.pineaccordion {
 931 | 
 932 |     color: #555;
 933 |     cursor: pointer;
 934 |     text-align: left;
 935 |     outline: none;
 936 |     font-size: 15px;
 937 |     transition: 0.4s;
 938 |     border-top: 2px solid #34495e;
 939 |     border-left: 2px solid #ddd;
 940 |     border-right: 2px solid #ddd;
 941 |     border-bottom: 3px solid #fff;
 942 |  
 943 | }
 944 | 
 945 | 
 946 | 
 947 | button.pineaccordion:after {
 948 |     content: '\02795';
 949 |     font-size: 13px;
 950 |     color: #555;
 951 |     margin-left: 5px;
 952 | }
 953 | 
 954 | button.pineaccordion.active:after {
 955 |     content: "\2796";
 956 | }
 957 | 
 958 | div.pineaccordion-panel {
 959 |     border: 2px solid #ddd;
 960 |     margin-top:-11px;
 961 |     padding: 0 20px;
 962 |     background-color: white;
 963 |     max-height: 0;
 964 |     overflow: hidden;
 965 |     transition: 0.6s ease-in-out;
 966 |     opacity: 0;
 967 | }
 968 | 
 969 | div.pineaccordion-panel.show {
 970 |     opacity: 1;
 971 |     max-height: 500px;
 972 | }
 973 | 
 974 | 
 975 |   
 976 | /* PineTabs
 977 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
 978 | ul.pinetabs{
 979 |     margin: 0px;
 980 |     padding: 0px;
 981 |     list-style: none;
 982 | }
 983 | ul.pinetabs li{
 984 |     background: none;
 985 |     color: #222;
 986 |     display: inline-block;
 987 |     padding: 10px 15px;
 988 |     cursor: pointer;
 989 |     display: inline-block;
 990 |     margin: 0 0 -1px;
 991 |     padding: 15px 25px;
 992 |     font-weight: 600;
 993 |     text-align: center;
 994 |     color: #bbb;
 995 |     border: 1px solid transparent;
 996 | }
 997 | 
 998 | ul.pinetabs li.current{
 999 |     color: #555;
1000 |     border: 1px solid #ddd;
1001 |     border-top: 2px solid #34495e;
1002 |     border-bottom: 1px solid #fff;
1003 | 
1004 | }
1005 | 
1006 | .pinetabs-content{
1007 |     display: none;
1008 |     background: none;
1009 |     padding: 15px;
1010 |     border: 1px solid #ddd;
1011 | }
1012 | 
1013 | .pinetabs-content.current{
1014 |     display: inherit;
1015 | }
1016 | 
1017 | 
1018 | /* Pine Navbar 
1019 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
1020 | nav.primary{
1021 | 
1022 |     background-color: #34495e;
1023 | 
1024 | }
1025 | nav.primary ul,
1026 | nav.primary ul li {
1027 |     margin: 0px;
1028 | }
1029 | 
1030 | nav.primary select {
1031 |     display: none;
1032 |     width:  100%;
1033 |     height: 28px;
1034 |     margin: 21px 0;
1035 | }
1036 | 
1037 | nav.primary ul li {
1038 |     display: inline;
1039 |     float: left;
1040 |     position: relative;
1041 | }
1042 | 
1043 | nav.primary ul li.active {
1044 |     background-color: #2c3c4c;
1045 | }
1046 | 
1047 | nav.primary ul li a {
1048 |     display: inline-block;
1049 |     line-height: 49px;
1050 |     padding:  0 14px;
1051 |     color: #ebebeb;
1052 |     text-transform: uppercase;
1053 |     text-decoration: none;
1054 |     font-weight: bold;
1055 |     letter-spacing: 0.08em;
1056 | }
1057 | 
1058 | nav.primary ul li a:hover {
1059 |     background: #2c3c4c;
1060 |     cursor: pointer;
1061 | }
1062 | 
1063 | /*sub menu*/
1064 | nav.primary ul ul {
1065 |     opacity: 0; 
1066 |     filter: alpha(opacity=0); 
1067 |     position: absolute;
1068 |     top:100%;
1069 |     left: 0;
1070 |     z-index: 999999;
1071 |     background-color:#34495e;
1072 |     height: 0px;
1073 |     overflow: hidden;
1074 |     min-width: 100%;
1075 |     -webkit-transition: opacity 0.4s ease-out;
1076 |     -moz-transition: opacity 0.4s ease-out;
1077 |     -o-transition: opacity 0.4s ease-out;
1078 |     -ms-transition: opacity 0.4s ease-out;
1079 |     transition: opacity 0.4s ease-out;
1080 |     
1081 |     -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
1082 |     -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
1083 |     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 
1084 | }
1085 | 
1086 | nav.primary ul li span {
1087 |     display: none;
1088 | }
1089 | 
1090 | nav.primary ul li:hover ul {
1091 |     opacity: 10; 
1092 |     filter: alpha(opacity=100); 
1093 |     list-style-type: none;
1094 |     height: auto;
1095 |     overflow: auto;
1096 |     
1097 |     display: block;
1098 | }
1099 | 
1100 | nav.primary ul ul li {
1101 |     float: none;
1102 |     display: list-item;
1103 |     border-bottom: 1px solid #383737;
1104 | }
1105 | 
1106 | nav.primary ul ul li a {
1107 |     display: block;
1108 |     line-height: 35px;
1109 |     text-transform: none;
1110 |     position: relative;
1111 |     z-index: 999999;
1112 | }
1113 | 
1114 | nav.primary ul li:hover > a {
1115 |     background: #2c3c4c;
1116 | }
1117 | 
1118 | 
1119 | 
1120 |   .pinenavbar select {
1121 |     display: none;
1122 |   }
1123 | 
1124 | 
1125 | @media (max-width: 960px) {
1126 |   .pinenavbar .primary{display: none;}
1127 |   .pinenavbar  select { display: inline-block; }
1128 | }
1129 | 
1130 | 
1131 | 
1132 | /* Clearing
1133 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
1134 | 
1135 | .container:after,
1136 | .row:after,
1137 | .u-cf {
1138 |     content: "";
1139 |     display: table;
1140 |     clear: both;
1141 | }
1142 | /* Media Queries
1143 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
1144 | /* Larger than mobile */
1145 | 
1146 | @media (min-width: 400px) {}
1147 | /* Larger than phablet   */
1148 | 
1149 | @media (min-width: 550px) {}
1150 | /* Larger than tablet */
1151 | 
1152 | @media (min-width: 750px) {}
1153 | /* Larger than desktop */
1154 | 
1155 | @media (min-width: 1000px) {}
1156 | /* Larger than Desktop HD */
1157 | 
1158 | @media (min-width: 1200px) {}
1159 | 


--------------------------------------------------------------------------------
/css/pine.min.css:
--------------------------------------------------------------------------------
1 | /*
2 | * PineCSS v2.0
3 | * Copyright 2014 - 2016, Savas Can ALTUN <savascanaltun@gmail.com>
4 | * http:://github.com/pineCSS/pine
5 | * http://pinecss.com
6 | */
7 | h1,h2,h3{letter-spacing:-.1rem}body,h6{line-height:1.6}.col,.cols,.container{width:100%;box-sizing:border-box}code,pre>code{word-wrap:break-word}html{font-size:62.5%}body{font-size:1.5em;font-weight:400;font-family:source-sans-pro,helvetica,arial,sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:3rem;line-height:1.3}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;letter-spacing:0}a{color:#1EAEDB;text-decoration:none}a:hover{color:#0FA0CE}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1}.container{position:relative;max-width:960px;margin:0 auto;padding:0 20px}.img-thumbnail,.jumbo .container{max-width:100%}ol,p,ul{margin-top:0}.col,.cols{float:left}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}.container{width:80%}.col,.cols{margin-left:4%}.col:first-child,.cols:first-child,.grid-12.cols{margin-left:0}.grid-1.col,.grid-1.cols{width:4.66666666667%}.grid-2.cols{width:13.3333333333%}.grid-3.cols{width:22%}.grid-4.cols{width:30.6666666667%}.grid-5.cols{width:39.3333333333%}.grid-6.cols{width:48%}.grid-7.cols{width:56.6666666667%}.grid-8.cols{width:65.3333333333%}.grid-9.cols{width:74%}.grid-10.cols{width:82.6666666667%}.grid-11.cols{width:91.3333333333%}.grid-12.cols{width:100%}.grid-1-short.col{width:48%}.offset-by-grid-1.col,.offset-by-grid-1.cols{margin-left:8.66666666667%}.offset-by-grid-2.col,.offset-by-grid-2.cols{margin-left:17.3333333333%}.offset-by-grid-3.col,.offset-by-grid-3.cols{margin-left:26%}.offset-by-grid-4.col,.offset-by-grid-4.cols{margin-left:34.6666666667%}.offset-by-grid-5.col,.offset-by-grid-5.cols{margin-left:43.3333333333%}.offset-by-grid-6.col,.offset-by-grid-6.cols{margin-left:52%}.offset-by-grid-7.col,.offset-by-grid-7.cols{margin-left:60.6666666667%}.offset-by-grid-8.col,.offset-by-grid-8.cols{margin-left:69.3333333333%}.offset-by-grid-9.col,.offset-by-grid-9.cols{margin-left:78%}.offset-by-grid-10.col,.offset-by-grid-10.cols{margin-left:86.6666666667%}.offset-by-grid-11.col,.offset-by-grid-11.cols{margin-left:95.3333333333%}.offset-by-grid-1-short.col,.offset-by-grid-1-short.cols{margin-left:52%}}.button,button,input[type=submit],input[type=reset],input[type=button]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:focus,.button:hover,button:focus,button:hover,input[type=submit]:focus,input[type=submit]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=button]:focus,input[type=button]:hover{color:#333;border-color:#888;outline:0}.button:disabled{border:1px solid #E3E3E3;color:#888;cursor:not-allowed}.button.button-primary,button.button-primary,input[type=submit].button-primary,input[type=reset].button-primary,input[type=button].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:focus,.button.button-primary:hover,button.button-primary:focus,button.button-primary:hover,input[type=submit].button-primary:focus,input[type=submit].button-primary:hover,input[type=reset].button-primary:focus,input[type=reset].button-primary:hover,input[type=button].button-primary:focus,input[type=button].button-primary:hover{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}.button.button-primary:disabled{background-color:#72cbe6;border-color:#72cbe6;cursor:not-allowed}.button.button-danger,button.button-danger,input[type=submit].button-danger,input[type=reset].button-danger,input[type=button].button-danger{color:#FFF;background-color:#ff0039;border-color:#ff0039}.button.button-danger:hover,.button.button-primary:focus,button.button-danger:hover,button.button-primary:focus,input[type=submit].button-danger:focus,input[type=submit].button-danger:hover,input[type=reset].button-danger:focus,input[type=reset].button-danger:hover,input[type=button].button-danger:focus,input[type=button].button-danger:hover{color:#FFF;background-color:#cc002e;border-color:#cc002e}.button.button-danger:disabled{background-color:#f34f4f;border-color:#f34f4f;cursor:not-allowed}.button.button-warning,button.button-warning,input[type=submit].button-warning,input[type=reset].button-warning,input[type=button].button-warning{color:#FFF;background-color:#e45c00;border-color:#e45c00}.button.button-primary:focus,.button.button-warning:hover,button.button-primary:focus,button.button-warning:hover,input[type=submit].button-warning:focus,input[type=submit].button-warning:hover,input[type=reset].button-warning:focus,input[type=reset].button-warning:hover,input[type=button].button-warning:focus,input[type=button].button-warning:hover{color:#FFF;background-color:#ff7518;border-color:#ff7518}.button.button-warning:disabled{background-color:#fd8534;border-color:#fd8534;cursor:not-allowed}.button.button-success,button.button-success,input[type=submit].button-success,input[type=reset].button-success,input[type=button].button-success{color:#FFF;background-color:#3fb618;border-color:#3fb618}.button.button-primary:focus,.button.button-success:hover,button.button-primary:focus,button.button-success:hover,input[type=submit].button-success:focus,input[type=submit].button-success:hover,input[type=reset].button-success:focus,input[type=reset].button-success:hover,input[type=button].button-success:focus,input[type=button].button-success:hover{color:#FFF;background-color:#2f8912;border-color:#2f8912}.button.button-success:disabled{background-color:#5bbd3b;border-color:#5bbd3b;cursor:not-allowed}.button.button-info,button.button-info,input[type=submit].button-info,input[type=reset].button-info,input[type=button].button-info{color:#FFF;background-color:#9954bb;border-color:#9954bb}.button.button-info:hover,.button.button-primary:focus,button.button-info:hover,button.button-primary:focus,input[type=submit].button-info:focus,input[type=submit].button-info:hover,input[type=reset].button-info:focus,input[type=reset].button-info:hover,input[type=button].button-info:focus,input[type=button].button-info:hover{color:#FFF;background-color:#7e3f9d;border-color:#7e3f9d}.button.button-info:disabled{background-color:#a773c1;border-color:#a773c1;cursor:not-allowed}input[type=file],input[type=password],input[type=email],input[type=search],input[type=text],input[type=tel],input[type=date],input[type=color],input[type=url],select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type=file],input[type=password],input[type=email],input[type=search],input[type=text],input[type=tel],input[type=date],input[type=color],input[type=url],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,input[type=text]:focus,input[type=tel]:focus,input[type=date]:focus,input[type=color]:focus,input[type=url]:focus,select:focus,textarea:focus{border:1px solid #33C3F0;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type=checkbox],input[type=radio]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}.input-danger,input.input-danger,select.input-danger,textarea.input-danger{border-color:#ff0039}.input-success,input.input-success,select.input-success,textarea.input-success{border-color:#3fb618}.input-info,input.input-info,select.input-info,textarea.input-info{border-color:#9954bb}.input-primary,input.input-primary,select.input-primary,textarea.input-primary{border-color:#33C3F0}.input-warning,input.input-warning,select.input-warning,textarea.input-warning{border-color:#e45c00}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}td:first-child,th:first-child{padding-left:5}td:last-child,th:last-child{padding-right:5}.table-hover tr:hover{background-color:#ddd}.img-circle-border,.img-thumbnail{height:auto;padding:4px;line-height:1.42857143;background-color:#fff}.img-thumbnail{display:inline-block;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}.img-circle-border{border-radius:50%;border:1px solid #ddd;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.container .jumbo,.container-fluid .jumbo,.img-rounded{border-radius:6px}.img-grayscale{filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%)}.img-blur{-webkit-filter:blur(5px);-moz-filter:blur(5px);-o-filter:blur(5px);-ms-filter:blur(5px);filter:url(#blur);filter:progid: DXImageTransform.Microsoft.Blur(PixelRadius='5')}.img-blur:hover{-webkit-filter:blur(0);-moz-filter:blur(0);-o-filter:blur(0);-ms-filter:blur(0);filter:url(#blur);filter:progid: DXImageTransform.Microsoft.Blur(PixelRadius='0')}blockquote{background:#ccc;border-left:10px solid #ccc;margin:1.5em 10px;padding:.5em 10px;quotes:"\201C""\201D""\2018""\2019"}blockquote:before{color:#207957;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em}blockquote p{display:inline}.bg-primary{color:#fff;background-color:#33c3f0}.bg-success{background-color:#a0d28c}.bg-info{background-color:#9954bb}.bg-warning{background-color:#e45c00}.bg-danger{color:#fff;background-color:#ff0039}.jumbo,.jumbo .h1,.jumbo h1{color:inherit}.jumbo{padding:30px 15px;margin-bottom:30px;background-color:#eee}.jumbo p{margin-bottom:15px;font-size:21px;font-weight:200}@media screen and (min-width:768px){.jumbo{padding:48px 0}.container .jumbo,.container-fluid .jumbjumbootron{padding-right:jumbo;padding-left:60px}.jumbo .h1,.jumbo h1{font-size:63px}}.border{border:1px solid #E1E1E1}.video-area{height:0;padding-bottom:56.25%;position:relative;margin-bottom:1.65em}.video-area embed,.video-area iframe,.video-area object{position:absolute;top:0;left:0;width:100%;height:100%}.rotate:hover{transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 12s;transform:rotateX(360deg);-moz-transform:rotateX(360deg);-webkit-transform:rotateX(360deg);-o-transform:rotateX(360deg)}.rotate-2:hover{background:#3498db;border-bottom:4px solid #2980b9;transition:all 2s;-moz-transition:all 2s;-webkit-transition:all 2s;-o-transition:all 2s;transform:rotateY(360deg);-moz-transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-o-transform:rotateY(360deg)}.text-blur{color:transparent;text-shadow:0 0 5px rgba(0,0,0,.5)}.text-blur:hover{color:#222;text-shadow:0 0 0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-bold{font-weight:700}.width-10{width:10%}.width-20{width:20%}.width-30{width:30%}.width-40{width:40%}.width-50{width:50%}.width-60{width:60%}.width-70{width:70%}.width-80{width:80%}.width-90{width:90%}.pinebox,.width-100{width:100%}.full-width{width:100%;box-sizing:border-box}.max-full-width{max-width:100%;box-sizing:border-box}.pull-right{float:right}.pull-left{float:left}.button,button{margin-bottom:1rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}.pinebox{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.pinebox-content{background-color:#fefefe;margin:auto;position:fixed;right:0;left:0;padding:20px;border:3px solid #34495e;width:50%}button.pineaccordion{color:#555;cursor:pointer;text-align:left;outline:0;font-size:15px;transition:.4s;border-top:2px solid #34495e;border-left:2px solid #ddd;border-right:2px solid #ddd;border-bottom:3px solid #fff}button.pineaccordion:after{content:'\02795';font-size:13px;color:#555;margin-left:5px}button.pineaccordion.active:after{content:"\2796"}div.pineaccordion-panel{border:2px solid #ddd;margin-top:-11px;padding:0 20px;background-color:#fff;max-height:0;overflow:hidden;transition:.6s ease-in-out;opacity:0}div.pineaccordion-panel.show{opacity:1;max-height:500px}ul.pinetabs{margin:0;padding:0;list-style:none}ul.pinetabs li{background:0 0;cursor:pointer;display:inline-block;margin:0 0 -1px;padding:15px 25px;font-weight:600;text-align:center;color:#bbb;border:1px solid transparent}ul.pinetabs li.current{color:#555;border:1px solid #ddd;border-top:2px solid #34495e;border-bottom:1px solid #fff}.pinetabs-content{display:none;background:0 0;padding:15px;border:1px solid #ddd}.pinetabs-content.current{display:inherit}nav.primary{background-color:#34495e}nav.primary ul,nav.primary ul li{margin:0}nav.primary select{display:none;width:100%;height:28px;margin:21px 0}nav.primary ul li{display:inline;float:left;position:relative}nav.primary ul li.active{background-color:#2c3c4c}nav.primary ul li a{display:inline-block;line-height:49px;padding:0 14px;color:#ebebeb;text-transform:uppercase;text-decoration:none;font-weight:700;letter-spacing:.08em}nav.primary ul li a:hover{background:#2c3c4c;cursor:pointer}nav.primary ul ul{opacity:0;filter:alpha(opacity=0);position:absolute;top:100%;left:0;z-index:999999;background-color:#34495e;height:0;overflow:hidden;min-width:100%;-webkit-transition:opacity .4s ease-out;-moz-transition:opacity .4s ease-out;-o-transition:opacity .4s ease-out;-ms-transition:opacity .4s ease-out;transition:opacity .4s ease-out;-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3);-moz-box-shadow:0 2px 2px rgba(0,0,0,.3);box-shadow:0 2px 2px rgba(0,0,0,.3)}nav.primary ul li span{display:none}nav.primary ul li:hover ul{opacity:10;filter:alpha(opacity=100);list-style-type:none;height:auto;overflow:auto;display:block}nav.primary ul ul li{float:none;display:list-item;border-bottom:1px solid #383737}nav.primary ul ul li a{display:block;line-height:35px;text-transform:none;position:relative;z-index:999999}nav.primary ul li:hover>a{background:#2c3c4c}.pinenavbar select{display:none}@media (max-width:960px){.pinenavbar .primary{display:none}.pinenavbar select{display:inline-block}}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}
8 | 


--------------------------------------------------------------------------------
/examples/accordion.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8">
 5 |       <title>PineCSS</title>
 6 |       <link rel="stylesheet" type="text/css" href="http://pinecss.com/v/2.0/pine.min.css" />
 7 |       <style type="text/css">
 8 |       </style>
 9 |    </head>
10 |    <body>
11 |       <div class="container">
12 |          <a href="http://pinecss.com"><img class="max-full-with" alt="PineCSS" src="http://uptc.xyz/SIX3oqHMrXdfe.png" /></a>
13 |          <h1>PineAccordion Example Page</h1>
14 |          <hr/>
15 |         
16 | 
17 |         <button class="pineaccordion">Section 1</button>
18 | <div class="pineaccordion-panel">
19 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
20 | </div>
21 | 
22 | <button class="pineaccordion">Section 2</button>
23 | <div class="pineaccordion-panel">
24 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
25 | </div>
26 | 
27 | <button class="pineaccordion">Section 3</button>
28 | <div id="foo" class="pineaccordion-panel">
29 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
30 | </div>
31 | 
32 | 
33 | <hr>
34 | <h5>Full Width</h5>
35 |         <hr>
36 |  <button class="pineaccordion full-width">Section 1</button>
37 | <div class="pineaccordion-panel">
38 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
39 | </div>
40 | 
41 | <button class="pineaccordion full-width">Section 2</button>
42 | <div class="pineaccordion-panel">
43 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
44 | </div>
45 | 
46 | <button class="pineaccordion full-width">Section 3</button>
47 | <div id="foo" class="pineaccordion-panel">
48 |   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
49 | </div>
50 | 
51 | 
52 | 
53 | 
54 | 
55 |       </div>
56 |       <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
57 |       <script type="text/javascript" src="http://pinecss.com/v/2.0/pine.min.js"></script>
58 |    </body>
59 | </html>


--------------------------------------------------------------------------------
/examples/box.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8">
 5 |       <title>PineCSS</title>
 6 |       <link rel="stylesheet" type="text/css" href="http://pinecss.com/v/2.0/pine.min.css" />
 7 |       <style type="text/css">
 8 |       </style>
 9 |    </head>
10 |    <body>
11 |       <div class="container">
12 |          <a href="http://pinecss.com"><img class="max-full-with" alt="PineCSS" src="http://uptc.xyz/SIX3oqHMrXdfe.png" /></a>
13 |          <h1>PineBox Example Page</h1>
14 |          <hr/>
15 |          <a id="pinebox1" class="button button-danger">PineBox 1</a>
16 |          <!-- PineBox -->
17 |          <div id="PineBox1" class="pinebox">
18 |             <!-- PineBox content -->
19 |             <div class="pinebox-content">
20 |                <p>
21 |                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus nisl mauris, eu molestie lectus congue vitae. Praesent tortor sapien, aliquam a imperdiet condimentum, elementum eu tellus. Phasellus vitae rutrum nulla. Pellentesque et sapien id felis lacinia efficitur in dictum lorem. Integer auctor massa id nunc euismod, sed viverra elit varius. Duis libero lacus, mollis vel rutrum euismod, aliquet vitae nisl. Aenean id dolor rutrum, interdum ipsum in, molestie urna. Nunc vulputate est lorem, at suscipit metus tempor non. Aenean mollis nunc in consectetur varius. Nullam finibus maximus nulla vitae varius. Nunc ut risus eu eros porttitor cursus. Proin eget est at lacus accumsan cursus faucibus pretium tellus. Sed at feugiat tellus, eu convallis nisl. Duis at tortor et erat ultricies suscipit. Donec accumsan auctor lorem, non sollicitudin ante lacinia vitae.
22 |                </p>
23 |                <p>
24 |                   Sed quis ipsum tempus, viverra ante eget, venenatis lorem. Nam mollis urna ante, ac faucibus libero tempus ut. Nam volutpat ex id ullamcorper consectetur. Praesent sagittis hendrerit tellus id sollicitudin. Morbi id laoreet lectus. Quisque magna diam, ornare et blandit ac, euismod eget ligula. Donec commodo nibh massa, in bibendum lectus rhoncus ut. Donec lobortis lacinia magna a suscipit.
25 |                </p>
26 |                <p>
27 |                   Etiam eget ex ut turpis viverra maximus eget ut arcu. In scelerisque laoreet venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dolor tortor, scelerisque id commodo vel, aliquet at ex. Suspendisse sollicitudin mauris sit amet suscipit ornare. Praesent bibendum consectetur finibus. Nullam eros risus, feugiat id porttitor nec, commodo at nulla. Aliquam quis est a massa auctor ultrices. Donec ullamcorper accumsan eros eget venenatis. Nunc pretium sed massa a vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas quis purus ornare, facilisis ligula ut, dapibus dolor.
28 |                </p>
29 |                <p>
30 |                   Nam rhoncus porttitor massa quis malesuada. Pellentesque porta porta odio vitae elementum. Etiam sed risus ut enim dignissim placerat non nec ex. In placerat leo nulla, eget dictum ex dapibus in. Phasellus metus augue, sagittis a dictum et, porta id diam. Curabitur ut felis eros. Donec vitae feugiat leo, eget convallis mi. Etiam pellentesque mauris libero, sed dignissim orci consectetur in. Vivamus vitae iaculis neque. Cras eu vehicula nisl, ac accumsan est. Etiam ut neque vitae mauris iaculis eleifend. Integer viverra cursus sagittis. Pellentesque nulla ex, varius at dui non, feugiat tincidunt erat.
31 |                </p>
32 |                <p>
33 |                   Sed laoreet orci in euismod sodales. Aenean gravida consectetur placerat. Pellentesque pretium gravida aliquam. Etiam sem magna, gravida quis justo non, varius tristique urna. Nullam rhoncus neque ac turpis posuere, in venenatis lacus maximus. In condimentum, eros et fermentum dictum, libero leo posuere turpis, euismod consectetur risus mi vel nisl. Sed porta dictum tortor, at malesuada magna volutpat a. Fusce a risus efficitur, ultrices felis sit amet, consectetur elit. Suspendisse tempus ipsum est, ut suscipit nulla sagittis sed. Aliquam nisl dolor, blandit eget magna nec, varius efficitur dui. Pellentesque id commodo sem.
34 |                </p>
35 |                <a href="#" class="button button-danger full-width pinebox-close">Close</a>
36 |             </div>
37 |          </div>
38 |          <hr>
39 |          <a id="pinebox2" class="button button-danger">PineBox 2</a>
40 |          <!-- PineBox -->
41 |          <div id="PineBox2" class="pinebox">
42 |             <!-- PineBox content -->
43 |             <div class="pinebox-content">
44 |                <p><img class="max-full-width" src="https://camo.githubusercontent.com/10ceb46f31cf987cde9d371284a8f43c00b5668b/687474703a2f2f70696e656373732e636f6d2f696d616765732f70696e656e65772e706e67" alt="PineCSS"></p>
45 |                <a href="#" class="button button-danger full-width pinebox-close">Close</a>
46 |             </div>
47 |          </div>
48 |       </div>
49 |       <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
50 |       <script type="text/javascript" src="http://pinecss.com/v/2.0/pine.min.js"></script>
51 |       <script type="text/javascript">
52 |          $('#pinebox1').pinebox({
53 |              'id': 'PineBox1',
54 |              'escape': true
55 |          
56 |          });
57 |          
58 |          $('#pinebox2').pinebox({
59 |              'id': 'PineBox2',
60 |          
61 |          
62 |          });
63 |       </script>
64 |    </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/examples/navbar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8">
 5 |       <title>PineCSS</title>
 6 |       <link rel="stylesheet" type="text/css" href="http://pinecss.com/v/2.0/pine.min.css" />
 7 |       <style type="text/css">
 8 |       </style>
 9 |    </head>
10 |    <body>
11 |       <div class="container">
12 |          <a href="http://pinecss.com"><img class="max-full-with" alt="PineCSS" src="http://uptc.xyz/SIX3oqHMrXdfe.png" /></a>
13 |          <h1>PineNavbar Example Page</h1>
14 |          <hr/>
15 |         
16 | 
17 |   
18 |     <div class="pinenavbar">
19 |       <nav class="primary container">
20 |     
21 |       <ul>
22 |     
23 |         <li class="active"><a href="#">Active Menu</a></li>
24 |         <li><a href="#">Menu</a></li>
25 |         <li><a href="#">Menu</a></li>
26 |         <li><a href="#">Sub Menu</a>
27 |             <ul>
28 |               <li><a href="">Sub 1</a></li>
29 |               <li><a href="">Sub 2</a></li>
30 |               <li><a href="">Sub 3</a></li>
31 |               <li><a href="">Sub 4</a></li>
32 |               <li><a href="">Sub 5</a></li>
33 |             </ul>
34 |         </li>
35 |         <li><a href="#">Menu</a></li>
36 |         <li><a href="#">Menu</a></li>
37 |         <li><a href="#">Menu</a></li>
38 |     
39 |       </ul>
40 |     
41 |     </nav>
42 |    </div>
43 |   
44 | 
45 | 
46 | 
47 |       </div>
48 |       <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
49 |       <script type="text/javascript" src="http://pinecss.com/v/2.0/pine.min.js"></script>
50 |    </body>
51 | </html>


--------------------------------------------------------------------------------
/examples/tabs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8">
 5 |       <title>PineCSS</title>
 6 |       <link rel="stylesheet" type="text/css" href="http://pinecss.com/v/2.0/pine.min.css" />
 7 |       <style type="text/css">
 8 |       </style>
 9 |    </head>
10 |    <body>
11 |       <div class="container">
12 |          <a href="http://pinecss.com"><img class="max-full-with" alt="PineCSS" src="http://uptc.xyz/SIX3oqHMrXdfe.png" /></a>
13 |          <h1>PineTabs Example Page</h1>
14 |          <hr/>
15 |          <ul class="pinetabs">
16 |             <li class="tab-link current" data-tab="tab-1">Tab One</li>
17 |             <li class="tab-link" data-tab="tab-2">Tab Two</li>
18 |             <li class="tab-link" data-tab="tab-3">Tab Three</li>
19 |             <li class="tab-link" data-tab="tab-4">Tab Four</li>
20 |             <li class="tab-link" data-tab="tab-5">Tab Five</li>
21 |          </ul>
22 |          <div id="tab-1" class="pinetabs-content current">
23 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum, est ac efficitur gravida, ligula odio laoreet lacus, eu varius magna lacus non lacus. Morbi vitae metus sit amet tellus viverra luctus. Suspendisse cursus massa quis odio sodales sodales. Ut nec egestas nisi, non rhoncus ex. Morbi placerat neque ligula, at fermentum velit semper at. Sed sed ornare urna. Nulla facilisis dolor efficitur metus sollicitudin, nec dapibus magna interdum. Proin vehicula ac quam interdum auctor.
24 |          </div>
25 |          <div id="tab-2" class="pinetabs-content">
26 |             Curabitur id sem id arcu efficitur molestie. Vivamus quam nunc, elementum id tempor ut, sodales tincidunt diam. Sed bibendum arcu et nisi viverra molestie. Nam sit amet dui ullamcorper, tristique lectus porttitor, convallis augue. Nullam luctus nisl eget fringilla maximus. Curabitur a tellus pellentesque, varius massa eu, vulputate eros. Nunc efficitur dolor ac tellus sagittis porttitor. Duis aliquet turpis nunc, tempor efficitur nunc euismod id. Proin consectetur porttitor gravida. Nulla in lectus vitae dolor efficitur condimentum.
27 |          </div>
28 |          <div id="tab-3" class="pinetabs-content">
29 |             Nulla semper sollicitudin vulputate. Proin cursus fringilla velit, sed bibendum urna mollis a. Duis vulputate commodo pellentesque. Sed lacinia in ante et viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed purus ante, finibus in tempor id, porttitor quis libero. Sed blandit mi eu tortor malesuada convallis.
30 |          </div>
31 |          <div id="tab-4" class="pinetabs-content">
32 |             Quisque lobortis ligula quam, ut malesuada ipsum maximus a. Quisque sed viverra erat. Duis pulvinar est eros, at vestibulum tellus sodales id. Nulla varius ut libero vel ullamcorper. Nulla blandit lorem id enim auctor, sit amet tincidunt dui blandit. Aenean sed risus vel lectus porta venenatis. Cras efficitur nisi tellus, sit amet cursus orci tincidunt eu. Nulla dui justo, consectetur sed eros ac, rutrum euismod massa. Nam vitae tempor erat. Sed mattis, risus vel commodo dapibus, arcu urna eleifend eros, sit amet tempor nunc elit vel nulla. Fusce eget lectus mattis, sodales odio in, imperdiet diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pretium mi at tristique bibendum. Vivamus nibh mi, rutrum ac elit a, suscipit molestie enim.
33 |          </div>
34 |          <div id="tab-5" class="pinetabs-content">
35 |             Curabitur eu arcu cursus, viverra ante blandit, aliquet eros. Proin molestie ante nec nisi sodales posuere. Suspendisse eleifend sem arcu, non tempor massa vehicula imperdiet. Etiam ut metus fermentum, blandit sem sed, venenatis leo. Sed eu feugiat tellus. Donec dictum turpis id ipsum rutrum, eu condimentum sapien aliquet. Morbi id diam ac felis maximus finibus. Proin vitae felis nec velit facilisis tempor. Fusce suscipit neque in velit accumsan, vitae molestie mauris ornare. Aenean tincidunt ultricies nisl. Integer non dolor urna. Proin et mattis risus. Donec ut feugiat velit, a lacinia est.
36 |          </div>
37 |       </div>
38 |       <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
39 |       <script type="text/javascript" src="http://pinecss.com/v/2.0/pine.min.js"></script>
40 |    </body>
41 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>PineCSS</title>
 6 | 	<link rel="stylesheet" type="text/css" href="http://pinecss.com/v/2.0/pine.min.css"/>
 7 | </head>
 8 | <body>
 9 | 	<div class="container">
10 | 	<h1>Welcome PineCSS v2</h1>
11 | 		<p>Example Page</p>
12 | 	</div>
13 | 	  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
14 |       <script type="text/javascript" src="http://pinecss.com/v/2.0/pine.min.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/js/pine.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * PineJS (http://pinecss.com)
  3 |  * Copyright 2016, Savas Can ALTUN <savascanaltun@gmail.com>
  4 |  * http://github.com/pineCSS/pine
  5 |  */
  6 | if (typeof jQuery === 'undefined') {
  7 |     throw new Error('PineCSS requires jQuery')
  8 | }
  9 | 
 10 | 
 11 | 
 12 | // PineBOX //
 13 | 
 14 | $.fn.pinebox = function(options) {
 15 | 
 16 | 
 17 |     var pinebox = $("#" + options.id);
 18 | 
 19 |     var escape = options.escape;
 20 | 
 21 | 
 22 |     this.click(function() {
 23 | 
 24 |         window.onclick = function(event) {
 25 | 
 26 |             if (event.target == document.getElementById(options.id)) {
 27 |                 pinebox.hide();
 28 |             }
 29 |         }
 30 | 
 31 | 
 32 |         pinebox.show();
 33 | 
 34 |     });
 35 | 
 36 |     // Close box button 
 37 |     $('.pinebox-close').click(function() {
 38 |         pinebox.hide();
 39 | 
 40 |     });
 41 | 
 42 |     // Escape
 43 |     if (escape) {
 44 |         $(document).keyup(function(e) {
 45 | 
 46 |             if (e.keyCode === 27) pinebox.hide(); // escape
 47 | 
 48 |         });
 49 |     }
 50 | 
 51 | 
 52 | };
 53 | 
 54 | // PineTabs //
 55 | 
 56 | $('ul.pinetabs li').click(function() {
 57 |     var tab_id = $(this).attr('data-tab');
 58 | 
 59 |     $('ul.pinetabs li').removeClass('current');
 60 |     $('.pinetabs-content').removeClass('current');
 61 | 
 62 |     $(this).addClass('current');
 63 |     $("#" + tab_id).addClass('current');
 64 | });
 65 | 
 66 | 
 67 | // PineAccordion //
 68 | 
 69 | var accordion = document.getElementsByClassName("pineaccordion");
 70 | for (var i = 0; i < accordion.length; i++) {
 71 |     accordion[i].onclick = function() {
 72 |         this.classList.toggle("active");
 73 |         this.nextElementSibling.classList.toggle("show");
 74 |     }
 75 | }
 76 | 
 77 | // Pine Navbar //
 78 | 
 79 | 
 80 | 
 81 | $("<select class='full-width'/>").appendTo(".pinenavbar");
 82 | 
 83 | 
 84 | $("<option />", {
 85 |     "selected": "selected",
 86 |     "value": "",
 87 |     "text": "MENU"
 88 | }).appendTo(".pinenavbar select");
 89 | 
 90 | $(".pinenavbar nav li a").each(function() {
 91 |     var el = $(this);
 92 | 
 93 | 
 94 |     $("<option />", {
 95 |         "value": el.attr("href"),
 96 |         "text": el.text()
 97 |     }).appendTo(".pinenavbar select");
 98 | 
 99 | 
100 |     $(".pinenavbar select").change(function() {
101 |         window.location = $(this).find("option:selected").val();
102 |     });
103 | });


--------------------------------------------------------------------------------
/js/pine.min.js:
--------------------------------------------------------------------------------
1 | /*
2 |  * PineJS (http://pinecss.com)
3 |  * Copyright 2016, Savas Can ALTUN <savascanaltun@gmail.com>
4 |  * http://github.com/pineCSS/pine
5 |  */
6 | if("undefined"==typeof jQuery)throw new Error("PineCSS requires jQuery");$.fn.pinebox=function(a){var b=$("#"+a.id),c=a.escape;this.click(function(){window.onclick=function(c){c.target==document.getElementById(a.id)&&b.hide()},b.show()}),$(".pinebox-close").click(function(){b.hide()}),c&&$(document).keyup(function(a){27===a.keyCode&&b.hide()})},$("ul.pinetabs li").click(function(){var a=$(this).attr("data-tab");$("ul.pinetabs li").removeClass("current"),$(".pinetabs-content").removeClass("current"),$(this).addClass("current"),$("#"+a).addClass("current")});for(var accordion=document.getElementsByClassName("pineaccordion"),i=0;i<accordion.length;i++)accordion[i].onclick=function(){this.classList.toggle("active"),this.nextElementSibling.classList.toggle("show")};$("<select class='full-width'/>").appendTo(".pinenavbar"),$("<option />",{selected:"selected",value:"",text:"MENU"}).appendTo(".pinenavbar select"),$(".pinenavbar nav li a").each(function(){var a=$(this);$("<option />",{value:a.attr("href"),text:a.text()}).appendTo(".pinenavbar select"),$(".pinenavbar select").change(function(){window.location=$(this).find("option:selected").val()})});


--------------------------------------------------------------------------------