/*
Stylesheet for index.html.
*/
@import mixins
@import variables
.ui-datepicker
font-size: 70%
.twitter-typeahead
width: 100%
.tt-hint
color: $baseColor2
.tt-dropdown-menu
width: 100%
padding: 4px 0
background-color: white
border: 1px solid $baseColor2
.tt-suggestion
padding: 4px
p
margin: 0
strong
color: $baseColor1
&.tt-cursor
@extend .t1
background-color: $baseColor1
*
color: white
div#search-field
@extend .t2
bottom: 0
height: 50%
left: 0
margin: auto
margin-top: 15%
max-height: 100px
right: 0
position: absolute
top: 0
width: 40%
a#title
text-decoration: none
div#title
font-size: 400%
padding-bottom: 0.2em
text-align: center
#title-bit
color: $baseColor1
#title-angle
color: $baseColor3
#title-shift
color: $baseColor2
font-style: italic
form#search-bar
input[type="text"], button
@extend .t3
@include vendor(box-sizing, border-box)
border: 1px solid $baseColor2
font-size: 110%
margin-bottom: 0px
padding: 6px
input[type="text"]
width: 85%
&:hover
border-color: $baseColor1
button#advanced-search
background-color: white
border: 1px solid white
width: 15%
height: 10%
padding: 0px
float: right
&.clicked, &:hover
img
@extend .t3
background-color: black
cursor: pointer
&:focus
outline: 0
img
background-color: $baseColor2
margin-top: 5px
width: 26px
height: 26px
div#advanced-search
border: 1px solid $baseColor2
margin: 0px
overflow: auto
padding: 0px
// display: none
>div
@include vendor(box-sizing, border-box)
float: left
height: 100%
>#col1
width: 10%
div#group-count
font-size: 150%
margin-left: 10%
padding: 35% 0 20% 12%
#current
color: green
font-size: 140%
#seperator
color: $baseColor3
font-weight: bold
div#group-selector
margin-left: 20%
div
$triangleHeight: 40%
display: inline-block
height: 0
padding-bottom: $triangleHeight
padding-top: $triangleHeight
overflow: hidden
&:after
border-bottom: 500px solid transparent
border-top: 500px solid transparent
content: ""
display: block
height: 0
margin-top: -500px
width: 0
previous-group
width: $triangleHeight
&:after
border-right: 500px solid $baseColor3
&:hover
&:after
@extend .t3
border-right-color: green
next-group
padding-left: $triangleHeight
width: 0
&:after
border-left: 500px solid $baseColor3
margin-left: -500px
&:hover
&:after
@extend .t3
border-left-color: green
div#add-group
margin-top: -10px
margin-left: auto
margin-right: auto
width: 50%
span
color: $baseColor3
font-size: 510%
font-weight: bold
&:hover
@extend .t3
color: green
div#add-group, div#group-selector div
&:hover
cursor: pointer
>#col2
width: 84%
ul
list-style: none
li
margin-bottom: 0.5em
label
@extend .t3
&:hover
input[type="text"]
border-color: $baseColor1
label
color: black
label
display: block
font-size: 110%
color: #747575
input[type="text"]
@extend .t3
border-color: $baseColor3
font-size: 100%
padding: 4px
width: 100%
#upper-half
>div
float: left
width: 50%
#col2
input[type="text"]
width: 50%
#lower-half
padding-bottom: 20px
&.partly-visible
margin-top: 0%
padding-bottom: 3%
position: absolute
width: 100%
#title
position: absolute
top: -1%
left: 1%
span
font-size: 50%
form#search-bar
padding-top: 3%
margin-left: auto
margin-right: auto
width: 60%
div#results
margin: 3% auto 0 auto
margin-left: auto
margin-right: auto
width: 80%
div.result
background-color: #F8F8F8
margin-bottom: 10%
margin-top: 1%
padding: 1%
&.cascade
@extend .t3
margin-bottom: 0%