Team:Carnegie Mellon/Gallery

From 2014.igem.org

(Difference between revisions)
 
(22 intermediate revisions not shown)
Line 1: Line 1:
 +
<html lang="en">
 +
  <head>
 +
    <meta charset="utf-8">
 +
    <title>Carousel Template &middot; Bootstrap</title>
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
 +
    <!-- Le styles -->
 +
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
 +
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
 +
    <style>
-
<html>
 
-
    <head>
 
-
        <title>{Title}</title>
 
-
        <link rel="shortcut icon" href="{Favicon}">
 
-
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
 
-
       
 
-
        {block:Description}
 
-
            <meta name="description" content="{MetaDescription}" />
 
-
        {/block:Description}
 
-
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
-
        {block:IndexPage}
 
-
        <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
 
-
        <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
 
-
        {/block:IndexPage}
 
-
       
 
-
        <meta name="image:Background" content=""/>
 
-
       
 
-
        <meta name="color:Background" content="#ffffff"/>
 
-
        <meta name="color:Text" content="#000000"/>
 
-
        <meta name="color:Link" content="#515151"/>
 
-
       
 
-
        <meta name="font:Text" content="Futura"/>
 
-
       
 
-
        <meta name="select:Text Size" content="12" title="Normal"/>
 
-
        <meta name="select:Text Size" content="10" title="Small"/>
 
-
        <meta name="select:Text Size" content="16" title="Big"/>
 
-
       
 
-
        <meta name="if:Show Photo Caption" content="0"/>
 
-
        <meta name="if:Show Photo Border" content="1"/>
 
-
        <meta name="if:Infinite Scroll" content="1"/>
 
-
        <meta name="if:Show Full Notes" content="0"/>
 
-
        <meta name="if:Show RSS" content="0"/>
 
-
        <meta name="if:Show Archive" content="0"/>
 
-
        <meta name="if:Show Theme Link" content="0"/>
 
-
       
 
-
        <meta name="text:Twitter Username" content="" />
 
-
        <meta name="text:Instagarm Username" content="" />
 
-
        <meta name="text:Facebook URL" content="" />
 
-
       
 
-
        <meta name="text:Custom Link One URL" content="" />
 
-
        <meta name="text:Custom Link One Title" content="" />
 
-
        <meta name="text:Custom Link Two URL" content="" />
 
-
        <meta name="text:Custom Link Two Title" content="" />
 
-
        <meta name="text:Custom Link Three URL" content="" />
 
-
        <meta name="text:Custom Link Three Title" content="" />
 
-
        <!-- HEDER VARIABLES //  -->
+
    /* GLOBAL STYLES
-
        <!-- HEDER VARIABLES // LAYER2 -->
+
    -------------------------------------------------- */
-
       
+
    /* Padding below the footer and lighter body text */
-
        <meta name="color:Title" content="#000000"/>
+
-
        <meta name="color:Description" content="#000000"/>
+
-
       
+
-
        <meta name="if:Header Fixed" content="1" />
+
-
       
+
-
        <meta name="select:Content Size" content="100%" title="Full Site Content"/>
+
-
        <meta name="select:Content Size" content="1000px" title="Middle Content"/>
+
-
        <meta name="select:Content Size" content="1200px" title="Big Content"/>
+
-
        <meta name="select:Content Size" content="800px" title="Small Content"/>
+
-
        <meta name="select:Rows" content="21" title="4 Rows"/>
 
-
        <meta name="select:Rows" content="16" title="5 Rows"/>
 
-
        <meta name="select:Rows" content="29" title="3 Rows"/>
 
-
        <meta name="select:Rows" content="46" title="2 Rows"/>
 
-
       
 
-
        <meta name="font:Title" content="Futura"/>
 
-
        <meta name="font:Description" content="Futura"/>
 
-
       
 
-
        <meta name="select:Title Size" content="21" title="Normal"/>
 
-
        <meta name="select:Title Size" content="16" title="Small"/>
 
-
        <meta name="select:Title Size" content="24" title="Big"/>
 
-
        <meta name="select:Title Size" content="28" title="Very Big"/>
 
-
        <style>
 
-
       
 
-
            body {
 
-
                margin: 0;
 
-
                padding: 0;
 
-
                background: {color:Background};
 
-
                background-image: url('{image:Background}');
 
-
                background-attachment: fixed;
 
-
                font-size: {select:Text Size}px /* select:Font Size */;
 
-
                font-family: {font:Text};
 
-
            }
 
-
            a {
+
    body {
-
                color: {color:Link}; /* color:Link */
+
      padding-bottom: 40px;
-
                text-decoration: none;
+
      color: #5a5a5a;
-
            }
+
background: #85B1C0;
-
           
+
  font-size: 12px;
-
            /* GENERAL  */
+
    }
-
           
+
-
            #infscr-loading {
+
-
                width: 50px;
+
-
                height: 30px;
+
-
                position: absolute;
+
-
                bottom: 30px;
+
-
                left: 50%;
+
-
                opacity: 0.3;
+
-
                line-height: 30px;
+
-
                text-align: center;
+
-
                border-radius: 6px;
+
-
                padding-left: 10px;
+
-
                margin-left: -15px;
+
-
                padding-right: 10px;
+
-
                background-color: rgba(250, 250, 250, 0.7);
+
-
            }
+
-
       
+
-
            #content {
+
-
                width: {select:Content Size};
+
-
                height: 100%;
+
-
                margin: 0 auto;
+
-
                font-family: {font:Text};
+
-
            }
+
-
           
+
-
            #content a{
+
-
                color: #000; /* color:Link */
+
-
                text-decoration: none;
+
-
                border-bottom: 1px solid rgba(100, 100, 100, 0.2);
+
-
            }
+
-
            #description a {
 
-
                color: {color:Description}; /* color:Link */
 
-
                text-decoration: underline;
 
-
            }
 
-
           
 
-
            #overlayer {
 
-
                position: fixed;
 
-
                z-index: -1;
 
-
                top: 0px;
 
-
                height: 100%;
 
-
                background-color: #FFF;
 
-
                padding-left: 20px;
 
-
                padding-right: 20px;
 
-
                left: calc(50% - {select:Content Size}/2 - 20px);
 
-
                width: {select:Content Size};
 
-
            }
 
-
           
 
-
            /* GENERAL POST */
 
-
           
 
-
            #content .post {
 
-
                background: #FFF; /* color:Post Background */
 
-
                color: {color:Text}; /* color:Text */
 
-
                width: calc({select:Rows}% - 1px);
 
-
                word-wrap: break-word;
 
-
                margin-left: 1%;
 
-
                margin-right: 1%;
 
-
                overflow: hidden;
 
-
                margin-top: 2%;
 
-
                padding: 1%;
 
-
                font-size: {select:Text Size} /* select:Font Size */;
 
-
                padding-bottom: calc(1% + 40px);
 
-
                {block:PermalinkPage}
 
