/**
 *
 * Generic CSS for CakePHP
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright 2005-2010, Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright 2005-2010, Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       cake
 * @subpackage    cake.app.webroot.css
 * @since         CakePHP(tm)
 * @license       MIT License (http://www.opensource.org/licenses/mit-license.php)
 */  
.draai-bg (@grad: 5) {
    -moz-transform: rotate(~`@{grad}+'deg'`);     
    -o-transform: rotate(~`@{grad}+'deg'`);     
    -webkit-transform: rotate(~`@{grad}+'deg'`);     
    -ms-transform: rotate(~`@{grad}+'deg'`);      
    transform: rotate(~`@{grad}+'deg'`);
    
    // IE <= 8
    @mgrad: ~`-1*@{grad}`;
    @deg2radians: 3.1416 * 2 / 360;
    @rad: @grad * @deg2radians;
    @sintheta: ~`Math.sin(@{rad})`;
    @costheta: ~`Math.cos(@{rad})`;
    @msintheta: ~`-Math.sin(@{rad})`;
    @mcostheta: ~`-Math.cos(@{rad})`;
    
    display: inline-block;
    //filter: ~`'progid:DXImageTransform.Microsoft.Matrix(M11=@{costheta}, M12=@{msintheta}, M21=@{sintheta}, M22=@{mcostheta})'`;
    
    >* {
      display: inline-block;
      //  filter: ~`'progid:DXImageTransform.Microsoft.Matrix(M11=@{mcostheta}, M12=@{sintheta}, M21=@{msintheta}, M22=@{costheta})'`;
        -moz-transform: rotate(~`@{mgrad}+'deg'`);                  
        -o-transform: rotate(~`@{mgrad}+'deg'`);
        -webkit-transform: rotate(~`@{mgrad}+'deg'`);     
        -ms-transform: rotate(~`@{mgrad}+'deg'`);
        transform: rotate(~`@{mgrad}+'deg'`);
    }
} 
.linear-gradient (@direction : top, @color1 : #000,@color2: #fff) {
    background: @color2;
    background: -webkit-gradient(linear, left top, left bottom, from(@color1), to(@color2));
    background-image: -moz-linear-gradient(top, @color1, @color2);
    background-image: -o-linear-gradient(top, @color1, @color2);
    background-image: linear-gradient(top, @color1, @color2);
} 
.rounded-corners (@radius: 2px) {
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -o-border-radius:@radius;
    border-radius:@radius;
}

@blauw-licht: #bddef1;
@blauw-donker: #90b0d6;
@groen-licht: #d9d071;
@groen-lichter: #ebe5b1;
@groen-donker: #283311;
@groen-donkerder: #352f17;
@groen-achter: #56722a;
@container-width: 1020px;

@mainfont: 'lucida grande',verdana,helvetica,arial,sans-serif; 
@menufont: Arial;
@linkkleur: #003D4C;


body {
    font-family: @mainfont;
    font-size: 10pt;
}

#bg-links, #bg-rechts{
	top: 0;
    width: 50%;
    z-index: -1;
    position: fixed;
    height: 100%;
    
    .schaduw {
    	position: relative;
    	width: 15px;
    	display: block;
   		height: 100%;
   	}
}
#bg-links {
    background: url("../img/achtergrond_links.jpg") no-repeat scroll right bottom transparent;
    left: @container-width/-2;

    .schaduw {
        background: url("../img/schaduw_links.png") repeat-y scroll 0 0 transparent;
         float: right;
    }
}
#bg-rechts {
    background: url("../img/achtergrond_rechts.jpg") no-repeat scroll left bottom transparent;
    margin-right: @container-width/-2;
    right: 0;
    
    .schaduw {
           background: url("../img/schaduw_rechts.png") repeat-y scroll 0 0 transparent;
        left: 0;
       }
}
 
#container {
    border: 0;
    padding: 0 10px 10px 10px;
} 
#header {
    background: url("../img/header.jpg") no-repeat scroll top #FFFFFF;
    border-bottom: 3px solid @groen-lichter;
    padding: 0 0;
    height: 117px;
    h1 {
        width: 95%;
        background: url("../img/header.png") no-repeat scroll right 10px transparent;
        padding-top: 25px;
    }
    #langpicker {
        float: left;
    }
}
#content {
    width: 655px;
    padding: 10px 0 0 0;
    &.breed {
        width: 1000px;
    }
}
aside {
    width:335px;
    padding-left: 10px;
}

footer {
    font-size: 85%;
    color: #333;
    margin: 5px 0 5px 0;
    padding: 0;
    text-align: center;
    border-top: 3px solid @groen-licht;
    span {
        display: block;
        border-top: 3px solid @groen-achter;
        height:5px;    
    }
    a {
        font-weight: normal;
        color: #333;
    } 
}

