Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: cb75fe072c
Fetching contributors…

Cannot retrieve contributors at this time

file 367 lines (302 sloc) 6.931 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367
/*
  Welcome to Compass.
  In this file you should write your main styles. (or centralize your imports)
  Import this file using the following HTML or equivalent:
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />

@import compass/reset
@import compass/css3

$orange: #ff4300
$grey: #222

::-moz-selection
  background: $grey
  color: #fff
  text-shadow: none

::selection
  background: $grey
  color: #fff
  text-shadow: none

html, body
  width: 100%
  height: 100%
  margin: 0
  padding: 0

body.ui
  background: #444
  font: 14px/1.2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif
  color: #222

  img
    display: block

  a
    text-decoration: none
    color: #000

  #container
    width: 1024px
    min-height: 100%
    position: relative
    float: left
    left: 50%
    margin-left: -512px
    z-index: 0
    background: #333
    @include box-shadow(rgba(0,0,0,.8) 0 0 20px)

  #background-center
    background: #444
    position: absolute
    top: 0
    bottom: 0
    width: 584px
    margin: 0 220px

  #wrapper
    width: 100%
    // padding-bottom: 44px
    overflow: hidden
    float: left

  #wrapper::before
    content: ""
    display: block
    position: absolute
    top: 0
    bottom: 0
    width: 584px
    z-index: 2
    margin: 0 220px
    @include box-shadow(rgba(0,0,0,.8) 0 0 20px)

  .column
    float: left
    position: relative
    z-index: 2

  #column_center
    width: 584px

    #video-minified
      width: 584px
      height: 44px
      @include background-image(linear-gradient(#f6f6f6, #c8c8c8))
      @include box-shadow(rgba(0,0,0,.8) 0 2px 15px)
      float: left
      position: relative
      z-index: 10
      
      img
        float: left
        margin: 4px

      h1
        font-size: 18px
        line-height: 44px
        margin-left: 4px
        float: left

      h2
        font-size: 14px
        line-height: 44px
        margin-left: 8px
        float: left
        color: #666
        padding-top: 1px

      .button-square
        float: right
        width: 36px
        height: 36px
        right: 4px
        top: 4px
        margin: 4px 4px 0 0

      #video-trigger-minified
        background: #222 image-url("ui/btn-video.png")
        width: 36px
        height: 36px
        float: right

      #info-trigger-minified
        background: $orange image-url("ui/btn-info.png")
        width: 36px
        height: 36px
        float: right

    #infocard
      @include background-image(linear-gradient(#f6f6f6, #c8c8c8))
      padding-top: 20px
      width: 100%
      float: left
      z-index: 6
      position: relative
      overflow: hidden

      #teaser
        width: 300px
        float: left

        img
          border: 4px solid #222
          margin: 0 16px 10px 16px
          float: left

        #video-trigger
          background: $orange
          color: #fff
          margin-left: 16px
          padding: 6px 8px
          float: left

      #description
        width: 268px
        float: left
        
        span
          color: $orange
  
        h1
          font-size: 28px
          line-height: 28px
          margin-bottom: 5px
  
        h2
          margin-bottom: 10px

        p
          margin-bottom: 15px
  
          a
            color: $orange

    #video
      width: 584px
      height: 365px
      float: left
      margin-top: -323px
      z-index: 5
      position: relative

    #comment-entries
      float: left

      .comment-entry
        float: left
        width: 564px
        margin-left: 20px
        margin-bottom: 10px

        .image
          width: 50px
          height: 50px
          background: #fff
          float: left
          @include border-radius(25px)
          @include box-shadow(rgba(0,0,0,.8) 0 2px 8px)

          img
            width: 44px
            height: 44px
            float: left
            margin: 3px
            @include border-radius(22px)

        .name
          color: #fff
          float: left
          margin: 8px 0 0 12px
          width: 486px

        .message
          color: #222
          float: left
          margin: 0 0 0 12px
          width: 486px

  #column_left
    width: 220px

    .sidebar-video-minified
      background: #444
      position: relative

      h3
        color: #222

    .sidebar-video-minified:hover
      background: #222

      h3
        color: #fff

  #column_right
    width: 220px

  .sidebar
    position: relative
    z-index: 0
    overflow: hidden

    .sidebar-video
      width: 180px
      @include background-image(linear-gradient(#f6f6f6, #c8c8c8))
      padding: 10px 20px
      float: left
      color: $orange
      margin-bottom: 4px

      .sidebar-title
        margin-bottom: 4px

      .sidebar-image
        border: 2px solid #222
        margin-bottom: 4px
        float: left

      h3
        color: #222

    .sidebar-video:hover
      background: #222

      img
        border-color: #ccc

      h3
        color: #ccc

    .sidebar-video-minified
      background: #222
      position: relative
      width: 170px
      padding: 10px 30px 10px 20px

      h3
        color: #ccc

      .bookmark
        width: 12px
        height: 14px
        background: image-url("ui/bookmark-default-minified.png")
        position: absolute
        top: 0
        right: 10px
        z-index: 40

      .arte7
        width: 12px
        height: 12px
        background: image-url("ui/arte7.png")
        position: absolute
        top: 16px
        right: 10px
        z-index: 40

    .sidebar-video-minified:hover
      @include background-image(linear-gradient(#f6f6f6, #c8c8c8))

      h3
        color: #222

  #footer
    width: 584px
    height: 44px
    position: absolute
    left: 220px
    bottom: 0
    z-index: 2

  #footer-inside
    width: 584px
    height: 44px
    float: left
    position: relative

    #comment_form
      
      input
        float: left
        height: 44px
        line-height: 44px
        width: 300px
        padding: 0
        margin: 0
        border: none
        padding-left: 12px
        font-size: 14px
        color: #888
        @include border-radius(0)

      #stamp_comment
        height: 26px
        width: 26px
        @include border-radius(18px)
        float: left
        display: inline-block
        border: none
        margin: 9px
        background: #444 image-url("ui/btn-stamp-default.png")

      #send_comment
        height: 26px
        line-height: 26px
        padding: 0 12px
        color: #fff
        @include border-radius(18px)
        float: left
        background: $orange
        display: inline-block
        border: none
        margin: 9px 9px 9px 0

    #login
      position: absolute
      top: 0
      right: 0
      height: 44px
      line-height: 44px
      color: #fff
      background: $orange
      width: 80px
      text-align: center
Something went wrong with that request. Please try again.