@import "nib"
@import "vendor/base.css"
@import "vendor/skeleton.css"
@import "vendor/layout.css"
@import "vendor/prettify.css"

green = #080
lightGreen = #D3F3D3

//global styles
h3
  text-decoration: underline
b
  font-weight: bold
i
  font-style: italic !important

input:focus, button
  outline none
input[type="radio"],
label[for]
  cursor: pointer
.main
  position: relative
  margin-top: 100px
  margin-bottom: 100px
.center
  text-align: center
.left
  text-align: left
.right
  text-align: right
.italic
  font-style: italic
.bold
  font-weight: bold
.inline
  display: inline
.sixteen.columns
  margin-bottom: 50px
.section
  margin-top: 20px

//links - base customised
a, a:visited
  color: green
  outline: 0
  text-decoration: none
a
  &:hover,
  &:focus
    color: darken(green, 50%)
p a, p a:visited
  line-height: inherit

//formatting
.indent1
  margin-left: 10px
.indent2
  margin-left: 20px

//code
code
  color: green
  &.black
    color: #181818

pre.prettyprint
  word-wrap: break-word
  font-family: 'Droid Sans Mono', Courier
  border: none
  transition: all 0.3s ease-out
  padding: 10px
  margin-bottom: 10px
  &.runnable
    border-left: green 1px solid
    cursor: pointer
  &:hover
    background: whiteSmoke
  &.running
    background: lightGreen

//positioning
.pos-chooser-dial
  cursor: pointer

.box.pos-chooser-demo
  color: black
  padding: 20px

//api
.entry
  margin-left: 10px
  padding: 10px
  &:hover
    background: whiteSmoke

//misc
.demo-mouse
  relative: left 250px top 30px
  transition: all 1s ease-out
  &.over
    top: -30px
    left: 125px

.box
  color: green
  font-weight: bold
  border: green
  padding: 3px
  border-radius: 5px

//build tool
.build-tool-toggle
  margin: 20px
  display: none
  box-shadow: 1px 1px 30px 1px green

.columns.build-tool
  display: none
  background: whiteSmoke
  padding: 25px 25px 5px 25px

  input,textarea,button,select
    margin-bottom: 5px
  hr
    margin-bottom: 15px

  select
    display: inline
    height: 32px

  .build-tool-style
    padding: 3px
    margin: 5px 0
    background: #ccc
    border-radius: 3px

    .name
      display: inline
    .name,.code
      width: 100%
      box-sizing: border-box
    .code
      font-family: 'Droid Sans Mono', Courier
      height: 215px

.notifyjs-gswg-base
  font-family Helvetica, Arial
  opacity 0.85
  width 325px
  background #e48632
  padding 15px
  border-radius 10px
  .content
    .cover
      float left
      background url('http://gswg.io/img/cover2.jpg')
      background-size cover
      width 105px
      height 130px
    .text
      float left
      width 200px
      padding-left 15px
      padding-top 10px
      color white
      .title
        font-weight bold
      button
        margin-bottom 2px

//chris coyers clearfix
.clearfix:after 
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
  
.clearfix 
  display: inline-block;
/* start commented backslash hack \*/
* html .clearfix 
  height: 1%
.clearfix
  display: block