-
                width: 470px !important;
 
-
                position: relative !important;
 
-
                left: 50% !important;
 
-
                margin-left: -250px !important;
 
-
                margin-top: 0px !important;
 
-
                padding: 15px !important;
 
-
                {/block:PermalinkPage}
 
-
            }
 
-
           
 
-
            #content .post blockquote {
 
-
                display: block;
 
-
                -webkit-margin-before: 5px !important;
 
-
                -webkit-margin-after: 5px !important;
 
-
                -webkit-margin-start: 8px !important;
 
-
                -webkit-margin-end: 8px !important;
 
-
                border-left: 3px solid rgb(230, 230, 230);
 
-
                padding-left: 10px;
 
-
                top: 3px;
 
-
                position: relative;
 
-
            }
 
-
           
 
-
            #content .post a{
 
-
                color: {color:Link}; /* color:Link */
 
-
                text-decoration: none;
 
-
                border-bottom: 1px solid rgba(100, 100, 100, 0.2);
 
-
            }
 
-
           
 
-
            #content .post img {
 
-
                height: auto;
 
-
                width: auto;
 
-
                position: relative;
 
-
                display: block;
 
-
            }
 
-
           
 
-
            #content .post iframe, img, embed, object, video {
 
-
                max-width: 100%;
 
-
            }
 
-
            #content .post .answer_form_container {
+
    /* CUSTOMIZE THE NAVBAR
-
                min-height: 140px;
+
    -------------------------------------------------- */
-
                position: relative;
+
-
            }
+
-
           
+
-
            #content .post #headline {
+
-
                font-weight: 300;
+
-
                text-align: center;
+
-
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
-
                padding-bottom: 10px;
+
-
                font-size: 150%;
+
-
                font-weight: 400;
+
-
            }
+
-
           
+
-
            #content .post #headline a{
+
-
                color: {color:Text}; /* color:Text */
+
-
                border: none;
+
-
                text-decoration: none;
+
-
            }
+
-
           
+
-
            /* POST CONTROLS */
+
-
           
+
-
            #content .post .control {
+
-
                width: 94%;
+
-
                padding-left: calc(6% + 1px);
+
-
                height: 36px;
+
-
                right: 0px;
+
-
                bottom: 0px;
+
-
                border-top: 1px solid rgba(200, 200, 200, 0.2);
+
-
                background-color: #FFF;
+
-
                position: absolute;
+
-
                font-size: 10px;
+
-
                color: rgba(100, 100, 100, 0.6);
+
-
            }
+
-
           
+
-
            #content .post .control .notes{
+
-
                text-decoration: none;
+
-
                color: rgba(100, 100, 100, 0.6);
+
-
                border: none;
+
-
                float: left;
+
-
                line-height: 36px;
+
-
                position: absolute;
+
-
            }
+
-
           
+
-
            #content .post .control #buttons {
+
-
                position: absolute;
+
-
                width: 46px;
+
-
                height: 20px;
+
-
                top: 10px;
+
-
                right: 5%;
+
-
                opacity: 0.4;
+
-
            }
+
-
           
+
-
            #content .post .control #buttons #like{
+
-
                position: absolute;
+
-
                width: 20px;
+
-
                float: left;
+
-
                opacity: 0.5;
+
-
            }
+
-
           
+
-
            #content .post .control #buttons #like:hover{
+
-
                opacity: 1;
+
-
            }
+
-
           
+
-
            #content .post .control #buttons #reblog{
+
-
                position: absolute;
+
-
                width: 20px;
+
-
                float: left;
+
-
                right: 0;
+
-
                opacity: 0.5;
+
-
                margin-left: 5px;
+
-
            }
+
-
           
+
-
            #content .post .control #buttons #reblog:hover{
+
-
                opacity: 1;
+
-
            }
+
-
           
+
-
            #content .post .control #buttons #reblog a{
+
-
                border: none;
+
-
            }
+
-
           
+
-
            /* POST TEXT */
+
-
       
+
-
            #content .text #body {
+
-
                line-height: 16px;
+
-
                text-align: justify;
+
-
            }
+
-
       
+
-
            /* POST PHOTO */
+
-
       
+
-
            #content .photo {
+
-
                background: #FFF;
+
-
                {block:IndexPage}
+
-
                {block:ifNOTShowPhotoBorder}
+
-
                padding: 0 !important;
+
-
                width: calc({select:Rows}% + 2% - 1px);
+
-
                {block:ifNOTShowPhotoBorder}
+
-
                padding: 1%;
+
-
                {block:ifShowPhotoCaption} 
+
-
                padding-bottom: calc(1% + 40px);
+
-
                {/block:ifShowPhotoCaption} 
+
-
                {/block:IndexPage}
+
-
            }
+
-
           
+
-
            #content .photo img{
+
-
                margin: 0 auto;
+
-
            }
+
-
           
+
-
            /* POST PHOTO -> :hover*/
+
-
           
+
-
            #content .photo .hover{
+
-
                position: absolute;
+
-
                top: 0;
+
-
                left: 0;
+
-
                width: 100%;
+
-
                height: 100%;
+
-
                opacity: 0;
+
-
                display: block;
+
-
                text-align: center;
+
-
                -webkit-transition: all 0.2s ease-out;
+
-
                -webkit-transition: all 0.2s ease-out;
+
-
                -moz-transition: all 0.2s ease-out;
+
-
                transition: all 0.2s ease-out;
+
-
            }
+
-
           
+
-
            #content .photo:hover .hover{
+
-
                opacity: 1;
+
-
                display: block;
+
-
                background-color: rgba(255, 255, 255, 0.2);
+
-
            }
+
-
           
+
-
            #content .photo .hover .buttons{
+
-
                width: 128px;
+
-
                height: 40px;
+
-
                left: 50%;
+
-
                display: block;
+
-
                margin-left: -64px;
+
-
                position: relative;
+
-
                top: 50%;
+
-
                margin-top: -20px;
+
-
            }
+
-
           
+
-
            #content .photo .hover .buttons #like{
+
-
                width: 32px;
+
-
                padding-left: 0px;
+
-
                height: 24px;
+
-
                padding-top: 6px;
+
-
                float: left;
+
-
                line-height: 30px;
+
-
                border-radius: 2px;
+
-
                position: relative;
+
-
                background-color: black;
+
-
            }
+
-
           
+
-
            #content .photo .hover .buttons #reblog{
+
-
                width: 25px;
+
-
                padding-left: 7px;
+
-
                height: 24px;
+
-
                margin-left: 8px;
+
-
                padding-top: 6px;
+
-
                float: left;
+
-
                border-radius: 2px;
+
-
                line-height: 30px;
+
-
                position: relative;
+
-
                background-color: black;
+
-
            }
+
-
           
+
-
            #content .photo .hover .buttons a{
+
-
                border: none !important;
+
-
            }
+
-
           
+
-
            #content .photo .hover .buttons #notes{
+
-
                width: 46px;
