it/itf/static/css/noel/inner.css

#centerInner
{background:url(/static/images/noel/wooden1.jpg) repeat;
width:100%;}

.centerInnerContent
{width:960px;
margin-right:auto;
margin-left:auto;
position:relative;} 

#leftColumn
{width:300px;
height:620px; /*SANJ to change height in JS according to screen*/
background-color:#FFF;
margin-top:-8px; /*had to give this because of shadow*/
margin-bottom:20px;
-moz-border-radius:8px; 
-webkit-border-radius:8px; 
border-radius:8px;
-moz-box-shadow:2px 3px 20px #252425;
-webkit-box-shadow:2px 3px 20px #252425;
box-shadow:2px 3px 20px #252425;  
position:relative;
float:left;
padding-right:6px;}

#topText
{font-size:24px;
color:#ffb400;
padding-top:7px;
padding-left:16px;}

#topTextSpan
{font-weight:bold;}

#plus
{font-size:24px;
color:#ffb400;
position:absolute;
right:42px;
top:6px;
cursor:pointer;} 

#plusTooltip /*SANJ, this is the basic CSS for your javascript tooltip; no element exists in the HTML doc*/
{background-color:#f7bd00;
color:#FFF;
cursor:pointer;} 

#searchInner 
{position:absolute;
right:16px;
top:11px;
cursor:pointer;}

.searchInnerField
{width:114px;
/*position:absolute;
right:4px;
top:11px;*/
margin-left: 174px;
margin-top:4px;
background:url(img/search-icon.png) no-repeat right; 
padding:2px 2px 2px 4px;
font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif; 
font-size:12px;
color:#7d7d7d;
-moz-border-radius:8px; 
-webkit-border-radius:8px; 
border-radius:8px;
border:1px solid #f0f0f0; 
-moz-box-shadow:inset 2px 2px 6px #d7d7d7;
-webkit-box-shadow:inset 2px 2px 6px #d7d7d7;
box-shadow:inset 2px 2px 6px #d7d7d7;
outline:none;
}  /*placeholder input text supported by html5 for FF3.7 and webkit*/


