@base-url: "http://10.0.1.5:8888/app-bits-2012";

/**
 * Gridpak Beta LESS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */

/* Reusable column setup */
.mixin-col {
     border:0px solid rgba(0,0,0,0);
     float:left;
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
     -moz-background-clip:padding-box !important;
     -webkit-background-clip:padding-box !important;
     background-clip:padding-box !important;
}
.col {
     .mixin-col;
}

.mixin-span(@num, @gutter_pc, @gutter_px, @padding, @max_columns) {
    @one_col: (100% - (@gutter_pc * (@max_columns - 1))) / @max_columns;
    width:(@one_col * @num) + (@gutter_pc * (@num - 1));
    border-left-width:@gutter_px;
    padding:@padding;
    margin-left:@gutter_pc;
}
.mixin-span_first {
    margin-left:0;
}
 
 

    /* 1. 1 Column Grid 0px - 319px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 0px) and (max-width: 439px) {
        
        .col {
            margin-left:0%;
            padding:0 0;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 1;
        @padding: 0 0;
        @gutter_px: 0;
        @gutter_pc: 0%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        
        */
        .span_1 {
            .mixin-span_first;
            width:100%;
        }
        .last {
            width:100%;
            padding-top: 50px;
        }

        // APP-BITS Style Adjustments
        h2 {
        	padding-top: 30px;
        }
        header { 
        	nav {
        		clear: both;
        		float: left;
        		width: 320px;
        		padding: 20px 0 10px 0;
        		
        		ul {
        			float: left;
        			
        			li {
        				float: none;
        				margin: 5px 0 0 0;
        				height: 22px;
			        	font-size: 20px;
			        }
				}
				
				blockquote {
					display: none;
				}
			}
        }
 
        #pagination {
			.flex-direction-nav {		
				li {
					a {
						width: 28px; 
						height: 50px;

						&.next {
							background: url("@{base-url}/assets/images/arrow_right_small.png") no-repeat 0 0;
							right: -30px;
							
							&:hover {
								background-position: 0 -50px;
							}
						}
						&.prev {
							background: url("@{base-url}/assets/images/arrow_left_small.png") no-repeat 0 0;
							left: -30px;
							
							&:hover {
								background-position: 0 -50px;
							}
						}
					}
				}
			}
        }
        
        form {
        	ul li.text {
        		input {
        			width: 60%;
        		}
        	}
        }
    }

    /* 2. 2 Column Grid 320px - 779px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    47.0%
    Span 2:    100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 440px) and (max-width: 779px) {
        
        .col {
            margin-left:6%;
            padding:0 0;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 2;
        @padding: 0 0;
        @gutter_px: 0;
        @gutter_pc: 6%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
        
        
        .span_1,
        .para  {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_2,
        .last {
            .mixin-span_first;
            clear: both;
            width:100%;
            padding-top: 50px;
        }
        
        // APP-BITS Style Adjustments
        header { 
        	nav {
        		clear: both;
        		float: left;
        		width: 400px;
        		padding: 20px 0 10px 0;
        		
        		ul {
        			float: left;
        			
        			li {
        				margin: 0 0 0 30px;
        				height: 22px;
			        	font-size: 20px;
			        }
				}
				
				blockquote {
					display: none;
				}
			}
        }
        
        #pagination {
			.flex-direction-nav {		
				li {
					a {
						width: 28px; 
						height: 50px;

						&.next {
							background: url("@{base-url}/assets/images/arrow_right_small.png") no-repeat 0 0;
							right: -30px;
							
							&:hover {
								background-position: 0 -50px;
							}
						}
						&.prev {
							background: url("@{base-url}/assets/images/arrow_left_small.png") no-repeat 0 0;
							left: -30px;
							
							&:hover {
								background-position: 0 -50px;
							}
						}
					}
				}
			}
        }
    }

    /* 3. 3 Column Grid 780px - 958px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    29.3333333333%
    Span 2:    64.6666666667%
    Span 3:    100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 780px) and (max-width: 959px) {
        
        .col {
            margin-left:6%;
            padding:0 0;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 3;
        @padding: 0 0;
        @gutter_px: 0;
        @gutter_pc: 6%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
        
        
        .span_1,
        .para {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_2,
        .contact_form {
            .mixin-span(2, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_3 {
            .mixin-span_first;
            width:100%;
        }
    }

    /* 4. 3 Column Grid 959px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    29.3333333333%
    Span 2:    64.6666666667%
    Span 3:    100%
    
    ----------------------------------------------------------------------------- */	
    
	@media screen and (min-width: 960px) {
        
        .col {
            margin-left:6%;
            padding:0 0;
        }
        
        /* --- Gridpak variables ---*/ 
        @max_columns: 3;
        @padding: 0 0;
        @gutter_px: 0;
        @gutter_pc: 5%;
        

        
        .row .col:first-child {
            .mixin-span_first;
        }
        
        
        .span_1,
        .para {
            .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_2,
        .contact_form {
            .mixin-span(2, @gutter_pc, @gutter_px, @padding, @max_columns);
        }
        .span_3 {
            .mixin-span_first;
            width:100%;
        }
    }