+
-
                height: 30px;
+
-
                margin-left: 8px;
+
-
                text-align: center;
+
-
                font-size: 10px;
+
-
                border-radius: 2px;
+
-
                float: left;
+
-
                line-height: 30px;
+
-
                position: relative;
+
-
                color: #FFF;
+
-
                background-color: black;
+
-
            }
+
-
           
+
-
            #content .photo .hover .buttons #notes a{
+
-
                color: #FFF;
+
-
                text-decoration: none;
+
-
                border: none;
+
-
            }
+
-
           
+
-
            /* POST PANORAMA */
+
-
            /* POST PHOTOSET */
+
-
           
+
-
            #content .photoset .image {
+
-
                margin-top: 10px;
+
-
            }
+
-
           
+
-
            #content .photoset .image:first-child {
+
-
                margin-top: 0px;
+
-
            }
+
-
       
+
-
            /* POST QUOTE */  
+
-
           
+
-
            #content .quote #quote {
+
-
                font-size: 150%;
+
-
                position: relative;
+
-
            }
+
-
           
+
-
            #content .quote #source {
+
-
                text-align: right;
+
-
                position: relative;
+
-
                margin-top: 10px;
+
-
                width: 80%;
+
-
                left: 20%;
+
-
                font-size: 80%;
+
-
            }
+
-
           
+
-
            /* POST LINK */
+
-
       
+
-
            #content .link #box {
+
-
                position: absolute;
+
-
                top: -0px;
+
-
                left: 0;
+
-
                width: calc(90% + 3px);
+
-
                padding-left: 5%;
+
-
                padding-right: 5%;
+
-
                padding-top: 20px;
+
-
                padding-bottom: 20px;
+
-
                background-color: {color:Link}; /* Color:Link Post  */
+
-
                color: #FFF;
+
-
                text-align: center;
+
-
                font-size: 110%;
+
-
            }
+
-
           
+
-
            #content .link #visiblebox {
+
-
                position: relative;
+
-
                top: 0px;
+
-
                left: 0;
+
-
                width: 100%;
+
-
                padding-top: 25px;
+
-
                padding-bottom: 20px;
+
-
                opacity: 0;
+
-
            }
+
-
           
+
-
            #content .link #box #link{
+
-
                position: relative;
+
-
                color: #FFF;
+
-
                z-index: 2;
+
-
                font-weight: 100;
+
-
            }
+
-
           
+
-
            /* POST CHAT */
+
-
           
+
-
            #content .chat {
+
-
                font-size: 110%;
+
-
            }
+
-
           
+
-
            #content .chat li{
+
-
                list-style: none;
+
-
                margin-top: 10px;
+
-
                border-top: 1px solid rgba(150, 150, 150, 0.1);
+
-
                padding-top: 10px;
+
-
            }
+
-
           
+
-
            #content .chat li:first-child{
+
-
                border: none;
+
-
                margin-top: 0px;
+
-
            }
+
-
           
+
-
            #content .chat .label {
+
-
                font-weight: bold !important;
+
-
            }
+
-
           
+
-
            /* POST VIDEO */
+
-
           
+
-
            .video .tumblr_video_container {
+
-
                width: 100% !important;
+
-
            }
+
-
           
+
-
            /* POST AUDIO */
+
-
           
+
-
            .audio #cover {
+
-
                position: absolute;
+
-
                top: 0px;
+
-
                right: 0px;
+
-
                width: 100%;
+
-
            }
+
-
           
+
-
            .audio #infos {
+
-
                padding-top: 15px;
+
-
                padding-bottom: 15px;
+
-
                background-color: rgba(0, 0, 0, 1);
+
-
                color: #FFF;
+
-
                width: 96%;
+
-
                padding-left: 2%;
+
-
                padding-right: 2%;
+
-
                height: 28px;
+
-
                word-wrap: break-word;
+
-
                line-height: 16px;
+
-
                text-align: center;
+
-
                position: relative;
+
-
            }
+
-
           
+
-
            .audio #cover:hover #infos{
+
-
                background-color: rgba(0, 0, 0, 1);
+
-
            }
+
-
           
+
-
            .audio #caption {
+
-
                margin-top: 46px;
+
-
            }
+
-
       
+
-
            .audio #player iframe{
+
-
                height: 40px;
+
-
                width: 100%;
+
-
            }
+
-
           
+
-
            .spotify_audio_player {
+
-
                height: 90px;
+
-
                max-height: 90px;
+
-
            }
+
-
           
+
-
            /* POST ANSWER */
+
-
           
+
-
            #content .answer {}
+
-
           
+
-
            #content .answer #avatar {
+
-
                position: relative;
+
-
                float: left;
+
-
                margin-right: 8px;
+
-
                margin-bottom: 10px;
+
-
            }
+
-
           
+
-
            #content .answer #asker {
+
-
                font-size: 100%;
+
-
                font-weight: bold;
+
-
                word-wrap: break-word;
+
-
                border-bottom: 1px solid rgba(150, 150, 150, 0.1);
+
-
            }
+
-
           
+
-
            #content .answer #text {
+
-
                margin-top: 10px;
+
-
            }
+
-
           
+
-
            #content .answer #answer {
+
-
                margin-top: 14px;
+
-
                border-top: 1px solid rgba(150, 150, 150, 0.1);
+
-
            }
+
-
           
+
-
            /* PERMALINK  PAGE */
+
-
           
+
-
            .permalinkpage {
+
-
                width: 500px;
+
-
                position: relative;
+
-
                left: 50%;
+
-
                margin-left: -250px;
+
-
            }
+
-
           
+
-
            .permalinkpage .reblogs {
+
-
                width: 100%;
+
-
                margin-top: 30px;
+
-
                position: relative;
+
-
                height: 40px;
+
-
                color: {color:Text}; /* Text color */
+
-
            }
+
-
           
+
-
            .permalinkpage .reblogs a{
+
-
                color: {color:Text} !important; /* Text color */
+
-
                text-decoration: none;
+
-
                border-bottom: 1px solid rgb(240, 240, 240);
+
-
            }
+
-
           
+
-
            .permalinkpage .reblogs #reblog{
+
-
                width: 100%;
+
-
                height: 40px;
+
-
                position: relative;
+
-
                background-color: #FFF;
+
-
                float: left;
+
-
                text-align: center;
+
-
                line-height: 40px;
+
-
            }
+
-
           
+
-
            .permalinkpage .reblogs #source{
+
-
                width: 49%;
+
-
                margin-left: 2%;
+
-
                height: 40px;
+
-
                position: relative;
+
-
                background-color: #FFF;
+
-
                float: left;
+
-
                text-align: center;
