/* Info on Project Pages */

.red {
    display: inline-block;
	font-size: 100%
}

#title {
    /* margin-right: 25px !important; */
}

#thumbs {
    padding: 3px 3px 0 3px;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
}
#container {
    padding: 0 0 13px 0;
    /* FIXME: this is annoying */
    line-height: 15px;
    margin:0;
    position: fixed;
    bottom: 0;
    left:0;
    max-width: 500px;
}

#container h3,
#moreless p {
    margin: 0;
    font-size: 110%;
}


.textbox {
    margin-bottom: 10px;
}

#main-info {
    margin-bottom: 10px;
    width: 100%;
}

#main-info.active {
    background-image: url(images/darken-overlay.png);
    background-position: 1px 1px;
}

.textbox.hashtag{
    display: inline-block;
}

.textbox h2, .textbox h3 {
    background-color: white; 
    padding: 3px;
    display: inline-block;
    font-size: 25px;
    line-height: 110%;
    margin: 0;
}

h3.date { font-weight: normal !important; }

.textbox p{
    margin: 0;
    background-color: white;
}

.categoryButton {cursor:pointer; padding:1px 2px;}
.categoryButton:hover {color:white; background-color:#FF5000;}

.selectedCategory {
    color: white !important;
    background-color: black !important;
}

#info, #tweets {
    margin-bottom: 0;
}

#info .textbox,
#tweets p,
#tweets .content div {
    background-color: white;
    display: inline-block;
    padding: 3px;
    margin: 0;
}

.toggle .active {
    background-color: black !important;
    color: white !important;
}

#info p {
    margin: 0;
    display: block;
}

#info p .blurb{
}

#info .title{
    font-weight: bold;
}

.link-info, .link-tweets{
    display: block;
    margin-bottom: 10px;
}
.link-tweets{
    display: inline-block;
}

.link-info p, .link-tweets p{
    background-color: #FF5000;
    padding:3px;
    color: white;
    font-weight: bold;
    font-size: 110%;
    text-decoration: underline;
    display: inline-block;
    margin: 0;
}

.link-info p:hover, .link-tweets p:hover {
    cursor: pointer;
}

#scrollmore{
    background-image:url('../../photos/scrollmore.png');
    float: right;
    height: 100%;
    width: 23px;
}

/* Connected Project Thumbnails */

#otherThumbs {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
}

.otherThumb {
    display: none;
    position: fixed;
    top: -150px;
    left: -150px;
    border: 0;
    padding: 0;
    cursor:pointer;
    background-color: transparent;
}

.otherThumb a, 
.otherThumb img {
    width: 100%;
    height: 100%;
}

.objectThumb {
	cursor: pointer;
}

#large {
	position: fixed;
    height: auto;
    width: auto;
    z-index: -1;
    left: 0px;
    top: 73px;
    display: none;
}

    #large img {
        border: 3px solid white;
        width: 500px;
    }

    #large a, #large img {
        cursor: pointer;
    }

#thumbs {
	background: transparent;
	border: 3px solid #fff;
	border-width: 3px 0 0 3px;
	padding: 0;
}

#thumbs .objectThumb {
	float: left;
	line-height: 0;
	border: 3px solid #fff;
	border-width: 0 3px 3px 0;
	background: #fff;
	position: relative;
}

#thumbs .objectThumb img {
	vertical-align: middle;
}

#thumbs .objectThumb .effect {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

#thumbs .selected .effect {
	background-image: url(images/bw-stripe-overlay.png);
}

#large .source {
	display: block;
  padding: 3px;
  margin: 0 0 3px 0;
	background: #fff;
	overflow: hidden;
	max-width: 494px;
}

#large .source a {
    color: inherit !important;
	white-space: nowrap;
	display: block;
	padding: 3px 4px;
	padding-top: 0;
}

.left {
	max-width: 75%;
}

.isConnected {
    color:#808080;
    font-style:italic;
}

#num-related,
#showing {
    font-weight: bold;
}

#moreless {
    z-index: 10000;
	position: fixed;
	bottom: 0;
	right: 0;
}

