/* ===================================================================
   BODY                                                           BODY
   =================================================================== */

body { margin:0; padding:0; text-align:center; background:#02b6db; }

/* ===================================================================
   CONTAINER                                                 CONTAINER
   =================================================================== */

#container { position:relative; width:988px; margin:0 auto; text-align: left; }

/* ===================================================================
   HEADERS                                                     HEADERS
   =================================================================== */

/* ........... HEADER ........... */
header { height:60px; border:none; }
#headerBack { position:absolute; top:0px; left:0; width:100%; height:60px; background:url(../elements/shell/header/background.png) bottom; }

header #logo { position:absolute; top:10px; left:10px; display:block; background:url(../elements/shell/header/logoLeerwereld.png); width:256px; height:37px; }

/* ===================================================================
   NAV TABBAR                                               NAV TABBAR
   =================================================================== */

nav { position:absolute; display:block; left:0; top:25px; height:30px; width:100%; }
nav #leftTabs { position:absolute; left:0; }
nav #rightTabs { position:absolute; right:0; }
nav #leftTabs ul li { margin:0 4px 0 0; }
nav #rightTabs ul li { margin:0 0 0 4px; }

nav ul { list-style: none; margin:0; padding:0; }
nav ul li { float:left; background:#02b6db url(../elements/controls/buttons/mainTab/back.png);
	/*SHADOWS*/
	box-shadow:0px 1px 5px rgba(0,0,0,.5);
	-webkit-box-shadow:0px 1px 5px rgba(0,0,0,.5);
	-moz-box-shadow: 0px 1px 5px rgba(0,0,0,.5); }
	
nav ul .innerTab { display:inline-block; padding:4px 10px 4px 10px; font-weight:bold; font-size:12px; text-decoration:none; color:#097287; 
	background:url(../elements/controls/buttons/mainTab/front.png); background-color:#02b6db;
	margin:2px; }

nav ul li.selected { background-image:url(../elements/controls/buttons/mainTab/backSelected.png);
	/*NO SHADOWS*/
	box-shadow:0px 1px 5px rgba(0,0,0,0);
	-webkit-box-shadow:0px 1px 5px rgba(0,0,0,0);
	-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0); }