+
-
                line-height: 40px;
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer{
+
-
                width: 470px;
+
-
                margin-top: 12px;
+
-
                background-color: #FFF;
+
-
                padding: 15px;
+
-
                color: {color:Text}; /* Text color */
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #info {
+
-
                position: relative;
+
-
                height: 22px;
+
-
                width: 100%;
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #info #left{
+
-
                text-align: left;
+
-
                width: 470px;
+
-
                left: 0px;
+
-
                top: 0px;
+
-
                font-size: 18px;
+
-
                position: absolute;
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #info #center{
+
-
                text-align: center;
+
-
                width: 470px;
+
-
                left: 0px;
+
-
                top: 5px;
+
-
                font-size: 12px;
+
-
                position: absolute;
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #info #right{
+
-
                text-align: right;
+
-
                width: 470px;
+
-
                right: 0px;
+
-
                top: 0px;
+
-
                font-size: 18px;
+
-
                position: absolute;
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #caption{
+
-
                width: 100%;
+
-
                position: relative;
+
-
                border-top: 1px solid rgba(230, 230, 230, 1);
+
-
                border-bottom: 1px solid rgba(230, 230, 230, 1);
+
-
                font-size: 12px;
+
-
                text-align: justify;
+
-
                margin-top: 20px;
+
-
                padding-top: 8px;
+
-
                padding-bottom: 8px;
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #caption a{
+
-
                color: {color:Text}; /* Text/Link color */
+
-
                text-decoration: none;
+
-
                border-bottom: 1px solid rgb(240, 240, 240);
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #source {
+
-
                width: 100%;
+
-
                height: 40px;
+
-
                background-color: {color:Text}; /* Text/Link color */
+
-
                line-height: 40px;
+
-
                font-size: 18px;
+
-
                color: #FFF;
+
-
                text-align: center;
+
-
                margin-top: 12px;
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #tags {
+
-
                width: 430px;
+
-
                position: relative;
+
-
                display: block;
+
-
                padding-top: 8px;
+
-
                padding-bottom: 8px;
+
-
                margin-left: -0px;
+
-
                margin-top: -1px;
+
-
                list-style: none;
+
-
                border-top: 1px solid rgba(230, 230, 230, 1);
+
-
                border-bottom: 1px solid rgba(230, 230, 230, 1);
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #tags li{
+
-
                clear: none !important;
+
-
                display: inline-block;
+
-
                height: 15px;
+
-
                margin: 0 4px 0 0;
+
-
                overflow: hidden;
+
-
                width: auto;
+
-
            }
+
-
       
+
-
            .permalinkpage .notescontainer #tags li:first-child{
+
-
                margin-left: -3em;
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer #tags li a{
+
-
                color: {color:Text}; /* Text/Link color */
+
-
                text-decoration: none;
+
-
                border: none;
+
-
            }
+
-
       
+
-
            .permalinkpage .notescontainer ol.notes {
+
-
                width: 100%;
+
-
                margin-bottom: 60px;  /* PERMALINK PAGE BOTTOM */
+
-
                position: relative;
+
-
                display: block;
+
-
                margin-left: -36px;
+
-
                list-style: none;
+
-
                font-size: 12px;
+
-
            }
+
-
            .permalinkpage .notescontainer ol.notes li.note {
+
    /* Special class on .container surrounding .navbar, used for positioning it into place. */
-
                clear: none !important;
+
    .navbar-wrapper {
-
                display: inline-block;
+
      position: absolute;
-
                height: 15px;
+
      top: 50;
-
                margin: 0 4px 0 0;
+
      left: 0;
-
                overflow: hidden;
+
      right: 0;
-
                width: 15px;
+
      z-index: 100;
-
                {block:ifShowFullNotes}
+
      margin-top: -69px;
-
                width: 100%;  
+
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
-
                height: 30px; 
+
    }
-
                {/block:ifShowFullNotes}
+
    .navbar-wrapper .navbar {
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer ol.notes a{
+
-
                border: none !important;
+
-
                color: {color:Link};
+
-
            }
+
-
            .permalinkpage .notescontainer ol.notes li.note img.avatar {
+
    }
-
                width:  15px;
+
-
                height: 15px;
+
-
                border: none !important;
+
-
                {block:ifShowFullNotes}
+
-
                width: 18px;
+
-
                height: 18px;
+
-
                position: relative;
+
-
                float: left;
+
-
                {/block:ifShowFullNotes}
+
-
            }
+
-
            .permalinkpage .notescontainer ol.notes li.note span.action {
+
    /* Remove border and change up box shadow for more contrast */
-
                display: none;
+
    .navbar .navbar-inner {
-
                {block:ifShowFullNotes}
+
width:80%;
-
                word-wrap: break-word;
+
      border: 0;
-
                display: block;
+
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-
                position: relative;
+
        -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-
                float: left;
+
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
-
                margin-top: 3px;
+
    }
-
                margin-left: 8px;
+
-
                {/block:ifShowFullNotes}
+
-
            }
+
-
           
+
-
            .permalinkpage .notescontainer .more_notes_link_container {
+
-
                clear: both !important;
+
-
                display: block !important;
+
-
                font-size: 10px;
+
-
                height: auto;
+
-
                overflow: visible;
+
-
                position: relative !important;;
+
-
                text-align: left !important;
+
-
                width: 100% !important;
+
-
                text-align: center !important;
+
-
                margin-top: 20px !important;
+
-
                {block:ifShowFullNotes}
+
-
                {/block:ifShowFullNotes}
+
-
            }
+
-
           
+
-
            ol.notes li.note .answer_content {
+
-
                display: none;
+
-
            }
+
-
            ol.notes li.note blockquote {
+
    /* Downsize the brand/project name a bit */
-
                display: none;
+
    .navbar .brand {
-
            }
+
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
 +
      font-size: 16px;
 +
      font-weight: bold;
 +
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
 +
    }
-
            ol.notes li.note blockquote a {
+
    /* Navbar links: increase padding for taller navbar */
-
                display: none;
+
    .navbar .nav > li > a {
-
            }
+
      padding: 15px 20px;
-
           
+
    }
-
            /* FOOTER  */  
+
-
       
+
-
            #nextpage {
+
-
                width: 95%;
+
-
                margin-left: 2.5%;
+
-
                margin-top: 50px;
+
-
                left: 5%;
+
-
                height: 60px;
+
-
                background-color: rgba(255, 255, 255, 0.6);
+
-
                bottom: 0;
+
-
                font-size: 18px;
+
-
                line-height: 60px;
+
-
                text-align: center;
+
-
                position: relative;
+
-
            }
+
-
           
+
-
            #nextpage a{
+
-
                color: rgba(40, 40, 40, 1);
+
-
                border: none;
+
-
            }
+
-
           
+
-
            #prepage {
+
-
                width: 95%;
+
-
                margin-left: 2.5%;
+
-
                margin-top: 20px;  
+
-
                left: 5%;
+
-
                height: 60px;
+
-
                background-color: rgba(255, 255, 255, 0.6);
+
-
                bottom: 0;
+
-
                font-size: 18px;
+
-
                line-height: 60px;
+
-
                text-align: center;
+
-
                position: relative;