body.ios #moreless {
	position: relative;
    margin-bottom: 3px;
}

    #moreless p {
        margin: 0 3px 0 0;
        display: inline-block;
        background: white;
        padding: 3px;
    }

    #moreless button {
        border: none;
        display: inline-block;
        background: #FF5000;
        color: white;
        font-size: 110%;
        font-weight: bold;
        cursor: pointer;
        width: 73px;
        text-align: left;
        padding: 2px 0 2px 4px;
        margin: 0;
        background-position: 58px center;
        background-repeat: no-repeat;
    }

    #moreless button.more {
        background-image: url(images/arrow-down.png);
    }
    #moreless button.less {
        background-image: url(images/arrow-up.png);
        /* position above the .more button */
        position: absolute;
        bottom: 100%;
        right: 0;
    }


	#moreless button:hover {
		background-color: #000000;
	}

    #moreless button.disabled {
        background-color: #666;
    }

#moreless p{
	line-height: 15px;
	margin: 0;
}

#moreless button{
	margin: 0 0 0 3px;
}

#more {
    z-index: 999;
    position: absolute;
    top: 0; /* approximate height of #nav */
    right: 0;
    background-image: url(images/scroll-more-single.png);
    background-repeat: repeat-y;
    background-position-y: 0;
    width: 18px;
    height: 1000%;
}

    #less {
        z-index: 1000;
        position: absolute;
        width: 100%;
        height: 10%;
        top: 100%;
        left: 0;
        background-image: url(images/scroll-less-single.png);
        background-repeat: repeat-y;
    }

body.ios #more{
	display: none;
}

.otherThumb {
    /* prevent tooltips from being cut off */
    overflow: visible !important;
}

.otherThumb a,
.otherThumb a .effect {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.otherThumb .effect {
    background: transparent;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

/*.otherThumb:hover {
    z-index: 1000;
}*/

.otherThumb:hover .effect {
}

.otherThumb a:visited .effect {
    background-image: url(images/round-x-overlay.png);
}

#tooltip {
    text-align: right;
    background: #FF5000;
    color: white;
    position: absolute;
    bottom: 0;
    right: 100%;
    width: auto;
    min-width: 120px;
    height: auto;
	cursor: default;
	z-index: 1;
	padding: 3px 8px 3px 3px;
	font-size: 13px;
}

#tooltip .info {
    display: block;
}

#tooltip .icons {
    margin-right: -3px; /* nudge */
}

.icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    vertical-align: top;
    /* background-color: #333; */
    background-image: url(images/icons-small.png);
    background-position: 1000px -3px; /* hide */
    background-repeat: no-repeat;
    margin-left: 3px;
}

a .icon {
    margin-left: 0;
}

.categoryButton .icon {
    width: 20px;
    background-position-y: -44px;
}

.categoryButton:hover .icon {
    background-position-y: -2px;
}

.icon-worlds { background-position: 0px -44px; }
#tooltip .icon-worlds, .categoryButton:hover .icon-worlds, 
.selectedCategory .icon-worlds { background-position: 0px -2px; }

.icon-doubleentendre,
.icon-double-entendre { background-position: -22px -44px; }
.categoryButton:hover .icon-doubleentendre, .categoryButton:hover .icon-double-entendre,
#tooltip .icon-doubleentendre, #tooltip .icon-double-entendre,
.selectedCategory .icon-doubleentendre, .selectedCategory .icon-double-entendre
{ background-position: -22px -2px; }

.icon-city { background-position: -43px -44px; }
#tooltip .icon-city, .categoryButton:hover .icon-city,
.selectedCategory .icon-city{ background-position: -43px -2px; }

.icon-life { background-position: -64px -44px; }
#tooltip .icon-life, .categoryButton:hover .icon-life,
.selectedCategory .icon-life{ background-position: -64px -2px; }

.icon-objects { background-position: -84px -44px; }
#tooltip .icon-objects, .categoryButton:hover .icon-objects,
.selectedCategory .icon-objects{ background-position: -84px -2px; }

.icon-bodies { background-position: -105px -44px; }
#tooltip .icon-bodies, .categoryButton:hover .icon-bodies, 
.selectedCategory .icon-bodies { background-position: -105px -2px; }

.icon-interactions { background-position: -126px -44px; }
#tooltip .icon-interactions, .categoryButton:hover .icon-interactions,
.selectedCategory .icon-interactions { background-position: -126px -2px; }

