/*  Global  */
html, body { color: #666666; font-size: 12px; font-family: arial; background-color: #ffcc00; margin: 0; padding: 0; }
p { line-height: 20px; }
td { }
a { color: #f60; }
a:hover { color: #ff1100; }
img { border: 0; }
h3 { font-size: 14px; font-weight: normal; }
h4 { font-size: 10px; font-weight: normal; } 
.more { text-align: right; margin: 0; padding: 0; }
.date { color: #999999; margin: 5px 0; }
.thumb { border: 5px solid #e6e6e6; }
.twocolumn .thumb { margin-bottom: 5px; margin-right: 5px; float: left; }
.indent { padding-left: 10px; }
.pagination { clear: both; margin: 10px; padding: 0; }
.floatL { float: left; margin-right: 40px; }
.floatR { float: right; margin-left: 40px; }
.row1 { background-color: #fef2c2; padding: 0 0 5px 5px; }
.row2 { padding: 0 0 5px 5px; }
.homecolumn { float: left; width: 540px; margin-right: 10px; }
.disclaimer { font-size: 10px; line-height: 12px; }
.paginatebutton { float: left; width: 255px; height: 75px; }
.prevpaginatebutton { float: left; width: 255px; height: 75px; }
.nextpaginatebutton { float: left; width: 255px; height: 75px; }
.nexticon { float: right; margin-top: 20px; margin-right: 40px;}
.nextp { float: right; margin-top: 30px; margin-right: 10px;}
.previcon { float: left; margin-top: 20px; margin-left: 40px;}
.prevp { float: left; margin-top: 30px; margin-left: 10px;}
.seeallicon { float: left; margin-top: 25px; margin-left: 70px;}
.seeallp { float: left; margin-top: 30px; margin-left: 10px;}
.previous_box .previcon { float: left; margin-top: 10px; margin-left: 0px; width: 30px; }
.previous_box .prevp { float: left; margin-top: 10px; margin-left: 10px; width: 52px; }
.next_box .nexticon { float: right; margin-top: 10px; margin-right: 0px; width: 30px; }
.next_box .nextp { float: right; margin-top: 10px; margin-right: 10px; width: 52px; text-align: right; }

#container { width: 990px; margin: 0 auto; padding: 0; }
#content { float: left; clear:both; width: 990px; }
#banner { height: 70px; margin: 0; padding: 0; }
.column2-1 { width: 215px; float: left; margin: 0 10px 0 0; padding: 0; }
.column2-2 { width: 765px; float: left; margin: 0; padding: 0; }
.column1 { width: 990px; float: left; margin: 0; padding: 0; }
.onecolumn { width: 685px; float: left; clear: both; margin-right: 20px; }
.twocolumn { width: 330px; float: left; margin: 0 20px 0 0; }
.twocolumnR { width: 350px; float: right; }
.twocolumnR .fourcolumn { margin: 0 0 20px 20px; }
.twocolumnyellow { background-image:url(http://www.okayyellow.com/images/cssimages/twocolumnyellowBG.jpg); width: 330px; float: left; }
.twocolumnyellowwrapper { background-image:url(http://www.okayyellow.com/images/cssimages/twocolumnyellowBGbottom.jpg); background-repeat: no-repeat; background-position: bottom left; padding-bottom: 20px; }
.twocolumnyellowwrapper p { padding: 0 20px;}
.column2-2 .boxcontent .twocolumnyellow .twocolumnyellowwrapper h2 {  background-image:url(http://www.okayyellow.com/images/cssimages/twocolumnyellowBGtop.jpg); background-repeat: no-repeat; background-position: top left; margin: 0; padding: 20px 20px 0px 20px; }
.threecolumn { width: 215px; float: left; margin-right: 20px; }
.fourcolumn { width: 155px; float: left; margin: 0 20px 20px 0;}
.threefourthscolumn { width: 490px; float: left; margin: 0 20px 20px 0; }
.video h4 { color: #4e4e4e; font-weight: bold; background-image:url(http://www.okayyellow.com/images/cssimages/worktab-tv.jpg); background-repeat: no-repeat; margin: 0; padding: 5px 5px 4px 10px; }
.video .thumb { border: 5px solid #b0e4fc; }
.website h4 { color: #fff; font-weight: bold; background-image:url(http://www.okayyellow.com/images/cssimages/worktab-web.jpg); background-repeat: no-repeat; margin: 0; padding: 5px 5px 4px 10px; }
.website .thumb { border: 5px solid #e95353; }
.graphic_design h4 { color: #fff; font-weight: bold; background-image:url(http://www.okayyellow.com/images/cssimages/worktab-print.jpg); background-repeat: no-repeat; margin: 0; padding: 5px 5px 4px 10px; }
.graphic_design .thumb { border: 5px solid #a3d085; }
.next_box_wrapper { float: left; width: 112px; height: 65px; margin-top: 100px; }
.next_box { float: left; width: 92px; height: 60px; padding: 5px 10px 0; background: url(http://www.okayyellow.com/images/cssimages/nextboxBG.jpg) right; }
.previous_box_wrapper { float: left; width: 112px; height: 65px; margin-top: 100px; }
.previous_box { float: left; width: 92px; height: 60px; padding: 5px 10px 0; background: url(http://www.okayyellow.com/images/cssimages/prevboxBG.jpg) }
.previous_box p, .next_box p { line-height: 12px; }
.twitter { border-bottom: 1px solid #CCCCCC; }
.twitterokayyellow { font-family: Georgia, "Times New Roman", Times, serif;color: #ffcc00; font-size: 32px; font-style: italic; line-height: 40px; margin: 10px 0; padding: 0px; }
.custompage { margin: -80px 0 -40px -40px; width: 765px; }

/*  MAINMENU  */
#mainmenu { float: right; margin: 15px 0 0 0; padding: 0; width: 500px; }
#mainmenu ul { color: #f60; font-size: 12px; margin: 0; padding: 0; list-style: none; float: left; }
#mainmenu ul li { background-image:url(http://www.okayyellow.com/images/cssimages/menuBG.jpg); float: left; margin: 0; padding: 0; height: 30px; }
#mainmenu ul li a { height: 20px; display: block; color: #f60; text-decoration: none; margin: 0; padding: 7px 15px 1px; border-right: 1px #e4e4e4 solid; }
#mainmenu ul li a:hover, #mainmenu ul li a.current  { color: #f60; background-image:url(http://www.okayyellow.com/images/cssimages/menuBG.jpg); background-position: 0 60px; }
#mainmenu ul li a:active { color: #f60; background-position: 0 30px; }
#mainmenu ul li.first a { border: 0px; overflow: hidden; width: 30px; height: 0;  margin: 0; padding: 30px 0px 0px 0px; background-image: url(http://www.okayyellow.com/images/cssimages/menufirstBG.jpg); }
#mainmenu ul li.first a:hover , #mainmenu ul li.first a.current { background-image: url(http://www.okayyellow.com/images/cssimages/menufirstBG.jpg); }
#mainmenu ul li.first a:active { background-image: url(http://www.okayyellow.com/images/cssimages/menufirstBG.jpg); }
#mainmenu ul li.last a { border: 0px; padding-bottom: 3px; background-image: url(http://www.okayyellow.com/images/cssimages/menulastBG.jpg); background-repeat: no-repeat; background-position: right top }
#mainmenu ul li.last a:hover , #mainmenu ul li.last a.current { background-image: url(http://www.okayyellow.com/images/cssimages/menulastBG.jpg); background-position: right center; }
#mainmenu ul li.last a:active { background-image: url(http://www.okayyellow.com/images/cssimages/menulastBG.jpg); background-position: right bottom; }
#mainmenu img { float: left; }
#mainmenu p { color: #ffffff; font-weight: bold; text-align: right; margin: 0 0 5px 0; pading: 0; }



/*  HEADER  */

#header { float: left; clear:both; margin: 0 0 10px; padding: 0; }
#logo { width: 215px; margin-top: 10px; }


/*  FOOTER  */

#footer { font-size: 11px; width: 990px; float: left; text-align: center; color: #ffffff; clear: both; margin-bottom: 25px; font-weight: bold; }
#footerinfo {  }
#footermenu { margin: 10px 0px; }
#footermenu ul { color: #ffffff; font-size: 11px; margin: 0; padding: 0; clear: none; }
#footermenu ul li { border-right: 1px solid #fff; display: inline; }
#footermenu ul li.last { border-right-style: none; }
#footermenu ul li a { color: #ffffff; text-decoration: none; margin: 0; padding: 10px; }
#footermenu ul li a:hover { color: #eeeeee; }
#footermenu ul li a:active { color: #ffffff; }

/*  .column1 WHITEBOXES  */

.column1 .box { background-color: #fff; background-image: url(http://www.okayyellow.com/images/cssimages/boxBG.jpg); background-repeat: repeat-y; background-position: right 0; margin: 0 0 10px 0; }
.column1 .boxheader { background-color: #fef3c5; background-image: url(http://www.okayyellow.com/images/cssimages/boxheaderBG.jpg); background-repeat: no-repeat; background-position: right 0; }
.column1 .boxheader h1 { color: #f60; font-size: 16px; font-weight: normal; background-image: url(http://www.okayyellow.com/images/cssimages/boxh2BG.jpg); background-repeat: no-repeat; background-position: left top; clear: both; margin: 0; padding: 10px 10px; }
.column1 .boxtop { background-image: url(http://www.okayyellow.com/images/cssimages/boxtopBG.jpg); background-repeat: no-repeat; background-position: right top; }
.column1 .boxtop h1 { color: #f60; font-size: 24px; font-weight: normal; background-image: url(http://www.okayyellow.com/images/cssimages/boxtoph2BG.jpg); background-repeat: no-repeat; background-position: left top; clear: both; margin: 0; padding: 20px 40px 10px; }
.column1 .boxtop .date { margin: 0; padding: 0 10px; }
.column1 .boxcontent { clear: both; float: left; margin: 0 20px 0 40px; }
.column1 .boxcontent h1 { clear: both; color: #f60; font-size: 24px; font-weight: normal; margin: 20px 0; }
.column1 .boxcontent h2 { clear: both; color: #4e4e4e; font-size: 16px; font-weight: normal; margin: 20px 0; }
.column1 .boxliner { width: 685px; clear: both; float: left; background-image: url(http://www.okayyellow.com/images/cssimages/boxlinerBG.jpg); background-repeat: no-repeat; background-position: right top; margin: 20px 0 0 0; padding: 10px 40px; }
.column1 .boxfooterpaginate { height: 75px; background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterpagenateBG.jpg); background-repeat: no-repeat; clear: both; }
.column1 .boxfooter { background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterBG.jpg); background-repeat: no-repeat; clear: both; background-position: bottom; }
.column1 .boxfooterwrapper { background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterwrapperBG.jpg); background-repeat: no-repeat; background-position: left bottom; padding: 10px; display: inline-block; }

/* .column2-1 WHITEBOXES  */

.column2-1 .box { background-color: #fff; background-image: url(http://www.okayyellow.com/images/cssimages/boxBG.jpg); background-repeat: repeat-y; background-position: right 0; margin: 0 0 10px 0; }
.column2-1 .boxheader { background-color: #fef3c5; background-image: url(http://www.okayyellow.com/images/cssimages/boxheaderBG.jpg); background-repeat: no-repeat; background-position: right 0; }
.column2-1 .boxheader h1 { color: #f60; font-size: 16px; font-weight: normal; background-image: url(http://www.okayyellow.com/images/cssimages/boxh2BG.jpg); background-repeat: no-repeat; background-position: left top; clear: both; margin: 0; padding: 10px 10px; }
.column2-1 .boxheader h1 a { text-decoration: none; }
.column2-1 .boxtop { background-image: url(http://www.okayyellow.com/images/cssimages/boxtopBG.jpg); background-repeat: no-repeat; background-position: right top; }
.column2-1 .boxtop h1 { color: #f60; font-size: 16px; font-weight: normal; background-image: url(http://www.okayyellow.com/images/cssimages/boxtoph2BG.jpg); background-repeat: no-repeat; background-position: left top; clear: both; margin: 0; padding: 8px 10px 7px; }
.column2-1 .boxtop .date { margin: 0; padding: 0 10px; }
.column2-1 .boxcontent { clear: both; float: left; }
.column2-1 .boxcontent h1 { clear: both; color: #f60; font-size: 24px; font-weight: normal; margin: 0px; }
.column2-1 .boxcontent h2, .column2-1 .boxcontent h2 a { clear: both; color: #4e4e4e; font-size: 14px; font-weight: normal; text-decoration: none; margin: 10px 0; }
.column2-1 .boxcontent p { padding: 0 10px 0; }
.column2-1 .boxfooter { background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterBG.jpg); background-repeat: no-repeat; background-position: right bottom; clear: both; }
.column2-1 .boxfooterwrapper { background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterwrapperBG.jpg); background-repeat: no-repeat; background-position: left bottom; padding: 10px; display: inline-block; }
.column2-1 .content { width: 195px; float: left; padding: 5px 10px; }

/*  .column2-2 WHITEBOXES  */

.column2-2 .box { background-color: #fff; background-image: url(http://www.okayyellow.com/images/cssimages/boxBG.jpg); background-repeat: repeat-y; background-position: right 0; margin: 0 0 10px 0; }
.column2-2 .boxheader { background-color: #fef3c5; background-image: url(http://www.okayyellow.com/images/cssimages/boxheaderBG.jpg); background-repeat: no-repeat; background-position: right 0; }
.column2-2 .boxheader h1 { color: #f60; font-size: 16px; font-weight: normal; background-image: url(http://www.okayyellow.com/images/cssimages/boxh2BG.jpg); background-repeat: no-repeat; background-position: left top; clear: both; margin: 0; padding: 10px 10px; }
.column2-2 .boxtop { background-image: url(http://www.okayyellow.com/images/cssimages/boxtopBG.jpg); background-repeat: no-repeat; background-position: right top; }
.column2-2 .boxtop h1 { color: #f60; font-size: 24px; font-weight: normal; background-image: url(http://www.okayyellow.com/images/cssimages/boxtoph2BG.jpg); background-repeat: no-repeat; background-position: left top; clear: both; margin: 0; padding: 20px 40px 0; }
.column2-2 .boxtop h2 { font-size: 18px; font-weight: normal; margin: 0; padding: 0 40px 10px; }
.column2-2 .boxtop .date { margin: 0; padding: 0 10px; }
.column2-2 .boxcontent { clear: both; float: left; margin: 0 20px 20px 40px; }
.column2-2 .boxcontent h1 { clear: both; color: #f60; font-size: 24px; font-weight: normal; margin: 20px 0; }
.column2-2 .boxcontent h2 { clear: both; color: #4e4e4e; font-size: 16px; font-weight: normal; margin: 20px 0 10px 0; }
.column2-2 .boxliner { width: 685px; clear: both; float: left; background-color: #f2f2f2; background-image: url(http://www.okayyellow.com/images/cssimages/boxlinerBG.jpg); background-repeat: repeat-y; background-position: right top; margin: 0; padding: 10px 40px; border-top: 1px solid #cccccc }
.column2-2 .boxfooterpaginate { width: 765px; height: 75px; background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterpagenateBG.jpg); background-repeat: no-repeat; clear: both; }
.column2-2 .boxfooter { background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterBG.jpg); background-repeat: no-repeat; background-position: right bottom; clear: both; }
.column2-2 .boxfooterwrapper { background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterwrapperBG.jpg); background-repeat: no-repeat; background-position: left bottom; padding: 10px; display: inline-block; }

/*  BOXHEADER MENU  */

.boxheader ul { color: #f60; font-size: 10px; margin: 0; padding: 9px 10px 8px 10px; /* fixes Firefox 0.9.3 */}
.boxheader ul h2 { color: #f60; font-size: 12px; font-weight: normal; background-image: url(http://www.okayyellow.com/images/cssimages/boxh2BG.jpg); background-repeat: no-repeat; background-position: left top; clear: both; margin: -9px -10px; padding: 8px 10px; float: left; }
.boxheader ul li { position: relative; margin: 0; padding: 0 2px; display: inline; }
.boxheader ul li a { color: #f60; text-decoration: none; margin: 0; padding: 2px 0 1px 0; }
.boxheader ul li a span { margin: 0; padding: 2px 5px; }
.boxheader ul li a:hover, .boxheader ul li a:active, .boxheader ul li a.current  { color: #fff; background-image: url(http://www.okayyellow.com/images/cssimages/boxheadermenuLBG.jpg); }
.boxheader ul li a:hover span, .boxheader ul li a:active span, .boxheader ul li a.current span { color: #fff; margin: 0; padding: 2px 5px; background-image: url(http://www.okayyellow.com/images/cssimages/boxheadermenuRBG.jpg); background-repeat: no-repeat; background-position: right top; }

/*  ITEMS  */

.column1 .item { width: 195px; height: 200px; float: left; padding: 10px; margin-right: 10px; margin-bottom: 10px; border: 1px #f2f2f2 solid; }
.column1 .item p { margin: 5px 0; padding: 0; line-height: 14px;}
.column1 .item h3 { margin: 10px 0; }
.column2-1 .item { width: 195px; float: left; padding: 5px 10px; border-bottom: 1px #cccccc solid; }
.column2-1 .item p { margin: 5px 0; padding: 0; line-height: 14px;}
.column2-1 .work { height: 200px; }
.column2-1 .articles { height: 95px; }
.column2-2 .item { width: 195px; float: left; margin: 0 0 10px 10px; padding: 10px; }
.column2-2 .item p { margin: 5px 0; padding: 0; line-height: 14px;}
.column1 .item:hover { background-image: url(http://www.okayyellow.com/images/cssimages/column2-2hover.jpg); background-position: right bottom; }
.column1 .current { background-image: url(http://www.okayyellow.com/images/cssimages/column2-2hover.jpg); background-position: right bottom; }
.column2-1 .item:hover { background-image: url(http://www.okayyellow.com/images/cssimages/column2-1hover.jpg); background-position: right; }
.column2-1 .current { background-image: url(http://www.okayyellow.com/images/cssimages/column2-1hover.jpg); background-position: right; }
.column2-2 .item:hover { background-image: url(http://www.okayyellow.com/images/cssimages/column2-2hover.jpg); background-position: right bottom; }
.column1 .item:active { background-image: url(http://www.okayyellow.com/images/cssimages/column2-2active.jpg); background-position: right bottom; }
.column2-1 .item:active { background-image: url(http://www.okayyellow.com/images/cssimages/column2-1active.jpg); background-position: right; }
.column2-2 .item:active { background-image: url(http://www.okayyellow.com/images/cssimages/column2-2active.jpg); background-position: right bottom; }
.item h3 a { color: #4E4E4E; font-size: 14px; text-decoration: none; height: 40px; font-weight: normal; margin: 0; padding: 0; }

/*  PROMOSBOX */
.promosbox { background-color: #fff; background-image: url(http://www.okayyellow.com/images/cssimages/boxBG.jpg); background-repeat: repeat-y; background-position: right 0; margin: 0 0 10px 0; }
.promosbox .boxtop { background-image: url(http://www.okayyellow.com/images/cssimages/boxtopBG.jpg); background-repeat: no-repeat; background-position: right top; }
.promosbox .boxtop p { background-image: url(http://www.okayyellow.com/images/cssimages/boxtoph2BG.jpg); background-repeat: no-repeat; background-position: left top; clear: both; margin: 0; padding: 0; }
.promosbox .boxcontent { clear: both; float: left; margin: 0 10px 0 20px; }
.promosbox .boxcontent h1 { clear: both; color: #f60; font-size: 16px; font-weight: normal; margin: 0; }
.promosbox .boxcontent .fourcolumn { width: 139px; float: left; margin: 0 20px 0 0; padding: 0 20px 0 0; border-right: 1px solid #ffcc00;}
.promosbox .boxcontent .fourcolumn.last { width: 195px; float: left; margin: 0; padding: 0; border-right: none;}
.promosbox .boxfooter { background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterBG.jpg); background-repeat: no-repeat; background-position: right bottom; clear: both; }
.promosbox .boxfooterwrapper { background-image: url(http://www.okayyellow.com/images/cssimages/boxfooterwrapperBG.jpg); background-repeat: no-repeat; background-position: left bottom; padding: 10px; display: inline-block; }

/* COMMENTS */
#comment_box { width: 450px; float: left; }
#comment_entry_form { width: 195px; float: left; margin-left: 17px; padding-left: 22px; border-left: 1px #cccccc solid; }
#comment_entry_form p { line-height: 12px;}
.comment_entry, .comment_entry1, .comment_author { float: left; width: 430px; padding: 10px; border-bottom: 1px #cccccc solid; }
.comment_entry { background-color: #ffffff; }
.comment_author { background-color: #fffbea; }
.comment_entry .numbers, .comment_entry1 .numbers, .comment_author .numbers { height: 50px; width: 50px; float: left; margin-top: 10px; margin-right: 15px; }
.comment_entry .comment, .comment_entry1 .comment, .comment_author .comment { float: left; width: 365px; }

/*  JQUERY SLIDER  */
#slider{}	
#slider ul, #slider li { margin: 0; padding:0; list-style:none; }
#slider li { width: 540px; height: 420px; overflow: hidden; }	
#prevBtn, #nextBtn { float: left; display:block; overflow:hidden; text-indent:-8000px; height: 40px; width: 40px; margin-top: -50px; margin-left: 10px; position: relative; }	
#nextBtn { margin-left: 490px; }														
#prevBtn a, #nextBtn a{ display: block; width: 40px; height: 40px; background:url(http://www.okayyellow.com/images/cssimages/slide-prev.png) no-repeat 0 0; }
#nextBtn a { background: url(http://www.okayyellow.com/images/cssimages/slide-next.png) no-repeat 0 0; }
ol#controls{
		margin: 5px;
		padding: 0;
		height: 10px;	
		}
	ol#controls li{
		margin-right: 10px;
		padding:0;
		float:left;
		list-style:none;
		height:10px;
		width: 10px;
		}
	ol#controls li a{
		float:left;
		height:10px;
		width: 10px;
		background: url(http://www.okayyellow.com/images/cssimages/dot.jpg) no-repeat 0 0;
		padding: 0px;
		text-decoration: none;
		}
	ol#controls li.current a{
		background: url(http://www.okayyellow.com/images/cssimages/dot1.jpg) no-repeat 0 0;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}