+
-
            }
+
-
           
+
-
            #prepage a{
+
-
                color: rgba(40, 40, 40, 1);
+
-
                border: none;
+
-
            }
+
-
            #button {
+
    /* Offset the responsive button for proper vertical alignment */
-
            z-index: 42;
+
    .navbar .btn-navbar {
-
            font-family: Futura, 'Century Gothic', AppleGothic, sans-serif;
+
      margin-top: 10px;
-
            width:  50px;
+
    }
-
            height: 50px;
+
-
            border-radius: 8px;
+
-
            background-color: rgba(0, 0, 0, 0.9);
+
-
            position: fixed;
+
-
            bottom: 10px;
+
-
            right: 10px;
+
-
            background-image: url(http://24.media.tumblr.com/5a651deb796934389269df7fd176c707/tumblr_mi6etnJifK1s3zdk4o1_100.png);
+
-
            background-size: 30px;
+
-
            background-repeat: no-repeat;
+
-
            background-position: center;
+
-
            opacity: 0.8;
+
-
            color: transparent;
+
-
            text-transform: uppercase;
+
-
            line-height: 48px;
+
-
            font-size: 10px;
+
-
            -webkit-transition: all 0.2s ease-out;
+
-
            -webkit-transition: all 0.2s ease-out;
+
-
            -moz-transition: all 0.2s ease-out;
+
-
            transition: all 0.2s ease-out; 
+
-
      }     
+
-
+
-
      #button:hover {
+
-
          width: 138px;
+
-
          background-position: 138px;
+
-
          border-radius: 8px;
+
-
          color: #FFF;
+
-
          padding-left: 10px;
+
-
          padding-right: 36px;
+
-
      }
+
-
           
+
-
            /* CSS //  */
+
-
           
+
-
           
+
-
/* CSS // LAYER2 */
+
-
           
+
-
            #header {
+
-
                width: 100%;
+
-
                z-index: 3;
+
-
                top: 0;
+
-
                padding-bottom: 60px;
+
-
                padding-top: 40px;
+
-
                {block:ifHeaderfixed}
+
-
                position: fixed;
+
-
                {/block:ifHeaderfixed}
+
-
                background-color: {color:Background};
+
-
            }
+
-
           
+
-
            .visible {
+
-
                position: relative !important;
+
-
                opacity: 0;
+
-
                width: 100%;
+
-
                padding-bottom: 80px !important;
+
-
            }
+
-
           
+
-
            #header #title {
+
-
                font-size: {select:Title Size}px; /* Title Size */
+
-
                text-align: center;
+
-
                font-family: {font:Title}; /* Title Font Family */
+
-
                text-transform: uppercase;
+
-
                font-weight: 100;
+
-
            }
+
-
           
+
-
            #header #title a{
+
-
                color: {color:Title}; /* Title Color */
+
-
                text-decoration: none;
+
-
            }
+
-
           
+
-
            #header #description {
+
-
                width: 500px;
+
-
                position: relative;
+
-
                left: 50%;
+
-
                margin-left: -250px;
+
-
                font-size: 10px;  
+
-
                text-align: center;
+
-
                font-family: {font:Description};
+
-
                color: {color:Description}; /* Descripton Color */
+
-
            }
+
-
           
+
-
            #header #links {
+
-
                width: 500px;
+
-
                font-size: 10px;
+
-
                position: relative;
+
-
                left: 50%;
+
-
                margin-left: -250px;
+
-
                text-align: center;
+
-
                margin-top: 20px;
+
-
                font-family: {font:Description};
+
-
            }
+
-
           
+
-
            #header #links .link{
+
-
                text-decoration: none;
+
-
                margin-left: 5px;
+
-
                margin-right: 5px;
+
-
                color: {color:Description}; /* description Color */
+
-
            }
+
-
            .tumblr_controls {
 
-
                position: absolute;
 
-
                top: 0px;
 
-
                right: 0px;
 
-
                display: block;
 
-
                pointer-events: none;
 
-
            }
 
-
            .tumblr_controls {
 
-
                position: fixed !important;
 
-
                top: 0px !important;
 
-
                right: 0px !important;
 
-
                display: block;
 
-
                pointer-events: none;
 
-
            }
 
-
           
 
-
            #tumblr_controls {
 
-
                position: fixed !important;
 
-
                top: 0px !important;
 
-
                right: 0px !important;
 
-
            }
 
-
           
 
-
            {CustomCSS}
 
-
        </style>
+
 
-
    </head>
+
-
    <body>
+
-
        <a target="_blank" alt="Free tumblr themes - Themes that you like" name="Free tumblr themes" title="tumblr themes free" href="http://themesthatyoulike.com/"><div id="button">Tumblr themes - TTYL</div></a>
+
-
        <script type="text/javascript">
+
-
        if ( self !== top ) {document.getElementById('button').style.bottom='34px'; }
+
-
        </script>
+
-
        <div id="header">
+
    /* RESPONSIVE CSS
-
                   
+
     -------------------------------------------------- */
-
            <h1 id="title"><a href="/">{Title}</a></h1>
+
-
           
+
-
            {block:Description}
+
-
              <div id="description">{Description}</div>
+
-
            {/block:Description}
+
-
           
+
-
            <div id="links">
+
-
              {block:AskEnabled}<a class="link" href="/ask">{AskLabel}</a>  {/block:AskEnabled}
+
-
              {block:HasPages}
+
-
              {block:Pages}<a class="link" href="{URL}">{Label}</a>{block:Pages}{/block:HasPages}
+
-
              {block:ifShowArchive}<a class="link" href="/archive">Archive</a>{/block:ifShowArchive}
+
-
              {block:ifShowRSS}<a class="link" href="/rss">RSS</a>{/block:ifShowRSS}
+
-
              {block:IfCustomLinkOneTitle}<a class="link" href="{Text:Custom Link One URL}">{Text:Custom Link One Title}</a>{/block:IfCustomLinkOneTitle}
+
-
              {block:IfCustomLinkTwoTitle}<a class="link" href="{Text:Custom Link Two URL}">{Text:Custom Link Two Title}</a>{/block:IfCustomLinkTwoTitle}
+
-
              {block:IfCustomLinkThreeTitle}<a class="link" href="{Text:Custom Link Three URL}">{Text:Custom Link Three Title}</a>{/block:IfCustomLinkThreeTitle}
+
-
              {block:ifTwitterUsername}<a class="link" href="http://twitter.com/{Text:Twitter Username}">Twitter</a>{/block:ifTwitterUsername}
+
-
              {block:ifInstagarmUsername}<a class="link" href="http://instagram.com/{Text:Instagarm Username}">Instagram</a>{/block:ifInstagarmUsername}
+
-
              {block:ifFacebookURL}<a class="link" href="{Text:Facebook URL}">Facebook</a>{/block:ifFacebookURL}
+
-
              {block:ifShowThemelink}<a class="link" href="http://themesthatyoulike.tumblr.com/">Theme</a> {/block:ifShowThemelink}
