/* For sitewide elements of unglue.it. */

@import "variables.less";

/* remove before beta */
.preview {
	border: solid 3px @alert;
	.one-border-radius(7px);
    clear:both;
    padding: 5px 10px;
    font-size:13px;
    line-height: 17px;
    
    a {
    	color: @call-to-action;
    }
}

.preview_top {
	.preview;
	width: 934px;
    margin:10px auto 0 auto;
}

.preview_content {
	.preview;
	width: 80%;
	margin: 10px auto;
}

/* Local variables */
.utilityheaders {
    text-transform:uppercase;
    color:@text-blue;
    font-size:12px;
    display:block; 
}

.utilitylinks (@topbottom, @leftright) {
    padding:@topbottom @leftright;
    a {
        color:@medium-blue;
    }
}

/* Page-wide elements */
html, body {
    /* Necessary to make footer stretch to bottom of page */
    height:100%;
}

body{
    background:url(@background-body) 0 0 repeat-x;
    padding:0 0 20px 0;
    margin:0;
    font-size:12px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial, Helvetica, sans-serif;
    color:@text-blue;
}

#feedback {
	/* remove after alpha? */
	position: fixed;
	top: 30%;
	left: 0;
	z-index:500;
	
	p {
		/* see http://scottgale.com/blog/css-vertical-text/2010/03/01/ */
		a {
			color:white;
			font-size:24px;
			font-weight:normal;

			&:hover {
				color: @text-blue;
			}
		}
		writing-mode:tb-rl;
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
		-o-transform: rotate(90deg);
		white-space:nowrap;
		display:block;
		bottom:0;
		width:160px;
		height:32px;
		.one-border-radius(32px);
		background: @call-to-action;
		margin-bottom: 0;
		text-align: center;
		margin-left: -67px;
		line-height: normal;
	}
}

a {
    font-weight:bold;
    font-size:13px; 
    text-decoration:none;
    cursor:pointer;
    color: @medium-blue;
    
    &:hover {
    	text-decoration: underline;
    }
}

img {
    border:none;
}

input, textarea {
	border: 2px solid @blue-grey;
	.one-border-radius(5px);
	
	&:focus {
		border: 2px solid @call-to-action;
		outline: none;
	}
}

.js-search input {
	.one-border-radius(0);
}

h2 {
    &.content-heading {
        padding:15px;
        margin:0;
        font-size:19px;
        font-weight:normal;
        color:@text-blue;
        float:left;
        width:50%;
        
        span {
            font-style:italic;
        }
    }
}

h3 {
    &.jsmod-title {
    	.border-radius(8px, 8px, 0, 0);
    	background: @medium-blue-grey;
        padding:0;
        margin:0;
        height:73px;
        
        span {
            font-size:19px;
            font-style: italic;
            color:@text-blue;
            padding:26px 40px 27px 20px;
            display:block;
        }
    }
}

input[type="submit"] {
	background: @call-to-action;
	color: white;
	font-weight: bold;
	padding: 0.5em 1em;
	cursor: pointer;
}

.js-page-wrap {
    position: relative;
    min-height: 100%;
}

.js-main {
    width:960px;
    margin:0 auto;
    clear:both;
    padding:0;
}

ul.menu{
    list-style:none;
    padding:0;
    margin:0;
}

/* add class clearfix to floats to make them self-clear */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Header section */
#js-header {
    height:90px;
}

.js-logo {
    float:left;
    padding-top:10px;
    
    a {
        img { border: none;}
    }
}

.js-topmenu {
    float:right;
    padding-top:25px;

    ul {
        li {
            float:left;
            padding:0 10px;
            position: relative;
            
            a {
                color:@text-blue; 
                .header-text;
            }
            
            span#welcome {
                color:@green;
                .header-text;
                overflow:auto;
                //emergency backstop to prevent usernames too long for truncate filter to force header into content area
                max-width: 240px;                
            }
            
            #notification_count {
                position: absolute;
                right: 10px;
            	top: -14px;
            	color: @alert;
            	background-color: white;
            	border: solid 2px @alert;
            	.one-border-radius(16px);
            	padding: 3px;
            	line-height: 16px;
            }

            &.last {
                a {
                    background: url(@background-header) right top no-repeat;
                    
                    span {
                        //background:url(@background-header) -770px -36px no-repeat;
                        .border-radius(32px, 0, 0, 32px);
                        background-color: @call-to-action;
                        margin-right:29px;
                        display:block;
                        padding:0 5px 0 15px;
                        color: white;
                    }
                }
            }
        }
    }
}

