Bootstrap-3 carousel controls on outside - html

Question

See my bootply
I have a Bootstrap-3 carousel with 3 x DIVs showing each time. You can click right and left for next 3 x DIVs to show. But my indicators are a whole area where you can click, the grey block. Is it possible to just have the > thingie clickable?
Also, how to get the > thingie to be outside my DIV, now its overlapping with my content? Gracias!
HTML:
<div class="carousel slide" data-ride="carousel" id=
"carousel-example- generic">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target=
"#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic"></li>
<li data-slide-to="2" data-target="#carousel-example-generic"></li>
</ol><!-- Slider Content (Wrapper for slides )-->
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4 col-sm-6">
<p>
aaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="col-md-4 col-sm-6 hidden-xs">
<p>bbbbbbbbbbbbbb</p>
</div>
<div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
<p>cccccccccccccc</p>
</div>
</div>
<div class="item">
<div class="col-md-4 col-sm-6">
<p>dddddddddddddd</p>
</div>
<div class="col-md-4 col-sm-6 hidden-xs">
<p>eeeeeeeeeeeeee</p>
</div>
<div class="col-md-4 col-sm-6 hidden-sm hidden-xs">
<p>ffffffffffffff</p>
</div>
</div>
</div>
</div><!-- Controls -->
<a class="left carousel-control" data-slide="prev" href=
"#carousel-example-generic"><span class=
"glyphicon glyphicon-chevron-left"></span></a> <a class=
"right carousel-control" data-slide="next" href=
"#carousel-example-generic"><span class=
"glyphicon glyphicon-chevron-right"></span></a>
CSS:
.carousel-indicators li { visibility: hidden; }
.carousel-inner .item {
font-size:10px;
color:#0404B4
}
.carousel-control {
z-index: 10;
top: 2%;
font-family: 'Helvetica Neue', Arial, sans-serif;
}

Answer 1

I'have updated your css.
/* CSS used here will be applied after bootstrap.css */
.carousel-indicators li { visibility: hidden; }
.carousel-inner .item {
font-size:10px;
color:#0404B4
}
.carousel-control {
z-index: 10;
top: 2%;
width: 30px; // no more gray thing
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.carousel-control.left,
.carousel-control.right { background: none }
// change it according to your needs
.carousel-control.left { left: -10px; }
.carousel-control.right { right: -10px; }
Demo