+
-
            </div>
+
-
        </div>
+
-
        {block:ifHeaderFixed}
+
-
        <div class="visible" id="header">
+
-
                   
+
-
            <h1 id="title"><a href="/">{Title}</a></h1>
+
-
           
+
-
            {block:Description}
+
-
              <div id="description">{Description}</div>
+
-
            {/block:Description}
+
-
           
+
-
            <div id="links">
+
-
              {block:AskEnabled}<a class="link" href="/ask">{AskLabel}</a>  {/block:AskEnabled}
+
-
              {block:HasPages}
+
-
              {block:Pages}<a class="link" href="{URL}">{Label}</a>{block:Pages}{/block:HasPages}
+
-
              {block:ifShowArchive}<a class="link" href="/archive">Archive</a>{/block:ifShowArchive}
+
-
              {block:ifShowRSS}<a class="link" href="/rss">RSS</a>{/block:ifShowRSS}
+
-
              {block:IfCustomLinkOne}<a class="link" href="{Text:Custom Link One}">{Text:Custom Link One Title}</a>{/block:IfCustomLinkOne}
+
-
              {block:IfCustomLinkTwo}<a class="link" href="{Text:Custom Link Two}">{Text:Custom Link Two Title}</a>{/block:IfCustomLinkTwo}
+
-
              {block:IfCustomLinkThree}<a class="link" href="{Text:Custom Link Three}">{Text:Custom Link Three Title}</a>{block:IfCustomLinkThree}
+
-
              {block:ifTwitterUsername}<a class="link" href="http://twitter.com/{Text:Twitter Username}">Twitter</a>{/block:ifTwitterUsername}
+
-
              {block:ifInstagarmUsername}<a class="link" href="http://instagram.com/{Text:ifInstagarm Username}">Instagram</a>{/block:ifInstagarmUsername}
+
-
              {block:ifFacebookURL}<a class="link" href="{Text:ifFacebook URL}">Facebook</a>{/block:ifFacebookURL}
+
-
              {block:ifShowThemelink}<a class="link" href="http://themesthatyoulike.tumblr.com/">Theme</a> {/block:ifShowThemelink}
+
-
            </div>
+
-
        </div>
+
-
     {/block:ifHeaderFixed}
+
-
        <div id="content">
+
-
          {block:PermalinkPage}<div class="permalinkpage">{block:PermalinkPage}
+
-
            {block:Posts}{block:Text}
+
-
                    <article id="{PostID}" class="post text">
+
-
                        {block:Title}
+
-
                            <h3 id="headline"><a href="{Permalink}">{Title}</a></h3>
+
-
                        {/block:Title}
+
-
                        <div id="body">{Body}</div>
+
-
                    <!--</article>-->
+
-
                {/block:Text}{block:Photo}
+
-
                    <article id="{PostID}" class="post photo">
+
-
                        <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
+
-
                       
+
-
                        {block:IndexPage}
+
-
                        <div style="{block:ifShowPhotoCaption} display: none; {/block:ifShowPhotoCaption}" class="hover">
+
-
                            <div class="buttons">
+
-
                                <div id="like">{LikeButton size="18" color="White"}</div>
+
-
                                <div id="reblog">{ReblogButton size="18" color="White"}</div>
+
-
                                <div id="notes">
+
-
                                <a target="_blank" href="{Permalink}">{NoteCount}</a>
+
-
                                </div>
+
-
                            </div>
+
-
                        </div>
+
-
                       
+
-
                        {block:ifShowPhotoCaption} 
+
-
                       
+
-
                        {block:Caption}
+
-
                        <div class="caption">{Caption}</div>
+
-
                        {/block:Caption}
+
-
                       
+
-
                        {/block:ifShowPhotoCaption}
+
-
                        {/block:IndexPage}
+
-
                   
+
-
                    <!--</article>-->
+
-
                {/block:Photo}{block:Panorama}
+
-
                    <article id="{PostID}" class="post panorama">
+
-
                        {LinkOpenTag}
+
-
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
+
-
                        {LinkCloseTag}{block:Caption}
+
-
                            <div class="caption">{Caption}</div>
+
-
                        {/block:Caption}
+
-
                  <!--</article>-->
+
-
                {/block:Panorama}{block:Photoset}
+
-
                    <article id="{PostID}" class="post photoset">
+
-
                        {block:IndexPage}
+
-
                        {Photoset}
+
-
                        {/block:IndexPage}
+
-
                     
+
-
                       
+
-
                        {block:ifShowPhotoCaption} 
+
-
                        {block:IndexPage}
+
-
                        {block:Caption}
+
-
                        <div class="caption">{Caption}</div>
+
-
                        {/block:Caption}
+
-
                        {/block:IndexPage}
+
-
                        {/block:ifShowPhotoCaption}
+
-
                       
+
-
                        {block:PermalinkPage}
+
-
                        {Photoset-500}
+
-
                        {/block:PermalinkPage}
+
-
                       
+
-
                    <!--</article>-->
+
-
                {/block:Photoset}{block:Quote}
+
-
                    <article id="{PostID}" class="post quote">
+
-
                        <div id="quote">"{Quote}"</div>
+
-
                       
+
-
                        {block:Source}
+
-
                            <div id="source">{Source}</div>
+
-
                        {/block:Source}
+
-
                    <!--</article>-->
+
-
                {/block:Quote}{block:Link}
+
-
                    <article id="{PostID}" class="post link">
+
-
                        <a href="{URL}" id="link" {Target}>
+
-
                            <div id="box">{Name}</div>
+
-
                        </a>
+
-
                        <a href="{URL}" id="link" {Target}>
+
-
                          <div id="visiblebox">{Name}</div>
+
-
                        </a>
+
-
                        {block:Description}
+
-
                            <div class="description">{Description}</div>
+
-
                        {/block:Description}
+
-
                    <!--</article>-->
+
-
                {/block:Link}{block:Chat}
+
-
                    <article id="{PostID}" class="post chat">
+
-
                        {block:Title}
+
-
                            <h3 id="headline"><a href="{Permalink}">{Title}</a></h3>
+
-
                        {/block:Title}
+
-
                        <div class="chat">
 
-
                            {block:Lines}
 
-
                                <li class="{Alt} user_{UserNumber}">
 
-
                                    {block:Label}
 
-
                                        <span class="label">{Label}</span>
 
-
                                    {/block:Label}{Line}
 
-
                                </li>
 
-
                            {/block:Lines}
 
-
                        </div>
 
-
                    <!--</article>-->
 
-
                {/block:Chat}{block:Video}
 
-
                    <article id="{PostID}" class="post video">
 
-
                        {block:IndexPage}
 
-
                        <center>{Video-250}</center>
 
-
                        {/block:IndexPage}
 
-
                        {block:PermalinkPage}
 
-
                        <center>{Video-500}</center>
 
-
                        {/block:PermalinkPage}
 