.js-search {
    float:left;
    padding-top:25px;
    margin-left: 81px;
    
    input {
        float: left;
    }
    
    
    .inputbox {
        padding:0 0 0 15px;
        margin:0;
        border-top: solid 4px @bright-blue;
        border-left: solid 4px @bright-blue;
        border-bottom: solid 4px @bright-blue;
        border-right: none;
        .border-radius(50px, 0, 0, 50px);
        outline: none;
        // background:url(@background-header) -645px -180px;
        .height(28px);
        width:156px;
        float: left;
        color:@medium-blue;
    }
    
    .button {
        background:url("@{image-base}blue-search-button.png") no-repeat;
        padding:0;
        margin:0;
        width:40px;
        height:36px;
        display:block;
        border:none;
        text-indent:-10000px;
    	cursor:pointer;
    }
}

.js-search-inner { 
    float:right;
}

#welcome {
	overflow: hidden;
}

#locationhash {
	/* used solely to contain template variables for tabs.js; should not display */
	display: none;
}

/* Learn More menu */
#block-intro-text {
	padding-right: 10px;

	span.def {
	    font-style: italic;
	}
}

a#readon {
    background:url("@{image-base}learnmore-downarrow.png") right center no-repeat;
    color:#fff;
    text-transform:capitalize;
    display:block;
    float:right;
    font-size:13px;
    font-weight:bold;
    
    &.down {
	    background:url("@{image-base}learnmore-uparrow.png") right center no-repeat;
    }

    span {
        .border-radius(32px, 0, 0, 32px);
        background-color: @bright-blue;
        margin-right:34px;
        padding:0 5px 0 20px;
        .height(36px);
        display:block;        
    }
}

.spread_the_word {
	height: 24px;
	width: 24px;
	position: top;
	margin-left:5px;
}

/* Explore column */
#js-leftcol {
    float:left;
    width:235px;
    margin-bottom: 20px;
    
    a {
        font-weight:normal;
        
        &:hover{
            text-decoration:underline;
        }
        
        &.comingsoon:hover {
        	text-decoration: none;
        	cursor: default;
        	
    		&:after {
	        	content: " Coming soon!";
    	    	color: @call-to-action;
    	    }
        }
    }
    
    .jsmod-content {
        border: solid 1px @pale-blue;
        .border-radius(0, 0, 10px, 10px);
    }

    ul {
        &.level1 > li > a, &.level1 > li > span {
            border-bottom:1px solid @pale-blue;
            border-top:1px solid @pale-blue; 
            .utilityheaders;
            padding:10px;
            
        }

        &.level2 li {
            .utilitylinks(5px, 10px);
            
            img {
            	vertical-align: middle;
            	.one-border-radius(5px);
            }
            
            .ungluer-name {
				.height(30px);
			}
        }
    }
}

/* Main content area: top */
#js-topsection {
    padding:15px 0 0 0;
    overflow:hidden;
}

.js-topnews {
    float:left;
    width:100%;
}

.js-topnews1 {
    background:url("@{image-base}header/header-m.png") 0 0 repeat-y;
}
.js-topnews2 {
    background:url("@{image-base}header/header-t.png") 0 0 no-repeat;
}
.js-topnews3 {
    background:url("@{image-base}header/header-b.png") 0 100% no-repeat;
    display:block;
    overflow:hidden;
    padding:10px;
}

/* Main content area: main*/

#main-container {
    margin: 15px 0 0 0;
}

#js-maincol-fr {
    float:right;
    width:725px;
}

div#content-block {
    overflow:hidden;
    background:url(@background-header) 100% -223px no-repeat;
    padding:0 0 0 7px;
    margin-bottom: 20px;
    
    &.jsmodule {
    	background: none;
    }
}

.content-block-heading a.block-link {
    float:right;
    padding:15px;
    font-size:11px;
    color:@text-blue;
    text-decoration:underline;
    font-weight:normal;
}

div#content-block-content {
    width:100%;
    overflow:hidden;
    padding-left: 10px;
    
    .cols3 .column {
        width:33.33%;
        float:left;
    }
}

/* Footer */
#footer {
    background-color: @pale-blue;
    clear: both;
    .utilityheaders;
    padding: 15px 0px 45px 0px;
    margin-top: 15px;
    overflow: hidden;
    
    .column {
        float:left;
        width: 25%;
        padding-top:5px;
        
        ul {
            padding-top:5px;
            margin-left:0;
            padding-left:0;
        }
        
        li {
            .utilitylinks(5px, 0);
            text-transform: none;
            list-style: none;
            margin-left: 0;
        }
    }
}

.pagination {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    clear: both;
    border-top: solid @text-blue thin;
    padding-top:7px;

    .endless_page_link {
      font-size: 13pt;
      border: thin @text-blue solid;
      font-weight: normal;
      margin: 5px;
      padding:1px;
    }
    .endless_page_current {
      font-size: 13pt;
      border: thin @text-blue solid;
      font-weight: normal;
      margin: 5px;
      padding:1px;
      background-color:@pale-blue;
    }
}

a.nounderline {
	text-decoration: none;
}

/* Without this the slideshow resizes to the wrong height when you click the controls */
.slides_control {
	height: 325px !important;
}