.icon-communications { background-position: -360px -44px; }
#tooltip .icon-communications, .categoryButton:hover .icon-communications,
.selectedCategory .icon-communications { background-position: -360px -2px; }

.icon-interfaces { background-position: -169px -44px; }
#tooltip .icon-interfaces, .categoryButton:hover .icon-interfaces,
.selectedCategory .icon-interfaces { background-position: -169px -2px; }

.icon-maps { background-position: -190px -44px; }
#tooltip .icon-maps, .categoryButton:hover .icon-maps,
.selectedCategory .icon-maps { background-position: -190px -2px; }

.icon-liminalspaces, .icon-liminal-spaces { background-position: -211px -44px; }
#tooltip .icon-liminalspaces, .categoryButton:hover .icon-liminalspaces,
#tooltip .icon-liminal-spaces, .categoryButton:hover .icon-liminal-spaces,
.selectedCategory .icon-liminalspaces, .selectedCategory .icon-liminal-spaces { background-position: -211px -2px; }

.icon-pets { background-position: -232px -44px; }
#tooltip .icon-pets, .categoryButton:hover .icon-pets,
.selectedCategory .icon-pets { background-position: -232px -2px; }

.icon-mutantsandfairytales, .icon-mutants-and-fairy-tales { background-position: -253px -44px; }
#tooltip .icon-mutantsandfairytales, .categoryButton:hover .icon-mutantsandfairytales,
#tooltip .icon-mutants-and-fairy-tales, .categoryButton:hover .icon-mutants-and-fairy-tales,
.selectedCategory .icon-mutantsandfairytales, .selectedCategory .icon-mutants-and-fairy-tales
{ background-position: -253px -2px; }

.icon-visualizations { background-position: -274px -44px; }
#tooltip .icon-visualizations, .categoryButton:hover .icon-visualizations,
.selectedCategory .icon-visualizations { background-position: -274px -2px; }

.icon-networks { background-position: -295px -44px; }
#tooltip .icon-networks, .categoryButton:hover .icon-networks,
.selectedCategory .icon-networks { background-position: -295px -2px; }

.icon-twitter { background-position: -317px -44px; width: 16px; }
.categoryButton:hover .icon-twitter,
.selectedCategory .icon-twitter { background-position: -317px -2px; }
#tooltip .icon-twitter { background-position: -320px -2px; }

.icon-criticaldesign, .icon-critical-design { background-position: -337px -44px; }
#tooltip .icon-criticaldesign, .categoryButton:hover .icon-criticaldesign,
#tooltip .icon-critical-design, .categoryButton:hover .icon-critical-design,
.selectedCategory .icon-critical-design, .selectedCategory .icon-criticaldesign
{ background-position: -337px -2px; }

.icon-opensource, .icon-open-source{background-position: -380px -44px}
.categoryButton:hover .icon-opensource, .categoryButton:hover .icon-open-source,
#tooltip .icon-opensource, #tooltip .icon-open-source,
.selectedCategory .icon-opensource, .selectedCategory .icon-open-source
{background-position: -380px -2px}


/**
 * iOS STUFF
 */

body.ios #large,
body.ios #container,
body.ios #otherThumbs {
    position: relative !important;
    clear: both;
    left: 0;
    top: 0;
}

body.ios #large {
    width: 100%;
    z-index: 0;
}

body.ios #thumbs {
    display: inline-block;
    position: relative;
}

body.ios .otherThumb {
    display: block !important;
    float: left;
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
}

body.ios .otherThumb a {
    position: relative;
    width: auto;
    height: auto;
}

body.ios #more {
    display: none;
}

body.ios #title {
    margin-right: -6px !important;
}

body.ios #scrollmore{
	display: none !important;
}

#large a.video {
    display: block;
    position: relative;
    width: 500px;
    height: 281px;
    overflow: hidden;
}

#large a.video img {
    width: 99%;
    height: auto;
}

a.video .effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(images/video-play.png);
}

@media screen and (max-device-width: 480px){
	#scrollmore{
		display: none !important;
	}
	#thumbs{
		margin-top: 80px;
	}
	#large {
		position: relative;
	}
}