-
                        {block:IndexPage}
 
-
                        {block:Caption}
 
-
                            <div class="caption">{Caption}</div>
 
-
                        {/block:Caption}
 
-
                        {/block:IndexPage}
 
-
                    <!-- </article>-->
 
-
                {/block:Video}{block:Audio}
 
-
                    <article id="{PostID}" class="post audio">
 
-
                   
 
-
                        <div id="none" style="opacity: 0;">
 
-
                        {block:AlbumArt}
 
-
                        <img src="{AlbumArtURL}" />
 
-
                        {/block:AlbumArt}
 
-
                        <div style="{block:AlbumArt}margin-top: -58px;{/block:AlbumArt}" id="infos">
 
-
                          {block:Artist}
 
-
                          {Artist}
 
-
                          {/block:Artist}
 
-
                          {block:TrackName}
 
-
                          {TrackName}
 
-
                          {/block:TrackName}
 
-
                          </div>
 
-
                        </div>
 
-
                       
 
-
                        <div id="cover">
 
-
                          {block:AlbumArt}
 
-
                            <img src="{AlbumArtURL}" />
 
-
                          {/block:AlbumArt}
 
-
                            <div style="{block:AlbumArt}margin-top: -58px; background-color: rgba(0, 0, 0, 0.3);{/block:AlbumArt}" id="infos">
 
-
                            {block:Artist}
 
-
                            {Artist}
 
-
                            {/block:Artist}
 
-
                            {block:TrackName}
 
-
                            <br />{TrackName}
 
-
                            {/block:TrackName}
 
-
                            </div>
 
-
                            <div id="player">
 
-
                            {AudioPlayerBlack}
 
-
                          </div>
 
-
                        </div>
 
-
                        {block:IndexPage}
 
-
                        {block:Caption}
 
-
                            <div style="{block:AlbumArt} margin-top: 64px;{/block:AlbumArt}" id="caption">{Caption}</div>
 
-
                        {/block:Caption}
 
-
                        {/block:IndexPage}
 
-
                           
 
-
                    <!--</article>-->
 
-
                {/block:Audio}{block:Answer}
 
-
                    <article id="{PostID}" class="post answer">
 
-
                      <div class="question">
 
-
                        <img id="avatar" src="{AskerPortraitURL-48}">
 
-
                        <span id="asker">{Asker} asked:</span>
 
-
                        <div id="text">{Question}</div>
 
-
                      </div>
 
-
                     
 
-
                      <div id="answer">{Answer}</div>
 
-
                  <!--</article>-->
 
-
                {/block:Answer}
 
-
               
 
-
               
 
-
                {block:IndexPage}
 
-
                <div  style="{block:Photo} display: none; {block:Photo} {block:ifShowPhotoCaption} display: block; {/block:ifShowPhotoCaption}"  class="control">
 
-
                    <a href="{Permalink}" title="Permalink Page" class="notes">{NoteCountWithLabel}</a>
 
-
                   
 
-
                    <div id="buttons">
 
-
                      <div id="like">{LikeButton size="16" color="Black"}</div>
 
-
                      <div id="reblog">{ReblogButton size="16" color="Black"}</div>
 
-
                    </div>
 
-
                   
 
-
                </div>
 
-
                {/block:IndexPage}
 
-
                </article>
 
-
           
 
-
                  {block:PermalinkPage}
 
-
                  {block:Date}
 
-
                      {block:RebloggedFrom}
 
-
                      <div class="reblogs">
 
-
                          <div style="{block:ContentSource}width: 49%;{/block:ContentSource}" id="reblog">Reblogged from: <a target="_blank" href="{ReblogParentURL}">{ReblogParentName}</a></div>
 
-
                          {block:ContentSource}
 
-
                          <div id="source">Source: <a target="_blank" href="{SourceURL}">{SourceTitle}</a></div>
 
-
                          {/block:ContentSource}
 
-
                      </div>
 
-
                      {/block:RebloggedFrom}
 
-
                      <div class="notescontainer">
 
-
                         
 
-
                     
 
-
                          <div id="info">
 
-
                              <div id="left">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</div>
 
-
                              <div id="center">{NoteCountWithLabel}</div>
 
-
                              <div id="right">{TimeAgo}</div>
 
-
                          </div>
 
-
                         
 
-
                          {block:Caption}
 
-
                          <div id="caption">
 
-
                          {/block:Caption}
 
-
                             
 
-
                              {Caption}
 
-
                             
 
-
                          {block:Caption}
 
-
                          </div>
 
-
                          {/block:Caption}
 
-
                         
 
-
                          {block:HasTags}
 
-
                          <ul id="tags">
 
-
                          {block:Tags}
 
-
                            <li>
 
-
                              <a href="{TagURL}">#{Tag}</a>
 
-
                            </li>
 
-
                          {/block:Tags}
 
-
                          </ul>
 
-
                          {/block:HasTags}
 
-
                       
 
-
                          {PostNotes}
 
-
                    </div>
 
-
                </div>
 
-
                {/block:Date}
 
-
                {block:PermalinkPage}
 
-
            {/block:Posts}
 
-
           
 
-
            {block:ifNotInfiniteScroll}
 
-
            {block:NextPage}
 
-
                <div id="nextpage">
 
-
                  <a id="nextpagelink" href="{NextPage}">Next Page »</a>
 
-
                </div>
 
-
            {/block:NextPage}
 
-
           
 
-
            {block:PreviousPage}
 
-
                <div id="prepage">
 
-
                    <a href="{PreviousPage}">« Previous Page</a>
 
-
                </div>
 
-
            {/block:PreviousPage}
 
-
            {/block:ifNotInfiniteScroll}
 
-
        </div>
 
-
        <p id="footer">
 
-
           
 
-
            {block:NextPage}
 
-
                {block:ifInfiniteScroll}<next id="pagination"><a class="nextSelector"  href="{NextPage}"></a></next>{/block:ifInfiniteScroll}
 
-
            {/block:NextPage}
 
-
        </p>
 
-
       
 
-
        {block:IndexPage}
 
-
       
 
-
        <script>
 