nav ul li.selected .innerTab { margin:2px 2px 0px 2px;padding:4px 10px 6px 10px; background-image:url(../elements/controls/buttons/mainTab/frontSelected.png); color:#FFF; }
nav ul li.selected .innerTab span { margin:0 3px 0 3px; }
nav ul li.selected .innerTab a { color:#ffb345; }
nav ul li.selected .innerTab a:hover { color:#FFF; }

nav ul li.add { border-top-right-radius:18px; -moz-border-radius-topright:18px; -webkit-border-top-right-radius:18px; }
nav ul li.add .innerTab { font-size:18px; padding:2px 8px 2px 6px; border-top-right-radius:17px; -moz-border-radius-topright:17px; -webkit-border-top-right-radius:17px; }

/* ===================================================================
   TILES SCROLLER                                       TILES SCROLLER
   =================================================================== */

#fullscreenLayer { position:relative; display:inline-block; z-index:100; width:100%; height:100px; }
#fullscreenLayer .holder { position:absolute; left:0; right:0; top:0; bottom:0; }
#fullscreenLayer .holder #contentFlashHolder { width:100%; height:100%; }

/* ===================================================================
   TILES SCROLLER                                       TILES SCROLLER
   =================================================================== */

#tilesScroller { position:relative; width:988px; overflow:hidden; }/* background:rgba(0,0,0,.2);*/

#tilesScrollerControls .scroller { position:absolute; z-index:500; cursor:pointer; }
#tilesScrollerControls .scroller .bar { position:absolute; background:#02b6db; }
#tilesScrollerControls .scroller .shade { position:absolute; left:0px; top:0px; right:0px; bottom:0px; }
#tilesScrollerControls .scroller .button { position:absolute; }

#tilesScrollerControls .scroller.right { top:95px; right:0px; bottom:37px; width:71px; display:none; }
#tilesScrollerControls .scroller.right .bar { left:5px; top:0px; right:0px; bottom:0px;  }
#tilesScrollerControls .scroller.right .shade { background:url(../elements/controls/buttons/scrollers/right/back.png) repeat-y; }
#tilesScrollerControls .scroller.right .button { width:71px; background:url(../elements/controls/buttons/scrollers/right/graphic.png) no-repeat left center; left:0px; top:0px; bottom:0px; }
#tilesScrollerControls .scroller.right:hover .button { background:url(../elements/controls/buttons/scrollers/right/graphic.png) no-repeat right center; }

#tilesScrollerControls .scroller.left { top:95px; left:0px; bottom:37px; width:71px; display:none; }
#tilesScrollerControls .scroller.left .bar { left:0px; top:0px; right:5px; bottom:0px;  background:#02b6db; }
#tilesScrollerControls .scroller.left .shade { background:url(../elements/controls/buttons/scrollers/left/back.png) repeat-y; }
#tilesScrollerControls .scroller.left .button { width:71px; background:url(../elements/controls/buttons/scrollers/left/graphic.png) no-repeat right center; right:0px; top:0px; bottom:0px; }
#tilesScrollerControls .scroller.left:hover .button { background:url(../elements/controls/buttons/scrollers/left/graphic.png) no-repeat left center; }

#tilesScrollerControls .scroller.top { top:95px; right:0px; left:0px; height:71px; display:none; }
#tilesScrollerControls .scroller.top .bar { bottom:5px; top:0px; right:0px; left:0px; }
#tilesScrollerControls .scroller.top .shade { background:url(../elements/controls/buttons/scrollers/top/back.png) repeat-x; }
#tilesScrollerControls .scroller.top .button { height:71px; background:url(../elements/controls/buttons/scrollers/top/graphic.png) no-repeat bottom center; bottom:0px; left:0px; right:0px; }
#tilesScrollerControls .scroller.top:hover .button { background:url(../elements/controls/buttons/scrollers/top/graphic.png) no-repeat top center; }

#tilesScrollerControls .scroller.bottom { bottom:37px; right:0px; left:0px; height:71px; display:none; }
#tilesScrollerControls .scroller.bottom .bar { bottom:0px; top:5px; right:0px; left:0px; }
#tilesScrollerControls .scroller.bottom .shade { background:url(../elements/controls/buttons/scrollers/bottom/back.png) repeat-x; }
#tilesScrollerControls .scroller.bottom .button { height:71px; background:url(../elements/controls/buttons/scrollers/bottom/graphic.png) no-repeat top center; top:0px; left:0px; right:0px; }
#tilesScrollerControls .scroller.bottom:hover .button { background:url(../elements/controls/buttons/scrollers/bottom/graphic.png) no-repeat bottom center; }

/* ===================================================================
   TILES DISPLAY                                         TILES DISPLAY
   =================================================================== */

#tilesDisplay { width:1130px; margin:0; display:block; }
#tilesDisplay2 { position:absolute; margin:0;  display:block; top:100px; }

.rowSpacer { display:block; width:6px; height:6px; }
.columnSpacer { display:block; float:left; width:6px; height:6px; }

.row { height:136px; }
.row .column {  position:relative; float:left; width:136px; height:136px; }

.exampleHolder { position:relative; display:inline-block; }

.sampleRow { display:inline-block; width:100%; }
.sampleRow .sampleColumn {  position:relative; display:inline-block; width:70px; height:50px; margin:0 3px 3px 0; }
.sampleRow .sampleColumn .tile { width:70px; height:50px;  }

.chooseTileColumn {  position:relative; float:left; width:136px; height:136px; margin:0 6px 6px 0; }

.tile { position:absolute; display:block; width:136px; height:136px; text-decoration:none; border-radius:18px; -moz-border-radius:18px; -webkit-border-radius:18px; }
.tile .center { position:absolute; display:block; left:6px; right:6px; top:6px; bottom:6px; border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; }
.tile .picto { position:absolute; left:6px; right:6px; top:6px; width:124px; height:93px; display:table; }
.tile .picto .pictoWrapper { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
.tile .title { position:absolute; left:6px; right:6px; bottom:10px; font-weight:bold; color:#FFF; text-align:center; line-height:14px; }
.tile .noAccessLock { position:absolute; background:url(../elements/icons/lockedTile.png); width:37px; height:42px; top:99px; left:103px; }

.tile.draggable { z-index:50; cursor:pointer; }

.tile.empty { cursor:pointer; background:#02b6db url(../elements/controls/tiles/empty/back.png); }
.tile.empty .center { background:#02b6db url(../elements/controls/tiles/empty/center.png);
	box-shadow:0px 1px 5px rgba(0,0,0,.5) inset; -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.5) inset; -webkit-box-shadow:0px 1px 5px rgba(0,0,0,.5) inset; }
.tile.empty .add { position:absolute; display:none; left:0; top:0; right:0; bottom:0; background:url(../elements/controls/tiles/empty/backOver.png);
	text-decoration:none; color:#6d6d6d; color:rgba(0,0,0,.5); font-weight:bold; text-align:center; 
	border-radius:18px; -moz-border-radius:18px; -webkit-border-radius:18px; }
/*.tile.empty:hover .add { display:block; }*/
.tile.empty .add img { margin-top:15px; }

.tile.empty.hover .center { background:#FFF; background:rgba(255,255,255,.75); }
.tile.empty.deny .center { background:#e00821; background:rgba(255,0,0,.6); }

/* ===================================================================
   SEARCH                                                       SEARCH
   =================================================================== */

#searchBar { position:absolute; top:10px; left:745px; }
#searchBar input { display:block; float:left; margin:0; border:none; }
#searchBar #ti_search { width:200px; padding:4px 0 4px 10px; background:url(../elements/controls/search/static/back.png) no-repeat; font-size:12px; }
#searchBar #btn_search { display:block; float:left; width:30px; height:23px; background:url(../elements/controls/search/button/graphic.png); }
#searchBar #btn_search:hover { background:url(../elements/controls/search/button/graphic.png) bottom; }

#searchBar input.empty { font-style:italic; color:#909090; }

.yui-ac { position:relative;font-family:arial;font-size:100%; z-index:999; }
.yui-ac-input { position:relative; width:100%;}
.yui-ac-container {position:absolute; top:1.6em; width:100%; right:40px; }
.yui-ac-content { position:absolute; width:100%;border:1px solid #808080;background:#fff;overflow:hidden;z-index:9050;}
.yui-ac-shadow { position:absolute;margin:.3em;width:100%;background:#000;-moz-opacity:.10;opacity:.10;filter:alpha(opacity=10);z-index:9049;}
.yui-ac-content ul { margin:0;padding:0;width:100%;}
.yui-ac-content li { margin:0px;padding:0px; cursor:default;white-space:nowrap;list-style:none;zoom:1; }

.yui-ac-content li.yui-ac-prehighlight { background:#06F; color:#FFF;}
.yui-ac-content li.yui-ac-highlight { background:#06C; color:#FFF;}

.autocompleteKeyword { display:inline-block; font-size:12px; font-weight:normal; margin:2px 5px; padding:2px 5px; }

/* ===================================================================
   FOOTER                                                       FOOTER
   =================================================================== */

footer { text-align:right; }
footer #logoJBE { margin: 0 0; margin-right:10px; display:inline-block; background:url(../elements/shell/header/logoJBE.png); width:131px; height:38px; }
footer #logoGroen { margin: 0 0; margin-right:10px; display:inline-block; background:url("../elements/shell/header/logoGroen.png"); width:121px; height:40px; }

/* ===================================================================
   CRUMB                                                         CRUMB
   =================================================================== */

footer #crumbtrail { float:left; padding: 15px 0; }
header #crumbtrail { float:right; padding: 20px 0 0px 0; }

#crumbtrail a { padding:5px 10px; text-decoration:none; margin:0 3px 0 3px; font-weight:bold; color:#FFFFFF; background:url(../elements/controls/buttons/crumb/back.png); 
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
#crumbtrail a:hover { color:#FFF; background:#000; }
#crumbtrail span { padding:5px 10px; text-decoration:none; margin:0 3px 0 3px; font-weight:bold; color:#000000; background:url(../elements/controls/buttons/crumb/selected.png); 
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }

/* ===================================================================
   ADD TILE                                                   ADD TILE
   =================================================================== */

#addTile { height:100%; background:#02b6db; text-align:left; }
#addTile #container1 { position:relative; display:block; float:left; width:50%; height:100%; z-index:2; }
#addTile #container1 .frame { position:absolute; display:block; left:0; top:0; right:0px; bottom:0; padding:20px 10px 10px 20px; background:url(../elements/shell/addTile/back/dark.png); }
#addTile #container1 .frame h1 { font-size:18px; color:#FFF; padding:0px 0px 5px 0px; }
#addTile #container1 .frame .inputHolder { margin:0px 16px 20px 0; }
#addTile #container1 .frame .inputHolder input[type="text"] { padding:9px 8px 9px 8px; background:rgba(255,255,255,.9); width:100%;
	border:none; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
	box-shadow:0px 1px 5px rgba(0,0,0,.75) inset; -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.75) inset; -webkit-box-shadow:0px 1px 5px rgba(0,0,0,.75) inset; }
#addTile #container1 .frame .inputHolder select { padding:9px 8px 9px 8px; background:rgba(255,255,255,.9); width:100%;
	border:none; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
	box-shadow:0px 1px 5px rgba(0,0,0,.75) inset; -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.75) inset; -webkit-box-shadow:0px 1px 5px rgba(0,0,0,.75) inset; }
#addTile #container1 .frame .pictoHolder { position:absolute; left:20px; top:100px; right:10px; bottom:20px; overflow:auto; }
#tilePicker .empty { color:#999; }

#addTile #container2 { position:relative; display:block; float:left; width:50%; height:100%; z-index:1; }
#addTile #container2 .frame { position:absolute; display:block; left:0px; top:0; right:0; bottom:0; padding:20px;
	background:url(../elements/shell/addTile/back/light.png); }
#addTile #container2 .frame .topSection { position:absolute; left:10px; right:10px; top:20px; bottom:80px; overflow:auto; }
#addTile #container2 .frame .topSection h1 { font-size:18px; color:#000; color:rgba(0,0,0,.5); padding:0px 0px 5px 0px; }
#addTile #container2 .frame .topSection h1 span { font-size:12px; margin-left:10px; color:#F00; }
#addTile #container2 .frame .topSection .inputHolder { margin:0px 16px 20px 0; }
#addTile #container2 .frame .topSection .inputHolder input[type="text"] { padding:9px 8px 9px 8px; background:rgba(255,255,255,.8); width:100%;
	border:none; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
	box-shadow:0px 1px 5px rgba(0,0,0,.75) inset; -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.75) inset; -webkit-box-shadow:0px 1px 5px rgba(0,0,0,.75) inset; }
#addTile #container2 .frame .topSection #tileDescription { margin:0 0 20px 0; }

#addTile #container2 .frame .bottomSection { position:absolute; height:150px; left:0px; right:0px; bottom:0px; padding:5px 20px; }
#addTile #container2 .frame .bottomSection .focusButton { position:absolute; bottom:30px; right:20px; }
#addTile #container2 .frame .bottomSection .basicButton { position:absolute; bottom:30px; right:120px; }
#addTile #container2 .frame .bottomSection .spacer { display:inline-block; width:20px; height:10px; }


/* ===================================================================
   BASE BUTTONS                                           BASE BUTTONS
   =================================================================== */


.focusButton { display:inline-block; background-color:#02b6db; background-image:url(../elements/controls/buttons/focusButton/back.png);
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
	box-shadow:0px 1px 5px rgba(0,0,0,.5); -webkit-box-shadow:0px 1px 5px rgba(0,0,0,.5); -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.5); }
.focusButton div { display:inline-block; padding:8px 20px; font-weight:bold; font-size:12px; text-decoration:none; color:#FFFFFF; 
	border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
	background:url(../elements/controls/buttons/focusButton/front.png); background-color:#02b6db;
	margin:2px; }
.focusButton:hover { background-image:url(../elements/controls/buttons/focusButton/backOver.png); }
.focusButton:hover div { background-image:url(../elements/controls/buttons/focusButton/frontOver.png); }


.basicButton { display:inline-block; background-color:#02b6db; background-image:url(../elements/controls/buttons/basicButton/back.png);
	border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;
	box-shadow:0px 1px 5px rgba(0,0,0,.5); -webkit-box-shadow:0px 1px 5px rgba(0,0,0,.5); -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.5); }
.basicButton div { display:inline-block; padding:8px 20px; font-weight:bold; font-size:12px; text-decoration:none; color:#097287; 
	border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
	background:url(../elements/controls/buttons/basicButton/front.png); background-color:#02b6db;
	margin:2px; }
.basicButton:hover { background-image:url(../elements/controls/buttons/basicButton/backOver.png); }
.basicButton:hover div { background-image:url(../elements/controls/buttons/basicButton/frontOver.png); }

	
/* ===================================================================
   ELEMENTS                                                   ELEMENTS
   =================================================================== */

/* these classes can be used to float an element left or right in your page. The floated element must precede the element it should be next to on the page. */
.fltrt { float: right; margin-left: 8px; }
.fltlft { float: left; margin-right: 8px; }

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure {
	display: block;
}

/* ===================================================================
   CONTEXT MENU                                           CONTEXT MENU
   =================================================================== */

/* Generic context menu styles */
.contextMenu { position:absolute; width:120px; z-index:99999; border:solid 1px #CCC; background:#EEE; padding:0px; margin:0px; display:none; }

.contextMenu li { list-style:none; padding:0px; margin:0px; }
.contextMenu a { color:#333; text-decoration:none; display:block; line-height:20px; height:20px; 
	background-position:6px center; background-repeat:no-repeat; outline:none; padding:1px 5px; padding-left:28px; }
.contextMenu li:hover a { color:#FFF; background-color:#3399FF; }
.contextMenu li.disabled a { color:#AAA; cursor:default; }
.contextMenu li.hover.disabled a { background-color:transparent; }
.contextMenu li.separator { border-top:solid 1px #CCC; }


.contextMenu li.edit a { background-image:url(images/page_white_edit.png); }
.contextMenu li.cut a { background-image:url(images/cut.png); }
.contextMenu li.copy a { background-image:url(images/page_white_copy.png); }
.contextMenu li.paste a { background-image:url(images/page_white_paste.png); }
.contextMenu li.delete a { background-image:url(images/page_white_delete.png); }
.contextMenu li.quit a { background-image:url(images/door.png); }

/* =================================================================== */