.breadcrumbs{
    float: none;
    margin-top: -9px;
    margin-bottom:5px;
    
}
div.beheerderspagina {
	.rounded-corners(6px);
	float: left;	
	text-align: center;
	background: url("../img/opacity70w.png") transparent;
    &:hover {
		background: url("../img/opacity70.png") transparent;	
	}	
	
    a {
    	color: #333;
	   	font-weight: normal;
	}
}
#w3b-menu{
    background: transparent;
    font-family: @menufont;
    font-size: 110%;
    border-bottom: 3px solid @groen-achter;
    height: 24px; 
      ul{         
        background: url("../img/opacity50.png") transparent;
        list-style-type: none;
        margin: 0;
        padding: 0;
        float: right;
        display: inline;
        li{
            display: inline;
            margin: 0 15px;
            padding: 3px;
            background: url("../img/opacity50.png") transparent;
            a{
                color: #003300;
                text-decoration: none; 
            }
            .selected a{
                color: #aaaaff;
               	background: url("../img/opacity70.png") transparent;
            }
            ul {
                display: none; 
                li.selected {
                    background-color: #8888ff;    
                }
            }
            .selected ul {
                display: block;
            }
            &:hover {
            	background: url("../img/opacity70.png") transparent;	
           	}
            
            &.rotate1 {
               .draai-bg(5); 
            }
            &.rotate2 {
               .draai-bg(-2); 
            }
            &.rotate3 {
               .draai-bg(7); 
            }
            &.rotate4 {
               .draai-bg(2); 
            }
            &.rotate5 {
               .draai-bg(-5); 
            }
            &.rotate6 {
               .draai-bg(-2); 
            }
            &.rotate7 {
               .draai-bg(3); 
            }
        }
        
    }
}
.h2wrap {
    display: block;
    margin: 0 0 0 2px;
    padding: 0;
    clear: none;
    div {
        display: inline-block;
        margin: 0;
        padding: 0;
        background-color: @groen-achter;
        div {
            background-color: @groen-donker;
            .draai-bg(-3);
        }
        h2 {
            background: none; 
            color: white; 
            font-size: 100%;
            margin: 5px;
            font-weight: bold;
        }
    }
}
.h3wrap {
    display: block;
    margin: 10px 0 0 2px;
    padding: 0;
    clear: none;
    div {
        display: inline-block;
        margin: 0;
        padding: 0;        
        background-color: @groen-achter;
        div {
            background-color: @blauw-donker;
            .draai-bg(2);
        }
        h3 {
            background: none; 
            color: #222; 
            font-size: 100%;
            margin: 5px;
            font-weight: bold;
        }    
    }
}
h4 {
    margin: 10px 0 0 0;
    color: #56722A;
    font-weight: bold;
}
p {
    margin-bottom:10px;
    
}
hr {
	border-color: @groen-achter;
	color: @groen-achter;	
}
/** Forms **/
form .submit input[type="submit"], .button, button {
	.rounded-corners(4px);
	.linear-gradient(top, @groen-achter, @groen-donker);
	border: 1px solid @groen-achter;
	color: white;
	padding: 5px;
	
	&:hover {
		.linear-gradient(top, @groen-achter, @groen-achter);
	}
}    

/** tabellen **/
table {
    border-collapse:collapse;
    tr {
        th {
            border: 1px solid #888;
            font-weight: bold;
            background-color: #e7e7e7;
            
        }
        td {
            padding: 1px;
            border: 1px solid #888;
            padding:3px;
            background-color: #e7e7e7;
        }
        
    }
}

/** Homepage **/

.slider-wrapper {
    width: 655px;
    height: 432px;
    padding: 0;
    margin-bottom:0px;
    border: 0;
    overflow: hidden;
}
.nivo-caption {
    position:absolute;
    left:15px;
    bottom:15px;
    background: @groen-achter;
    color:#eee;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
    background: @groen-donkerder;
    .draai-bg(-1); 
}


/** ALGEMEEN **/
.display_row > .action_buttons {
    display: none;
}
.display_row:hover > .action_buttons {
    display: inline;
    float: right;
}
div.clear-both {
    clear: both;
    margin: 0;
    padding: 0;
}
.knop-edit span{
    text-indent: -10000px;
    width: 20px;
    height: 20px; 
    background: url(../img/buttons/edit.png) no-repeat; 
}

/* PAGINAS */
#pagina .subimage {
    float:left;
    margin-right: 15px;
}
#pagina .related > div{
    clear: both;
    margin-bottom: 15px;
}

#booking {
	width: 98%;	
}

@import "blocks.less";