-
      $(function(){
+
    @media (max-width: 979px) {
-
          var $container = $('#content');
+
 
-
          $container.imagesLoaded(function(){
+
      .container.navbar-wrapper {
-
            $container.masonry({
+
        margin-bottom: 0;
-
                    itemSelector: '.post',
+
        width: auto;
-
                    isAnimated:true,
+
      }
-
                    columnWidth:1,
+
      .navbar-inner {
-
                    animationOptions:{duration:350, queue:false},
+
        border-radius: 0;
-
          });
+
        margin: -20px 0;
-
          });
+
      }
-
         $('.photoset').load(function() {
+
 
-
         $container.imagesLoaded(function(){
+
 
-
                 $container.masonry({
+
 
-
                     itemSelector: '.post',
+
      .featurette {
-
                     isAnimated:true,
+
        height: auto;
-
                     columnWidth:1,
+
        padding: 0;
-
                     animationOptions:{duration:350, queue:false},
+
      }
-
          });
+
      .featurette-image.pull-left,
-
          });
+
      .featurette-image.pull-right {
-
        });
+
        display: block;
-
       
+
        float: none;
-
        $container.infinitescroll({
+
        max-width: 20%;
-
            navSelector  : '#pagination',    // selector for the paged navigation
+
        margin: 0 auto 20px;
-
            nextSelector : '#pagination a',  // selector for the NEXT link (to page 2)
+
      }
-
            itemSelector : '.post',     // selector for all items you'll retrieve
+
    }
-
            extraScrollPx: 50,
+
 
-
            bufferPx     : 40,
+
 
-
            loading: {
+
    @media (max-width: 767px) {
-
                finishedMsg: 'All load.',
+
 
-
                msgText: '',
+
      .navbar-inner {
-
                img: 'https://31.media.tumblr.com/bd577d1566bd3f531d66de9b1f4eb502/tumblr_n9fj4kvbrj1s3zdk4o1_250.gif',
+
        margin: -20px;
-
               
+
      }
-
            }
+
 
-
        },
+
      .marketing .span4 + .span4 {
-
        // trigger Masonry as a callback
+
        margin-top: 40px;
-
          function( newElements ) {
+
      }
-
              // hide new items while they are loading
+
h2 {text-align:center}
-
              var $newElems = $( newElements ).css({ opacity: 0 });
+
 
-
              var $newElemsIDs = $newElems.map(function () {return this.id;}).get();
+
      .featurette-heading {
-
              // ensure that images load before adding to masonry layout
+
         text-align: center;
-
              $newElems.imagesLoaded(function(){
+
        font-size: 25px;
-
                  // show elems now they're ready
+
      }
-
                  $newElems.animate({ opacity: 1 });
+
      .featurette .lead {
-
                  $container.masonry( 'appended', $newElems, true );
+
         font-size: 20%;
-
                  console.log($newElems,$newElemsIDs);
+
        line-height: 1.5;
-
                  Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
+
      }
-
              });
+
 
-
            }
+
    }
-
           );
+
    </style>
-
         });
+
 
-
        </script>
+
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
-
        {/block:IndexPage}
+
    <!--[if lt IE 9]>
-
     </body>
+
      <script src="../assets/js/html5shiv.js"></script>
 +
    <![endif]-->
 +
 
 +
    <!-- Fav and touch icons -->
 +
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
 +
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
 +
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
 +
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
 +
                                  <link rel="shortcut icon" href="../assets/ico/favicon.png">
 +
 
 +
 
 +
 
 +
 
 +
  </head>
 +
 
 +
  <body>
 +
 
 +
 
 +
 
 +
    <!-- NAVBAR
 +
    ================================================== -->
 +
    <div class="navbar-wrapper">
 +
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
 +
      <div class="container">
 +
 
 +
        <div class="navbar navbar-inverse">
 +
          <div class="navbar-inner">
 +
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
 +
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 +
              <span class="icon-bar"></span>
 +
              <span class="icon-bar"></span>
 +
            </button>
 +
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
 +
            <div class="nav-collapse collapse">
 +
              <ul class="nav">
 +
                 <li class="active"><a href="https://2014.igem.org/Team:Carnegie_Mellon">Home</a></li>
 +
<li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Project <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Project_Description">Project Description</a></li>
 +
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Our_Sensor">Our Sensor</a></li>
 +
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Achievements">Achievements</a></li>
 +
                  </ul>
 +
                </li>                <li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                     <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Bios">Bios</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Advisors">Advisors</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Attributions">Attributions</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Sponsors">Sponsors</a></li>
 +
                  </ul>
 +
                </li>
 +
<li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Policies & Practices <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Our_Projects">Our Projects</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Gallery">Gallery</a></li>
 +
                  </ul>
 +
                </li>
 +
<li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notebook <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Weeks">Week by Week</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Sensor">Sensor</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Protein">Fluorescent Protein Evaluation</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Superoxide">Superoxide Generator Improvement</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/InterLab">Interlab Study</a></li>
 +
                  </ul>
 +
                </li>
 +
<li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Modeling <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/SensorModel">Sensor</a></li>
 +
                    <li><a href="https://2014.igem.org/Team:Carnegie_Mellon/Fish">Fish Populations</a></li>
 +
                  </ul>
 +
                </li>
 +
              </ul>
 +
            </div><!--/.nav-collapse -->
 +
          </div><!-- /.navbar-inner -->
 +
        </div><!-- /.navbar -->
 +
 
 +
      </div> <!-- /.container -->
 +
     </div><!-- /.navbar-wrapper -->
 +
 
 +
<h1> <center> Carnegie Mellon's Meetup </center> </h1>
 +
<hr>
 +
 
 +
<div id="images"><center>
 +
   
 +
<img class="sqimg" border="0" src="https://static.igem.org/mediawiki/2014/1/19/IMG_4970.JPG"/></a></br>
 +
 
 +
     <img class="sqimg" border="0" src="https://static.igem.org/mediawiki/2014/0/03/IMG_4971.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/a/ad/IMG_4978.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/8/8a/IMG_4979.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/e/ee/IMG_5003.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/d/d7/IMG_5013.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/8/84/Science%281%29.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/8/8d/IMG_5036.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/2/2f/IMG_5056.JPG"/></a></br>
 +
 
 +
<hr>
 +
<h1>Creature Feature</h1>
 +
<hr>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/c/cb/Creaturefeature.jpg"/></a></br>
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/c/c8/Nfi.JPG"/></a></br>
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/3/3f/Photo4CF.jpg"/></a></br>
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/8/87/Photo_2-2.jpg"/></a></br>
 +
 
 +
<hr>
 +
<h1> Science Palooza</h1>
 +
<hr>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/0/01/DSC_1164.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/3/35/DSC_1262.JPG"/></a></br>
 +
 
 +
<img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/0/0e/Meiw.JPG"/></a></br>
 +
 
 +
    <img class="sqimg" border="0"  src="https://static.igem.org/mediawiki/2014/5/51/Kids_Cards.jpg"/></a></br>
 +
 
 +
 
 +
 
 +
</center></div>​
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!-- Le javascript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
 +
    <script>
 +
      !function ($) {
 +
        $(function(){
 +
          // carousel demo
 +
           $('#myCarousel').carousel()
 +
         })
 +
      }(window.jQuery)
 +
 
 +
 
 +
 
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
 +
<script src="js/bootstrap-image-gallery.min.js">
 +
 
 +
 
 +
 
 +
     </script>
 +
    <script src="http://getbootstrap.com/2.3.2/assets/js/holder/holder.js"></script>
 +
  </body>
</html>
</html>

Latest revision as of 05:55, 17 October 2014

Carousel Template · Bootstrap

Carnegie Mellon's Meetup












Creature Feature







Science Palooza