.searchInnerField:focus
{border:1px solid #999; }

#tabsInner /*tabs not touching because i would prefer not to give fixed width, shadow, etc.*/
{font-size:14px;
color:#ff8400;
margin-top:6px;
margin-left:8px;}

#tabsInner li 
{list-style:none;
text-align:center;
padding-left:10px;
padding-right:10px;
float:left;}

#selection
{padding-left:6px;}

.tabCategory 
{-moz-border-radius-topright:8px; 
-webkit-border-top-right-radius:8px;
border-top-right-radius:8px; 
-moz-border-radius-topleft:8px; 
-webkit-border-top-left-radius:8px; 
border-top-left-radius:8px;
border-top:1px solid #ececec;
-moz-box-shadow:-3px 0px 6px #e0dfdf;
-webkit-box-shadow:-3px 0px 6px #e0dfdf;
box-shadow:-3px 0px 6px #e0dfdf;
background-color:#FFF;
color:#ffb80f;
cursor:pointer;
margin-right:6px;}

.innerSelected /*SANJ this is the extra class for the selected tabs*/
{-moz-border-radius-topright:8px; 
-webkit-border-top-right-radius:8px;
border-top-right-radius:8px; 
-moz-border-radius-topleft:8px; 
-webkit-border-top-left-radius:8px; 
border-top-left-radius:8px;
border:1px solid #ececec;
padding:2px 6px;
background-color:#f7bd00;
color:#FFF;
-moz-box-shadow:-3px -0px 6px #e0dfdf;
-webkit-box-shadow:-3px -0px 6px #e0dfdf;
box-shadow:-3px -0px 6px #e0dfdf;
cursor:pointer;}

.tabText
{ display:none; }

.displayedTab
{ display:block !important; }

#loadingList
{display:none;}

#contentTabsInner
{font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
font-size:13px;
color:#3b3b39;
text-align:justify;
padding-top:6px;
padding-left:10px;
padding-right:20px; /*why is this 20 and the left 10?*/
padding-bottom:6px;
clear:both;}

.selectMenu
{padding-top:6px;}

.selectMenu select
{border:1px solid #f7bd00;
background-color:#f7bd00;
color:#3B3B39;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:2px outset #f0f0f0; 
/*background-color:#f0f0f0;*/
outline:none;}

.selectMenu select:focus
{}

#listLeft
{position:relative;
}

.tabListItem
{text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:100%;}

#listLeft ul
{color:#898989; /*was originally f7bd00*/
list-style-image:url(/static/images/noel/disc.png);
list-style-type:disc;
list-style-position:inside;
padding-left:16px;
overflow:hidden; /*this prevents the box shadow from sticking out on the right*/
}

#listLeft ul span
{color:#898989;}

#listLeft ul li
{border-top:1px solid #cac9c9;
-moz-box-shadow:4px 0px 6px #b8b8b8;
-webkit-box-shadow:4px 0px 6px #b8b8b8;
box-shadow:4px 0px 6px #b8b8b8;
padding-top:6px;
padding-bottom:6px;
cursor:pointer;
} 



#listLeft ul li a, #listLeft ul li a:link, #listLeft ul li a:visited, #listLeft ul li a:active 
{color:#898989;
text-decoration:none;}

#listLeft ul li:hover
{text-decoration:underline;
color:#898989;}

.listLeftSelected
{border-bottom:1px solid #eece98;
border-top:1px solid #eece98;
-moz-box-shadow:inset -6px 0px 18px #eece98;
-webkit-box-shadow:inset -6px 0px 18px #eece98;
box-shadow:inset -6px 0px 18px #eece98;
cursor:pointer;}

#triangleUp
{font-size:10px;
color:#f7bd00;
position:absolute;
right:8px;
top:-14px;
cursor:pointer;} 

#triangleDown
{font-size:10px;
color:#f7bd00;
position:absolute;
right:8px;
bottom:-0px;
cursor:pointer;} /*SANJ, see what happens to the list when i do ctrl minus, and the triangles as well*/

#rightColumn
{width:618px;
height:100%; /*necessary, right?*/
margin-top:-8px;
margin-left:36px;
margin-bottom:20px;
float:left;
position:relative;}

#pin
{position:absolute;
left:18px;
top:-24px;
z-index:60;}

#topRight
{width:610px;
height:228px;
background-color:#FFF;
-moz-border-radius:8px; 
-webkit-border-radius:8px; 
border-radius:8px;
-moz-box-shadow:2px 3px 20px #252425;
-webkit-box-shadow:2px 3px 20px #252425;
box-shadow:2px 3px 20px #252425;}

#imageLeft
{width:170px;
height:223px; /*width and height for placeholder ok?*/
background-image:url(/static/images/noel/image-holder.png);
background-repeat:no-repeat;
/*-moz-border-radius:8px; 
-webkit-border-radius:8px; 
border-radius:8px;*/
float:left;
position:relative;
z-index:40;
margin-left:14px;
margin-top:2px;
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);}

#imageInside
{width:142px;
height:150px;
position:absolute;
left:14px;
top:12px;
background-color:purple;
z-index:50;}

#textRight
{width:306px;
height:159px;
overflow:hidden;
color:#f7bd00;
font-size:50px;
text-align:right;
padding-top:20px;
padding-right:14px;
float:right;}

.socialIcons
{position:relative;
clear:both;}

.twitter
{position:absolute;
bottom:2px;
right:89px;}

.twitter-share-button
{/*padding-top:35px;
margin-left:164px;
margin-right:20px;
float:left;*/
}

.fb
{width:62px;
font-size:12px;
color:#fff;
/*padding-top:35px;
float:left;*/
position:absolute;
bottom:2px;
right:20px;}

.fb a
{text-decoration:none;
color:#fff;
background-color:#3b5998;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px; 
}/*problem customising these*/

.download
{cursor:pointer;
position:absolute;
bottom:6px;
right:10px;
/*padding-top:39px;
clear:both;*/}

#clearBoth
{clear:both;}